我正在使用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/bootstrap
和src/base/custom
内的每个文件并崩溃,因为找不到变量。
我想要实现的目标:
观察者看到src/base/custom/_header.scss
中的更改,并编译theme1.scss
和theme2.scss
有人可以帮助我相应地设置我的配置吗?
答案 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'));
});