gulp-注入不适用于 gulp-观察

Question

我正在使用 gulp-inject 自动添加 SASS 导入，因为它们是在我的项目中新创建的。这工作正常，新的 SASS 文件被正确导入，但是当一个已经导入的文件被删除时 gulp-watch 是运行它崩溃并出现以下错误：

 Error: _dev\style\style.scss
Error: File to import not found or unreadable: components/_test - Copy.scss
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "components/_test - Copy.scss";

我花了好几个小时试图找出为什么它会尝试使用过时的导入来编译旧版本的样式表。我在 SASS 任务上设置了延迟，并且在 gulp-sass 运行时实际文件中的导入是正确的。我读到 gulp-watch 可能正在缓存 stylehseet，但我真的不确定。

下面是我的 Gulp 文件的相关部分，底部是 link 我的完整 gulp 文件。

这是我的观看任务： （组件任务触发SASS任务）

// SASS
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss'], function () {gulp.start(gulpsync.sync([
    'build-sass'
]));});
// COMPONENTS
plugins.watch(paths.dev+'/style/components/**/*.scss', function () {gulp.start(gulpsync.sync([
    'inject-deps'
]));});

SASS任务

gulp.task('build-sass', function() {
    // SASS
    return gulp.src(paths.dev+'/style/style.scss')
    .pipe(plugins.wait(1500))
    .pipe(plugins.sass({ noCache: true }))
    .pipe(gulp.dest(paths.tmp+'/style/'));
});

注入任务

gulp.task('inject-deps', function() {
    // Auto inject SASS
    gulp.src(paths.dev+'/style/style.scss')
    .pipe(plugins.inject(gulp.src('components/**/*.scss', {read: false, cwd:paths.dev+'/style/'}), {
        relative: true,
        starttag: '/* inject:imports */',
        endtag: '/* endinject */',
        transform: function (filepath) {
            return '@import "' + filepath + '";';
        }
    }))

完整 GULP 文件： https://jsfiddle.net/cwu0m1cp/

此处要求的是带有导入的 SASS 文件，只要 watch 任务不是运行，它就可以正常工作，导入的文件不包含 CSS:

SASS 删除前的文件：

/* inject:imports */
@import "components/_test.scss";
@import "components/_test-copy.scss";
/* endinject */

SASS 删除后的文件：

/* inject:imports */
@import "components/_test.scss";
/* endinject */

Answer 1

只要您删除 style/components/ 中的文件，您的 build-sass 任务就会启动。那个时候inject-deps任务还没有运行，所以对应的@import还没有删除。

发生这种情况的原因是因为这一行：

plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss']

您实际上并不是在此处创建开头带有 ! 的字符串。您正在否定计算结果为 false 的 paths.dev 字符串（万岁 JavaScript！）。所以你的路径最终是 'false_dev/style/components/**/*.scss'

应该是这样的：

plugins.watch([paths.dev+'/**/*.scss','!' + paths.dev+'/style/components/**/*.scss']

（别担心。我花了比应该的时间更长的时间才弄清楚...）

gulp-注入不适用于 gulp-观察

gulp-inject not working with gulp-watch

javascript

node.js

npm

gulp

gulp-watch