Question

我有一个gulp css任务，它获取一个CSS文件并在其上运行几个postCSS处理器，然后将该文件写入目标目录。

我有一个html任务，使用gulp-smoosher将CSS文件拉入HTML文件，将link标记替换为CSS文件。

当我从命令行单独运行任务时，一切都按预期工作。但是，当我使用gulp.watch在CSS文件更改时自动运行任务时，更改不会反映在最终的HTML文件中。

在css任务写入更改之前，html任务是否以某种方式获取CSS文件？有没有办法在运行html任务之前确保css任务已经完成？

更新我已经做了一些阅读，我意识到Gulp同时运行我的css和html任务。这就解释了为什么在我启动html任务时还没有编写CSS文件。我已经看到了一些解决方案，但他们要么不工作，要么我不懂如何使用它们。我试图使用run-sequence插件：

gulp.task('csshtml', function() {
    runSequence('css', 'html');
});

gulp.task('watch', function() {
    gulp.watch(paths.css, ['csshtml']);
});

......但结果是一样的。我确定我做错了什么。

gulpfile.js：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
var nesting = require('postcss-nesting');
var cssnano = require('cssnano');
var htmlmin = require('gulp-htmlmin');
var smoosher = require('gulp-smoosher');

var paths = {
    css: 'src/*.css',
    html: 'src/*.html'
};

gulp.task('css', function() {
    var processors = [
        nesting,
        autoprefixer,
        cssnext,
        precss,
        cssnano
    ];
    return gulp.src(paths.css)
        .pipe(postcss(processors))
        .pipe(gulp.dest('css'));
});

gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(smoosher({ base: '.' }))
    .pipe(htmlmin({
        collapseWhitespace: true,
        conservativeCollapse: true,
        removeComments: true,
        collapseInlineTagWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeRedundantAttributes: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeOptionalTags: true,
        minifyCSS: true
    }))
    .pipe(gulp.dest('.'))
});

gulp.task('watch', function(){
    gulp.watch(paths.css, ['css', 'html']);
    gulp.watch(paths.html, ['html']);
});

Answer 1

我将尝试回答您的一些问题：

在css任务写入更改之前，html任务是否以某种方式获取CSS文件？有没有办法在运行html任务之前确保css任务已完成？

是的，有一种方法可以在下一个任务执行之前完成任务。您可以通过gulp任务中的第二个参数（这是一个数组/依赖列表）来执行此操作。

gulp.task("html", ["css"], function () {
    // additonal code goes here
});

这个简单的例子说，在运行html任务之前，首先运行css任务。完成后，运行html任务。

观看任务的问题：

在您的观看任务中，当您检测到paths.css配置值中的文件更改时，同时同时运行css和html（同时）

gulp.task('watch', function(){
    gulp.watch(paths.css, ['css', 'html']);
    gulp.watch(paths.html, ['html']);
});

如果您希望任务以特定顺序运行，那么您可以依赖另一个任务。如上图所示。

gulp.task("watch", function() {
    gulp.watch(path.css, ["css"]);
    gulp.watch(paths.html, ["html"]);
});

您还可以在gulp中创建default任务，无需键入完整的任务名称即可运行这两项任务。该示例（仅）显示默认任务启动html任务并监视文件更改，并在检测到文件更改时执行必要任务。

gulp.task("default", ["html", "watch"]);

这是我认为您想要做的事情，如果不正确，请告诉我，我会根据需要进行更新：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
var nesting = require('postcss-nesting');
var cssnano = require('cssnano');
var htmlmin = require('gulp-htmlmin');
var smoosher = require('gulp-smoosher');

var paths = {
    css: 'src/*.css',
    html: 'src/*.html'
};

gulp.task('css', function() {
    var processors = [
        nesting,
        autoprefixer,
        cssnext,
        precss,
        cssnano
    ];
    return gulp.src(paths.css)
        .pipe(postcss(processors))
        .pipe(gulp.dest('css'));
});

gulp.task('html', ['css'],  function() {
    return gulp.src('src/*.html')
        .pipe(smoosher({ base: '.' }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            conservativeCollapse: true,
            removeComments: true,
            collapseInlineTagWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: true,
            removeRedundantAttributes: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            removeOptionalTags: true,
            minifyCSS: true
        }))
        .pipe(gulp.dest('.'));
});

gulp.task("default", ["html", "watch"]);

gulp.task("watch", ["watch:css", "watch:html"]);

gulp.task("watch:css", function() {
    gulp.watch(paths.css, ["css"]);
});

gulp.task("watch:html", function () {
    gulp.watch(paths.html, ["html"]);
});

备用，如果您不希望html依赖于css任务，而您从事物的外观中使用run-sequence，则可以进行以下更改：

<强> 1。删除依赖

gulp.task("html", function () {
    // your code...
});

<强> 2。添加require

var runSequence = require("run-sequence");

第3。设置run-sequence

gulp.task("default", function () {
    runSequence(
        "css", 
        "html", 
        "watch"
    ); 
});

这将按顺序运行它们并监视任何文件更改并根据您更改的内容运行相应的任务。 HTML任务不再依赖于css任务。手表的表现与您期望的一样。

gulp.watch任务没有获取更改的文件

1 个答案: