Gulp synchronous inlining CSS after CSS minification

Question

I am having issues with inlining minified CSS with Gulp.

Here is my gulpfile.js:

var gulp = require('gulp'),
  runSequence = require('run-sequence'),
  $ = require('gulp-load-plugins')(),
  browserSync = require('browser-sync'),
  del = require('del');

gulp.task('clean', function(){
  del(['build/**'])
});

/* Minifying CSS */
gulp.task('css', function(){
  gulp.src('./css/*.css')
    .pipe($.minifyCss())
    .pipe(gulp.dest('./build/css'))
    .pipe(browserSync.reload({stream: true}));

  gulp.src('./views/css/*.css')
    .pipe($.minifyCss())
    .pipe(gulp.dest('./build/views/css'))
    .pipe(browserSync.reload({stream: true}));
});

/* Inline CSS and Minify HTML */
gulp.task('inline-and-minify', function(){
  gulp.src('./*.html')
    .pipe($.smoosher({
      base: './build'
    }))
    .pipe($.minifyHtml())
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.reload({stream: true}));

  gulp.src('./views/*.html')
    .pipe($.smoosher({
      base: './build/views'
    }))
    .pipe($.minifyHtml())
    .pipe(gulp.dest('./build/views'))
    .pipe(browserSync.reload({stream: true}))
});

/* Task Bundles, runs tasks one after the other (instead of in parallel) */
gulp.task('build-html', function(callback){
  runSequence('clean', 'css', 'inline-and-minify');
});

gulp.task('default', ['build-html']);

I get the following output:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, open 'build/css/style.css'

Which looks to me like the css file that is minified is not closed by the time inline-and-minify task runs.

I tried this including a timeOut of 2 seconds between task and that seem to solve the problem:

gulp.task('build-html', function(callback){
  runSequence('clean', 'css');

  setTimeout(function(){
    gulp.run('inline-and-minify');
  }, 2000);
});

This just seems a little flimsy, plus gulp.run is deprecated. Is there a better way of doing it?

Ben · Accepted Answer · 2015-01-15 00:09:44Z

You need to call back to gulp to let it know that your task is finished. You can either do this by returning your streams, or you can pass a callback argument in your task function and call that. I recommend the former approach, using merge-stream as you have multiple streams in your gulp tasks.

var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    $ = require('gulp-load-plugins')(),
    browserSync = require('browser-sync'),
    merge = require('merge-stream'),
    del = require('del');

gulp.task('clean', function(cb) {
  del(['build/**'], cb);
});

/* Minifying CSS */
gulp.task('css', function() {
  var css1 = gulp.src('./css/*.css')
    .pipe($.minifyCss())
    .pipe(gulp.dest('./build/css'))
    .pipe(browserSync.reload({stream: true}));

  var css2 = gulp.src('./views/css/*.css')
    .pipe($.minifyCss())
    .pipe(gulp.dest('./build/views/css'))
    .pipe(browserSync.reload({stream: true}));

  return merge(css1, css2);
});

/* Inline CSS and Minify HTML */
gulp.task('inline-and-minify', function() {
  var html1 = gulp.src('./*.html')
    .pipe($.smoosher({
      base: './build'
    }))
    .pipe($.minifyHtml())
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.reload({stream: true}));

  var html2 = gulp.src('./views/*.html')
    .pipe($.smoosher({
      base: './build/views'
    }))
    .pipe($.minifyHtml())
    .pipe(gulp.dest('./build/views'))
    .pipe(browserSync.reload({stream: true}));

  return merge(html1, html2);
});

/* Task Bundles, runs tasks one after the other (instead of in parallel) */
gulp.task('build-html', function(callback) {
  runSequence('clean', 'css', 'inline-and-minify');
});

gulp.task('default', ['build-html']);

Collectives™ on Stack Overflow

Gulp synchronous inlining CSS after CSS minification

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related