使用使用“gulp.watch”的 Gulp 和 Gulp-sass,如何返回监视列表中已更改项目的目录名称,以便我可以将 sass 编译为 css?
这就是我目前拥有它的方式;如您所见,只有一个目录正在编译,即主题 1。如果主题 2 或 3 在 SASS 中发生变化,主题 1 css 将被更新。我希望它是有条件的,所以任何一个都会根据不同的变化而变化。
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./wp-content/themes/1/'));
});
gulp.task('sass:watch', function () {
gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']);
gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']);
gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']);
});
虽然这是非常硬编码的,但这是我刚刚找到的解决方案。
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
// return gulp.src('./wp-content/themes/giggleselc/assets/sass/**/*.scss')
// .pipe(sass.sync().on('error', sass.logError))
// .pipe(gulp.dest('./wp-content/themes/giggleselc/'));
});
gulp.task('sass:watch', function () {
var n1 = gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']);
var n2 = gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']);
var n3 = gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']);
n1.on('change', function(f) {
return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./wp-content/themes/1/'));
});
n2.on('change', function(f) {
console.log('Change Event:', f);
return gulp.src('./wp-content/themes/2/assets/sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./wp-content/themes/2/'));
});
n3.on('change', function(f) {
return gulp.src('./wp-content/themes/3/assets/sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./wp-content/themes/3/'));
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句