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; });

問題解決。