在我的办公室里,我们使用gulp来构建less文件。我想改进构建任务,因为在最近处理的一个大型项目上,构建任务需要超过一秒钟的时间。我的想法是缓存文件并只传递已更改的文件。于是我开始在Google上查找JavaScript的增量构建,并认为重写它们用于Less应该很容易。下面是我开始使用的一个例子:https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md。
经过几次不成功的尝试,我最终得到了以下代码(使用最新的Bootstrap分发进行测试):
经过几次不成功的尝试,我最终得到了以下代码(使用最新的Bootstrap分发进行测试):
var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var remember = require('gulp-remember');
var cached = require('gulp-cached');
var fileGlob = [
'./bootstrap/**/*.less',
'!./bootstrap/bootstrap.less',
'!./bootstrap/mixins.less'
];
gulp.task('less', function () {
return gulp.src(fileGlob)
.pipe(cached('lessFiles'))
.pipe(remember('lessFiles'))
.pipe(less())
.pipe(gulp.dest('output'));
});
gulp.task('watch', function () {
var watcher = gulp.watch(fileGlob, ['less']);
watcher.on('change', function (e) {
if (e.type === 'deleted') {
delete cached.caches.scripts[e.path];
remember.forget('lessFiles', e.path);
}
});
});
但这只传递了更改的文件,由于变量定义缺失,导致 less 编译器失败。如果我在 less 任务之前使用 concat 插件进行管道处理,gulp 就会陷入(看似)无限循环。
gulp.task('less', function () {
return gulp.src(fileGlob)
.pipe(cached('lessFiles'))
.pipe(remember('lessFiles'))
.pipe(concat('main.less')
.pipe(less())
.pipe(gulp.dest('output'));
});
有人使用过这些插件或者找到其他方法创建增量less编译的吗?这里是一个(混乱的)github存储库,用于测试:https://github.com/tuelsch/perfect-less-build
PS:我计划稍后添加代码检查、源映射、压缩、evt.缓存破坏和自动前缀。