gulp怎么编译less文件中依赖的less文件

Question

a.less文件里面引入了b.less变量文件，当我编辑了b.less文件，a.less怎么自动编译？跪求大神指教！

Answer 1

那你就 watch b.less呀, 当b.less有变化，编译a.less就OK啦。

给个例子: @OnlyLing 修改一下你的例子

var gulp = require('gulp'),
    less = require('gulp-less');

gulp.task('less', function() {
    return gulp.src('less/**/app.less')
        .pipe(less())
});

gulp.task("watchFiles", function(){
   gulp.watch('less/**/*.less', ['less']);
});

gulp.task("default", ['less', "watchFiles"]);

你可以参考我之前写得一个 https://github.com/hjzheng/CUF_meeting_knowledge_share/blob/master/2015-7-23/gulp-less-bootstrap/gulpfile.js

Answer 2

最后需编译的less文件例如：
app.less

@import 'variables.less';
@import 'normalize.less';
@import 'base.less';
@import 'form.less';
@import 'ui.less';

安装gulp插件:gulp-less

var gulp = require('gulp'),
    less = require('gulp-less');
gulp.task('less', function() {
    return gulp.src('less/**/app.less')
        .pipe(less())
});

生成的css文件中会包含所有import进来的文件代码。

Answer 3

将gulp-less降到3.0.0

Answer 4

@yuuk 很感谢你的答复，问题已经得到解答！

觉得你是缺少了这部分:
.pipe(less({paths:['src/less']}))