用gulp如何编译多个文件夹下的less

Question

项目目录如图：

2015、2016、2017文件夹和gulpfile.js、package、node_module同级。
我想自动编译每个文件夹下的less文件并生成在各自的css文件夹里，然后我写的代码如下：

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

//LESS编译任务
gulp.task('less', function () {
    gulp.src('./*/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./*/css'));
});

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

应该如何修改？

Answer 1

一个是dest路径的问题，dest的路径是不能自行匹配的，并且gulp的输出结果是dest路径+glob路径，所以其实只要dest路径为'./'即可。然后less的默认选项应该是匹配到的less文件的同路径下输出css，我用的sass不清楚是否可以进行配置，但是可以在pipe中使用gulp-rename插件对流的位置进行改写。具体代码如下：

var gulp = require('gulp'),
    less = require('gulp-less'),
    rename = require('gulp-rename');
//LESS编译任务
gulp.task('less', function () {
    gulp.src('./*/less/*.less')
        .pipe(less())
        .pipe(rename(function (path) {
            console.log(path)
            path.dirname = path.dirname.replace('less', 'css');
        }))
        .pipe(gulp.dest('./'));
});

Answer 2

gulp.src('./**/less/*.less')，或者可以传数组。

Answer 3

可以创建task 然后使用run-sequence

Answer 4

可以考虑使用gulp-2b中的singleLess函数进行批量打包，gulp-2b