Gulp errors trying to get uglify and default gulp to work

Question

hi I'm having trouble setting up gulp it seems to have all changed since I last used it I'm getting errors and can't figure out why. I'll post some pics along with my code. the first problem is that uglify doesn't complete and the second problem is that gulp default won't run the command prompt should explain my problems better than I can if you have any further questions please ask and be civil.

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');




sass.compiler = require('node-sass');

gulp.task('sass', function () {
 return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./Edit/css'));
});


gulp.task('css', function () {
  gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});



gulp.task('run',['sass','css']);

gulp.task('watch', function(){
    gulp.watch('./Edit/sass/*.scss',['sass']);
    gulp.watch('./Edit/css/*.css',['css']);
});

gulp.task('default',['watch', 'run']);

here is my output

Answer 1

So you've got two kinds of errors going on:

1. Task function must be specified

The way gulp runs dependent tasks has changed in v4.0.0. Instead of specifying those tasks in an array, like this:

gulp.task('run',['sass','css']);

They've introduced the gulp.series and gulp.parallel functions. A task function, and not an array, because Task function must be specified. In your case, that gives:

gulp.task('run', gulp.series('sass','css'));

2. Did you forget to signal async completion

This one you could have found, given that this question has been asked many times now. You need to add a return statement to your css task for gulp to know when it's completed and can thus move on. Your task becomes:

gulp.task('css', function () {
  return gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});

Result:

Putting it all together, you get this gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
 return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./Edit/css'));
});


gulp.task('css', function () {
  return gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});



gulp.task('run', gulp.series('sass','css'));

gulp.task('watch', function(){
    gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
    gulp.watch('./Edit/css/*.css', gulp.series('css'));
});

gulp.task('default', gulp.series('watch', 'run'));

Note that you can combine your sass and css task if you'd like:

gulp.task('styles', function(){
  return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(uglifycss({
    "maxLineLen": 80,
    "uglyComments": true
  }))
  .pipe(gulp.dest('./upload/css'));
});