Gulp 吞咽。监视任务不拾取更改的文件_Gulp

Gulp 吞咽。监视任务不拾取更改的文件

gulp

Gulp 吞咽。监视任务不拾取更改的文件,gulp,Gulp,我有一个gulpcss任务，它拾取一个css文件并在其上运行几个postss处理器，然后将该文件写入目标目录我有一个html任务，用于将CSS文件拉入html文件，替换CSS文件的链接标记当我独立于命令行运行任务时，一切都按预期进行。但是，当我使用gulp.watch在CSS文件更改时自动运行任务时，更改不会反映在最终的HTML文件中 html任务是否在CSS任务写入更改之前以某种方式拾取CSS文件？在运行html任务之前，是否有方法确保css任务已完成更新：我读了一些书，发现Gulp同

我有一个gulpcss任务，它拾取一个css文件并在其上运行几个postss处理器，然后将该文件写入目标目录

我有一个html任务，用于将CSS文件拉入html文件，替换CSS文件的

链接

标记

当我独立于命令行运行任务时，一切都按预期进行。但是，当我使用

gulp.watch

在CSS文件更改时自动运行任务时，更改不会反映在最终的HTML文件中

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

更新： 我读了一些书，发现Gulp同时运行css和html任务。这就解释了为什么在我开始html任务时还没有编写CSS文件。我见过一些解决方案，但它们要么不起作用，要么我不知道如何使用它们。以下是我尝试使用该插件的情况：

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

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

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

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

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

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

这个简单的例子是，在运行

html

任务之前，先运行

css

任务。完成后，运行

html

任务

手表任务的问题：

在您的监视任务中，您的意思是当它检测到

path.css

config值中的文件更改时，同时运行

css

和

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。添加
要求

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

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

3。设置
运行顺序

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

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

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