用Gulp遍历目录？ [英] Iterating over directories with Gulp?

问题描述

我是 g 的新手，但我想知道是否可以通过吞咽任务中的目录进行迭代。

这就是我的意思，我知道很多教程/演示使用类似** / *。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个文件。 p>

这是可能的，还是我将不得不手动将这些目录添加到清单中？实际上遍历 / js / 中的所有目录是非常好的。

感谢您的帮助可以给我。

--Nate

编辑：我不仅有2个目录，但我有很多（可能是10-20），所以我不想为每个目录编写任务。我想以同样的方式处理每个目录：获取其中的所有JS（以及任何子目录）并将其编译为基于特征的缩小JS文件。

解决方案

有一个官方的食谱：为每个文件夹生成一个文件

  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'; 
 
函数getFolders（dir）{
 return fs.readdirSync（dir）
 .filter（function（file）{
 return fs.statSync（path.join（ dir，file））。isDirectory（）; 
}）; 
 
 $ b $ 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（））
 //重命名为folder.min.js 
 .pipe（重命名（文件夹+'.min.js'））
 //再次写入输出
 .pipe（gulp.dest（scriptsPath））; 
}）; 
 
 //将scriptsPath中的所有剩余文件处理成main.js和main.min.js文件
 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）; 
}）; 
  

I'm new to gulp, but I'm wondering if its possible to iterate through directories in a gulp task.

Here's what I mean, I know a lot of the tutorials / demos show processing a bunch of JavaScript files using something like "**/*.js" and then they compile it into a single JavaScript file. But I want to iterate over a set of directories, and compile each directory into it's own JS file.

For instance, I have a file structure like:

/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

...And I want two files: /js/feature1/feature1.min.js and /js/feature2/feature2.min.js where the first contains the first 4 files and the second contains the last 2 files.

Is this possible, or am I going to have to manually add those directories to a manifest? It would be really nice to pragmatically iterate over all the directories within /js/.

Thanks for any help you can give me.

-Nate

Edit: It should be noted that I don't only have 2 directories, but I have many (maybe 10-20) so I don't really want to write a task for each directory. I want to handle each directory the same way: get all of the JS inside of it (and any sub-directories) and compile it down to a feature-based minified JS file.

解决方案

There's an official recipe for this: 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);
});

这篇关于用Gulp遍历目录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！