gulp配合fs插件与path插件实现遍历目录得到子目录

由于每个项目的架构不同，使用gulp压缩文件、实现MD5戳时可能出现路径问题。

项目结构如下

weapp

　　lib

　　lar-ui

　　page

　　　　folder1

　　　　　　index.html

　　　　　　index.css

　　　　　　index.js

　　

　　　　folder2

　　　　　　index.html

　　　　　　index.css

　　　　　　index.js

        gulpfile.js　　

项目面临的问题

项目上线时要求对JS、CSS文件进行压缩并生成时间戳处理浏览器缓存问题，原先直接从gulpfile.js所在的根目录下手，代码如下：

/**
 * 压缩js,生成时间戳
 */
gulp.task('uglifyJs',function(){
    return gulp.src(['./**/*.js','!./node_modules/**/*.js','!./gulpfile.js','!./page/maanshan/*.js','!./page/masSelfBuildLiterature/*.js'],{read:true})
    //压缩js
        .pipe(plugins.uglify())
        //生成MD5
        .pipe(plugins.rev())
        //输出压缩生成时间戳后的js文件
        .pipe(gulp.dest('./'))
        //生成rev.json文件
        .pipe(plugins.rev.manifest({merge:true}))
        //输出json文件
        .pipe(gulp.dest('rev/js'));
}); 

这样压缩后会把所有带MD5戳的js文件路径输出到一个rev里的json文件中，而我这个项目html中引入css，js都是同目录引入，这就导致在替换路径时同名css，js出现覆盖现象，也就是项目中的index.html替换路径时引入的都是folder2文件下的带有时间戳的css、js文件，打开页面会出现文件404报错！

解决办法

所以我们要把page目录遍历得到每一个子目录，让它每个目录生成各自对应的rev的Json文件，避免了文件覆盖。

利用fs插件、path插件写一个遍历函数，把page目录下的子目录都存进一个数组里，然后通过map得到每一个目录，代码如下：

//定义处理的目录
var pageDir = './page/';
var revDest = 'rev/';


/**
 * 原因：由于page文件夹js、css在html引入中输入直接引入，所以在下面的MD5戳rev路径替换中出错
 * 解决方法：利用fs插件和path插件写一个函数，
 * 遍历文件夹，把所有文件的路径拼到一个数组里，然后通过map获取到每一个文件
 * 效果：这里获取到page下面的每一个文件夹做单独处理，每个文件夹生成单独的rev的json文件
 * 避免了路径替换覆盖问题
 */
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

//调用getFolders方法处理page文件夹，遍历得到每一个子文件夹，单独做js压缩、混淆、加MD5戳处理
gulp.task('uglifyJsPage',function(){
    //调用getFolders方法获取到文件集合
    var folders = getFolders(pageDir);
    //遍历得到每一个子文件
    var tasks = folders.map(function(folder){
        //rev文件输出地址
        var setDir = revDest+folder+'/js';
        gulp.src([pageDir+folder+'/**/*.js','!page/*.js'])
            //压缩js
            .pipe(plugins.uglify())
            //生成MD5
            .pipe(plugins.rev())
            //输出压缩生成时间戳后的js文件
            .pipe(gulp.dest(pageDir+folder))
            //生成rev.json文件
            .pipe(plugins.rev.manifest({merge:true}))
            //输出json文件
            .pipe(gulp.dest(setDir));
    });
    return tasks;

});

//替换路径
gulp.task('pagePath',function(){
    var folders = getFolders(pageDir);
    var tasks = folders.map(function(folder){
        gulp.src([revDest+folder+'/**/*.json',pageDir+folder+'/**/*.html'])
            .pipe(plugins.revCollector())
            //输出路径
            .pipe(gulp.dest(pageDir+folder));
    });
    return tasks;
});

问题解决。