在 CSS 缩小后吞噬同步内联 CSS

Gulp synchronous inlining CSS after CSS minification

本文关键字：CSS 同步 缩小 吞噬      更新时间：2023-09-26

我在使用 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已被弃用。有没有更好的方法？

您需要回拨 gulp 以让它知道您的任务已完成。您可以通过返回流来执行此操作，也可以在任务函数中传递回调参数并调用该参数。我推荐前一种方法，使用合并流，因为您的 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']);
相关文章：