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文件并没有被内联和缩小任务运行时关闭。

我试过这个，包括任务之间的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']);

CSS缩小后Gulp同步内联CSS

1 个答案: