gulp实现less中修改import文件自动编译

用gulp编译less的小伙伴们可能会遇到和我类似的问题，下图所示，是我less目录。

base文件夹中是import文件，一些公共的less变量和reset样式。

已经实现的功能是，一对一编译，例如:修改common_min.less直接编译成common_min.css

但现在遇到的问题是，当我修改base目录下的reset.less时，假如common_min.less中@import url("base/reset.less");引入过reset.less，这时候就就不会自动编译common_min.less了。

下面给出我的解决办法，附上gulpfile.js的代码

//用到的插件
var gulp = require('gulp'),
 	minifyCss = require('gulp-cssnano'),
    less = require('gulp-less'),
    watchPath = require('gulp-watch-path'),
    autoprefixer = require('gulp-autoprefixer'),
    path = require('path'),
    fs = require('fs');

var baseUrl = 'skin3/dist/';
var lessUrl = baseUrl + 'less/',//未压缩的less目录
    cssUrl = baseUrl + 'css/';//压缩后的css目录  

//判断路径是文件还是目录
function exists(path){  
     return fs.existsSync(path) || path.existsSync(path);  
} 
function isFile(path){  
    return exists(path) && fs.statSync(path).isFile();  
}

//编译LESS
gulp.task('watchLess', function() {
    gulp.watch(lessUrl + '/**/*.less', function(event) {
        var paths = watchPath(event , lessUrl , cssUrl),
            filePath = paths.srcPath,
            srcFilename = paths.srcFilename;//文件名

        //如果修改的是base文件夹下面的import文件
        if(filePath.indexOf("base") > -1){
            var tempPath = [];
            var files = fs.readdirSync(lessUrl);
            files.forEach(function(filename,index,array){
                //排除目录
                if(isFile(lessUrl + filename)){
                    //读取文件内容
                    var data = fs.readFileSync(lessUrl + filename,'utf-8');
                    //在内容中查找是否包含import的文件名
                    if(data.indexOf(srcFilename) > -1){
                        var dir = (lessUrl + filename);
                        tempPath.push(dir);
                    }
                }
            });
            filePath = tempPath; 
        }               
        //引入修改的文件路径
        gulp.src(filePath)
        //编译less
        .pipe(less())  
        //浏览器前缀
        .pipe(autoprefixer({
            browsers: ['last 2 versions','ie >= 9','Firefox >= 10','last 3 Safari versions'],//兼容那些版本浏览器
            cascade: true,
            remove:true 
        }))
        //压缩css      
        .pipe(minifyCss({compatibility: 'ie7'}))
        //输出到路径
        .pipe(gulp.dest(cssUrl));
        //执行完毕后输出日志
        console.log("修改的文件：" + paths.srcPath + ' has ' + event.type, "输出的文件：" + paths.distPath, "时间戳：" + new Date().getTime());
    });
});


gulp.task("default",function(){
    gulp.start(["watchLess"]);
});

实现方法其实很简单，利用到nodejs的readdirSync和readFileSync方法，修改base目录下的文件时，去查找父级less目录中less文件中是否包含当前修改的文件名，如果包含则收集该文件的路径传入gulp.src()中

如果大家有更好的实现办法，也希望一起讨论~