gulp.watch任务不拾取更改的文件 [英] gulp.watch tasks not picking up changed files

问题描述

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

我有一个使用 gulp-smoosher 将HTML文件拉入HTML文件的html任务，替换将链接标记添加到CSS文件中。

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

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

更新：
我已经完成一些阅读，我意识到Gulp同时运行我的CSS和HTML任务。这就解释了为什么当我开始html任务时，CSS文件还没有写入。我已经看到了一些解决方案，但他们要么不工作，要么不知道如何使用它们。以下是我尝试使用 run-sequence 插件：

  gulp.task（'csshtml'，function（）{
 runSequence（'css'，'html'）; 
}）; 
 $ b 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'
}; 
 $ b gulp.task（'css'，function（）{
 var processors = [
嵌套，
 autoprefixer，
 cssnext，
 （
 cssnano 
）; 
 return gulp.src（paths.css）
 .pipe（postcss（processors））
 .pipe（gulp.dest（' css'））; 
}）; 
 $ b 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']）; 
}）; 
  

解决方案

我会尝试回答一些问题：

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

是有办法在下一个任务完成之前完成任务一个执行。你可以通过第二个参数（这是一个数组/列表的依赖）在gulp任务中完成。

（html，[css]，function（）{
// additonal code goes here
}）;

这个简单的例子是，在运行 html 任务，首先运行 css 任务。一旦完成，然后运行 html 任务。

strong>

在您的监视任务中，当您检测到 paths.css config中的文件更改时值，并行（同时）运行 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]）; 
}）; 
  

您还可以在默认任务中创建它可以运行这两个而不必键入完整的任务名称。该示例（仅）显示了启动 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'
}; 
 $ b gulp.task（'css'，function（）{
 var processors = [
嵌套，
 autoprefixer，
 cssnext，
 （
 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]）; 
 $ b $ gulp.task（watch：css，function（）{
 gulp.watch（paths.css，[css]）; 
}）; 
 $ b gulp.task（watch：html，function（）{
 gulp.watch（paths.html，[html]）; 
}）; 
  

如果您不想要 html 取决于你的 css 任务，并且你从外观中使用 run-sequence ，你可以使以下更改：

1。删除依赖关系

  gulp.task（html，function（）{
 // your代码... 
}）; 
  

2。添加 require

  var runSequence = require（运行序列）; 
  

3。设置运行顺序

  gulp.task（ （默认值），函数（）{
 runSequence（
css，
html，
watch
）; 
}）; 
  

这将按照该顺序运行它们并监视任何文件更改并根据你变了。 HTML任务不再依赖于css任务。手表将按照您的预期行事。

I have a gulp css task that picks up a CSS file and runs several postCSS processors on it, then writes the file to a destination directory.

I have an html task that uses gulp-smoosher to pull the CSS file into the HTML file, replacing the link tag to the CSS file.

When I run the tasks separately from the command line, everything works as expected. However, when I use gulp.watch to automatically run the tasks when the CSS file changes, the changes aren't reflected in the final HTML file.

Is the html task somehow picking up the CSS file before the css task writes the changes? Is there a way to make sure the css task has finished before running the html task?

Update: I've done some reading and I realize Gulp runs both my css and html tasks at the same time. That explains why the CSS file isn't written yet when I start the html task. I've seen some solutions, but they either don't work or I don't understand how to use them. Here's my attempt at using the run-sequence plugin:

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

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

... but the results were the same. I'm sure I'm doing something wrong.

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

解决方案

I am going to try and answer some of your questions:

Is the html task somehow picking up the CSS file before the css task writes the changes? Is there a way to make sure the css task has finished before running the html task?

Yes there is a way to make a task finish before the next one executes. You can do this via the second parameter (which is an array/list of dependencies) in a gulp task.

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

This simple example is saying, before you run the html task, run the css task first. Once thats is done, then run the html task.

Issues with your watch task:

In your watch task you're saying when it detects a file change in the paths.css config value, run both css and html in parallel (at the same time).

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

If you want your task to run in a particular order then you can make one depend on the other. As shown above.

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

You can also create a default task in gulp which runs both these without having to type the full task name. The example (only) shows the default task kicking off html task and watch for file changes and performed the necessary task if it detects file changes.

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

This is what I think you wanted to do, let me know if its incorrect, I'll update as necessary:

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

An alternate, if you don't want html to depend on your css task and you are using run-sequence from the looks of things, you could make the following changes:

1. Remove the dependency

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

2. Add the require

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

3. Setup the run-sequence

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

This will run them in that order and watch for any file changes and run the appropriate task based on what you've changed. The HTML task no longer depends on the css task. The watch will behave as you'd expect.

这篇关于gulp.watch任务不拾取更改的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！