Javascript Gulp只监视/更改主文件，而不是所有文件

我想我在GulpWatch任务或编译文件方面有问题。我想让gulp查看styles文件夹中的所有css文件，但它只查看主index.html文件的nad更改，我看不到在浏览器中对css文件所做的更改

文件夹结构：

gulpfile.js：

require("./gulp/tasks/styles");
require("./gulp/tasks/watch");

styles.js：

var gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');
cssvars = require('postcss-simple-vars');
nested = require('postcss-nested');
cssImport = require('postcss-import');
mixins = require('postcss-mixins');

gulp.task('styles', function(){
    return gulp.src('./app/assets/styles/styles.css').pipe(postcss([cssImport, mixins, cssvars, nested, autoprefixer])).on("error", function(errorInfo){
            console.log(errorInfo.toString());
            this.emit("end");
        });
        pipe(gulp.dest('./app/temp/styles'));
        });

watch.js：

var gulp = require('gulp');
watch = require('gulp-watch');
browserSync = require('browser-sync').create();

gulp.task('watch', function(){

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        }
    });

     watch('./app/index.html', function() {
    browserSync.reload();
  });

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

gulp.task('cssInject', ['styles'], function() {
    return gulp.src('./app/temp/styles/styles.css')
    pipe(browserSync.stream());
});

_mainPhoto.css：

.main {
position: relative;


&__text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-80%);
    width: 100%;
    text-align: center;
}

&__logo {
    font-weight: normal;
    color: #3c443d;
    font-size: 1.1rem;
    margin: 0;

    @mixin atSmall {
        font-size: 2.2rem;
    }

    @mixin atMedium {
        font-size: 3.5rem;
    }

    @mixin atLarge {
        font-size: 5.8rem;
    }

}

&__subtitle {
    font-weight: 300;
    color: #3c443d;
    font-size: 1.1rem;

    @mixin atSmall {
        font-size: 1.5rem;
    }
}

&__subsubtitle {
    color: #d4d8d6;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
    max-width: 30rem;
    font-size: 1.1rem;
    margin-left: auto;
    margin-right: auto;
}

}

Bash未显示任何错误：

$ gulp watch
[20:22:52] Using gulpfile ~\Desktop\Web developer course - mastering modern 
workflow\Projects\Project no.1\travel-site\gulpfile.js
[20:22:52] Starting 'watch'...
[20:22:52] Finished 'watch' after 86 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.14:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.14:3001
 -------------------------------------
[Browsersync] Serving files from: app

谢谢你的提示！

---

安

我认为你实际上不需要要求

吞下手表

。您应该能够执行以下操作：

而不是

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

做

---

也就是说，当您的

/styles

目录中的css文件发生更改时，请运行

cssInject

任务

这对我不起作用。。我认为gulp无法编译文件中除index.html之外的任何其他更改。似乎gulp是基于以前保存的数据（在我添加mixin并将gulpfile js.拆分到style.js和watch.js之前，这意味着我可以删除css和js文件中的代码行，而不做任何更改。Bash现在显示SyntaxError：输入意外结束（通过代码中的“附加”；），但即使我将其删除并保存，它也会显示相同的内容。Gulp只会忽略文件中的更改。听起来这里可能还有另一个问题。出于好奇，如果您的所有任务都列在

gulpfile.js

中，而不包括所需的任务，会发生什么。

gulp.watch(['./app/assets/styles/**/*.css'], ['cssInject']);