javascript - CSS 缩小后 Gulp 同步内联 CSS

Question

我在使用 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 文件在运行 inline-and-minify 任务时并未关闭。

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

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

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

这看起来有点脆弱，而且 gulp.run 已被弃用。有更好的方法吗？

Answer 1

你需要回调 gulp 让它知道你的任务已经完成。您可以通过返回流来执行此操作，也可以在任务函数中传递回调参数并调用它。我推荐前一种方法，使用 merge-stream因为您的 gulp 任务中有多个流。

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