我正在使用以下文件夹结构:
css
|_ main.css
|
|_ less
|_ main.less
|_ sub.less
|
|_ shared
|_ variables.less
|_ header.less
|_ footer.less
我在我的gulpfile.js中使用以下内容
gulp.task('less', function() {
gulp.src(paths.less + 'main.less', {read: true})
.pipe(plugins.plumber({errorHandler: onError}))
.pipe(plugins.less({
paths: [paths.less + 'shared', paths.less]
}))
.pipe(plugins.plumber.stop())
.pipe(gulp.dest(paths.css));
});
...
gulp.task('less:watch', function(){
gulp.watch([paths.less + '**/*.less'], ['less']);
});
gulp.task('default', ['less', 'less:watch']);
我的main.less包括所有其他 LESS 文件的 @imports。
@import "sub.less";
@import "./shared/variables.less";
@import "./shared/header.less";
@import "./shared/footer.less";
如果更新了 LESS 文件(除了main.less),则文件main.css不会更改。
如果main.less更新(在任何其他 LESS 文件更改后需要),则main.css然后更新。
无论哪个 LESS 文件被更改,我如何修改我的 gulpfile.js 以更新“main.css”文件?
谢谢你。