Question

我试图编写一个gulp任务来构建javascript文件并为每个文件夹连接一个文件，包括根文件夹。

我找到了这个解决方案：https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

如果您有一组文件夹，并希望执行一组任务每个，例如......
/scripts
/scripts/jquery/*.js
/scripts/angularjs/*.js
......并希望最终......
/scripts
/scripts/jquery.min.js
/scripts/angularjs.min.js

但是，这只为*.js文件夹中的所有子文件夹构建scripts文件。我试图在根文件夹脚本中构建*.js文件，即我的预期输出将是：

/scripts.min.js
/scripts/jquery.min.js
/scripts/angularjs.min.js

我是节点的新手，所以我现在很困惑如何实现这一目标。真的很感谢你的帮助。非常感谢。

Answer 1

您可以创建单独的任务（baseScripts）来创建基目录的缩小脚本。然后创建另一个运行baseScripts和subScripts任务的任务（allScripts）。

var scriptsPath = 'src/scripts';

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

gulp.task('allScripts', ['baseScripts', 'subScripts']);

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

   var tasks = folders.map(function(folder) {
      return gulp.src(path.join(scriptsPath, folder, '/*.js'))
        .pipe(uglify())
        .pipe(rename(folder + '.min.js'))
        .pipe(gulp.dest(scriptsPath));
   });

   return merge(tasks);
});

gulp.task('baseScripts', function(){
  return gulp.src(scriptsPath + '/*.js')
    .pipe(uglify())
    .pipe(concat('scripts.min.js'))
    .pipe(gulp.dest('src'));
});

Answer 2

一天后，我想出了一些修改如下。

var paths = {
    js: {
        folder: 'dev/assets/js'
    }
};

gulp.task('js', function() {
    var folders = getFolders(paths.js.folder);
    var tasks = folders.map(function(folder) {
        return gulp.src(path.join(paths.js.folder, folder.path, '/*.js'))
            .pipe(uglify())
            .pipe(concat(folder.name + '.min.js'))
            .pipe(gulp.dest(paths.js.dest));
    });
    merge(tasks);
    browserSync.reload();
});

var getFolders = function(dir) {
    var folders = [{path:'',name:'app'}];
    var folder = fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
    for (var i=0; i<folder.length;i++) {
        folders.push({path: folder[i], name: folder[i]});
    }
    return folders;
};

我已将组合脚本的目录和名称分隔为对象的2个属性。因此，我不需要为根文件夹和子文件夹执行不同的任务。

请随时对我的方法发表意见：）

Gulp为每个文件夹生成一个文件

2 个答案: