Синхронизирующий синхронный сглаживание CSS после выравнивания CSS

Question

У меня возникли проблемы с inlining minified CSS с Gulp.

Вот мой 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']); 

Я получаю следующий вывод:

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

Который смотрит на меня как файл CSS, который уменьшенный не закрывается во время inline- и-minify выполняет задачи.

Я попробовал это, включая таймаут 2 секунды между задачей и что, кажется, решить эту проблему:

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

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

Это только кажется немного надуманные, плюс gulp.run осуждается. Есть ли лучший способ сделать это?

Answer 1

Вам нужно позвонить обратно в глоток, чтобы сообщить, что ваша задача закончена. Вы можете сделать это, возвратив свои потоки, или вы можете передать аргумент обратного вызова в свою функцию задачи и вызвать это. Я рекомендую использовать прежний подход, используя merge-stream, поскольку у вас есть несколько потоков в ваших задачах с глотком.

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']);