在gulp中观察递归的scss文件

问题描述 投票:0回答:1

我正在使用gulp从基本主题编译几个主题。如果我对子文件进行更改,则“watch”无法识别更改。如果更改了这些主题的文件,它只会识别更改。

我的文件夹结构

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

theme1.scss import 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

任何人都可以帮我设置相应的配置吗?

sass gulp gulp-sass
1个回答
1
投票

似乎没有观察者任务。您需要有一组不同的文件可供观看,另一组需要编译。

使用globof文件定义观察者任务:

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

Gulp 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'));
});
© www.soinside.com 2019 - 2024. All rights reserved.