Gulp + Sass + Del - Random behaviour

Question

I don't understand why this simple script behaves differently depending on the del plugin setup.

When I launch gulp sass I just want to clean the public/css dir and "compile" the css from sass. So far so good:

gulp.task('clean-css', del.bind(null,['./public/css']));

gulp.task('sass', ['clean-css'], function () {
  return gulp.src('./resources/sass/**/*.scss')
    .pipe(plugins.sass({outputStyle: 'compressed'})) 
    .pipe(gulp.dest('./public/css'));
});

However if if change the clean-css task to:

gulp.task('clean-css', del(['./public/css']));

Then it only works every other time. The first it cleans and generates the css, the next one it removes the directory but doesn't generate anything.

So, what's the difference between del(['./public/css']) and del.bind(null,['./public/css'])? Why does it affect the script in that way?

UPDATE: The times when it doesn't generate anything I am seeing this error:

events.js:141
      throw er; // Unhandled 'error' event
            ^
Error: ENOENT: no such file or directory, open 'C:\Users\XXXX\gulp-project\public\css\style.css'
    at Error (native)

Is there any reason that you [`bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) `del` with `null`? — Yan Foto, Jul 14 '15 at 08:38

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

tl;dr

Gulp doesn't know when del is finished if no callback is provided. with or without bind, del works every other time if your sass task is run before del and files to be deleted actually exist.

According to the gulp documentation you should also provide the callback method to del. This is how gulp knows when a task is finished:

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function (cb) {
  del([
    'dist/report.csv',
    // here we use a globbing pattern to match everything inside the `mobile` folder
    'dist/mobile/**/*',
    // we don't want to clean this file though so we negate the pattern
    '!dist/mobile/deploy.json'
  ], cb);
});

gulp.task('default', ['clean:mobile']);

I suppose that the order in which your tasks are run is different each time, since gulp doesn't know when del is finished when no callback is provided. According to the documentation:

If you want to create a series where tasks run in a particular order, you need to do two things:

give it a hint to tell it when the task is done,

and give it a hint that a task depends on completion of another.

Gulp + Sass + Del - Random behaviour

1 Answers1