javascript - 使用 Gulp 遍历目录?

标签 javascript gulp

我是 gulp 的新手,但我想知道是否可以在 gulp 任务中遍历目录。

这就是我的意思,我知道很多教程/演示都展示了使用“**/*.js”之类的东西处理一堆 JavaScript 文件,然后将其编译成一个 JavaScript 文件。但是我想遍历一组目录,并将每个目录编译成它自己的 JS 文件。

例如,我的文件结构如下:

/js/feature1/something.js
/js/feature1/else.js
/js/feature1/foo/bar.js
/js/feature1/foo/bar2.js
/js/feature2/another-thing.js
/js/feature2/yet-again.js

...我想要两个文件:/js/feature1/feature1.min.js/js/feature2/feature2.min.js 其中第一个包含前 4 个文件,第二个包含最后 2 个文件。

这可能吗,还是我必须手动将这些目录添加到 list 中?如果能够务实地遍历 /js/ 中的所有目录,那就太好了。

感谢您能给我的任何帮助。

-内特

编辑: 应该注意的是,我不仅有 2 个目录,而且我有很多(可能 10-20 个)所以我真的不想为每个目录写一个任务.我想以相同的方式处理每个目录:获取其中的所有 JS(以及任何子目录)并将其编译为基于功能的缩小 JS 文件。

最佳答案

有官方食谱:Generating a file per folder

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var scriptsPath = 'src/scripts';

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('scripts', function() {
   var folders = getFolders(scriptsPath);

   var tasks = folders.map(function(folder) {
      return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
        // concat into foldername.js
        .pipe(concat(folder + '.js'))
        // write to output
        .pipe(gulp.dest(scriptsPath)) 
        // minify
        .pipe(uglify())    
        // rename to folder.min.js
        .pipe(rename(folder + '.min.js')) 
        // write to output again
        .pipe(gulp.dest(scriptsPath));    
   });

   // process all remaining files in scriptsPath root into main.js and main.min.js files
   var root = gulp.src(path.join(scriptsPath, '/*.js'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(scriptsPath))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest(scriptsPath));

   return merge(tasks, root);
});

关于javascript - 使用 Gulp 遍历目录?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22149966/

相关文章:

javascript - 如何使用 Node.js 查询 Mongodb?

html - Gulp html 布局插件

testing - 无法在 Angular 2.0.0 测试中加载 .html

jquery - 使用 Gulp 删除源映射

javascript - Jquery Taphold 不适用于 DragDealerjs slider

javascript - jQuery ajaxStart 仅适用于第一个请求

javascript - 当与 multer 一起用于多部分数据时,hasOwnproperty 变得未定义

javascript - 设置与源文件夹不同的目标文件夹结构

javascript - Reactify、Browserify 和 Gulp : TypeError: Object #<Transform> has no method 'transform'

javascript - 使用正则表达式,有条件地替换为 $1 或空字符串