我正在使用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/bootstrap
和src/base/custom
中的每个文件并崩溃,因为无法找到变量。
我想要实现的目标:观察者看到src/base/custom/_header.scss
的变化并编译theme1.scss
和theme2.scss
任何人都可以帮我设置相应的配置吗?
似乎没有观察者任务。您需要有一组不同的文件可供观看,另一组需要编译。
使用glob
of文件定义观察者任务:
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'));
});