在CSS缩小之后Gulp同步内联CSS

我正在用Gulp内联缩小CSS的问题。

这是我的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文件在内嵌和缩小任务运行时间之前不会closures。

我尝试了这个，包括任务之间的2秒的时间，似乎解决了这个问题：

 gulp.task('build-html', function(callback){ runSequence('clean', 'css'); setTimeout(function(){ gulp.run('inline-and-minify'); }, 2000); }); 

这似乎有点脆弱，加上gulp.run已被弃用。 有没有更好的方法呢？

Answer 1

你需要回电话让它知道你的任务完成。 你可以通过返回你的stream来完成，或者你可以在你的任务函数中传递一个callback参数并调用它。 我推荐以前的方法，使用merge-stream，因为在你的gulp任务中有多个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']);