在gulp中观看递归scss文件

时间:2019-04-05 09:52:38

标签: sass gulp gulp-sass

我正在使用gulp编译来自基本主题的多个主题。如果我对子文件进行更改,“监视”将无法识别更改。仅当这些主题的文件发生更改时,它才能识别更改。

我的文件夹结构

├── node_modules
├── src/
│   ├── base/
│   │   ├── bootstrap
│   │   └── custom
│   ├── themes/
│   │   ├── theme1.scss
│   │   └── theme2.scss
│   └── main.scss
└── gulpfile.js

theme1.scss导入main.scss main.scss从自定义目录导入所有引导文件和_all.scss。

我的口水配置:

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});

如果我尝试将src/**/*.scss用作gulp.src,它将尝试编译src/base/bootstrapsrc/base/custom内的每个文件并崩溃,因为找不到变量。

我想要实现的目标: 观察者看到src/base/custom/_header.scss中的更改,并编译theme1.scsstheme2.scss

有人可以帮助我相应地设置我的配置吗?

1 个答案:

答案 0 :(得分:1)

似乎没有看守任务。您需要查看另一组文件并进行编译。

使用glob个要监视的文件来定义观察者任务:

Gulp 4

// Watch for file changes in any .scss file
gulp.task("watch-styles", function () {
    return gulp.watch(['src/**/*.scss'], gulp.series('styles'));
    //return gulp.watch(['src/base/custom/_header.scss'], gulp.series('styles'));
});

大剑3

// Watch for file changes in any .scss file
gulp.task("watch-styles", function() {
  var watcher = gulp.watch(['src/**/*.scss'], ['styles']);
  //var watcher = gulp.watch(['src/base/custom/_header.scss'], ['styles']);
});

您的编译功能保持不变。 src glob指向您要编译的文件:

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});