我有一个站点,其中包含一些模块,这些模块需要其css文件彼此独立存在,但是我想使用scss以及利用gulp进行自动前缀编写样式。是否有可能监视给定目录树下任何scss文件中的更改,然后将更新文件的css作为同级文件写入?该结构实质上是这样的(尽管它可以将目录嵌套到更大的深度):
Gulpfile.js
module1
- styles1.scss
- styles1.css
- dir
-- styles2.scss
-- styles2.css
module2
- dir
-- subdir
--- styles3.scss
--- styles3.css
我在其他地方有以下Gulpfile设置来处理我的通用scss编译,但是我不确定如何修改它以代替上述方法。
// Requirements
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('scss', function () {
return gulp
.src('scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss([require('postcss-flexibility')]))
.pipe(autoprefixer())
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('css'))
.resume();
});
// Create 'watch' task
gulp.task('watch', function () {
return gulp
// Watch the input folder for change,
// and run `sass` task when something happens
.watch('scss/**/*.scss', gulp.series('scss'))
// When there is a change,
// log a message in the console
.on('change', function (event) {
console.log('File ' + event + ' was updated' + ', running tasks...');
})
;
});
答案 0 :(得分:1)
在您的scss
任务中,将gulp.src
范围更改为'**/*.scss'
,并将gulp.dest
范围更改为'.'
。
在您的watch
任务中,也将glob更改为'**/*.scss'
。