Question

鉴于这些依赖关系：

var browserify = require('gulp-browserify');
var buffer = require('vinyl-buffer');
var maps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

如何在这两项任务中删除代码重复：

gulp.watch('source/js/site/*.js', ['build-site-js']);
gulp.watch('source/js/admin/*.js', ['build-admin-js']);

gulp.task('build-site-js', function () {
    return gulp.src('source/js/site/site-client.js') // DIFFERENT
        .pipe(browserify({ debug: true }))
        .pipe(buffer())
        .pipe(rename('bundle.js')) // DIFFERENT
        .pipe(gulp.dest('public/js/'))
        .pipe(maps.init({ loadMaps: true }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('public/js/'))
        .pipe(livereload());
});

gulp.task('build-admin-js', function () {
    return gulp.src('source/js/admin/admin-client.js') // DIFFERENT
        .pipe(browserify({ debug: true }))
        .pipe(buffer())
        .pipe(rename('admin.js')) // DIFFERENT
        .pipe(gulp.dest('public/js/'))
        .pipe(maps.init({ loadMaps: true }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('public/js/'))
        .pipe(livereload());
});

请注意，我正在使用相同的进程生成两个Browserify捆绑包。这两个任务之间的唯一区别是源文件和目标文件的名称。（我已经用// DIFFERENT评论标记了差异。）

理想情况下，我想要一个gulp.watch('source/js/**/*.js', ['build-js']);，然后在任务回调中，确定更改发生在哪个目录中，并动态设置源文件名和目标文件名。

Answer 1

只需编写一个采用不同args的函数：

function doGulp(src, res) {
   return gulp.src(src) 
    .pipe(browserify({ debug: true }))
    .pipe(buffer())
    .pipe(rename(res)) 
    .pipe(gulp.dest('public/js/'))
    .pipe(maps.init({ loadMaps: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(maps.write('./'))
    .pipe(gulp.dest('public/js/'))
    .pipe(livereload());
}

并在任务中调用它：

gulp.task('build-admin-js', function () {
  return doGulp('source/js/admin/admin-client.js','admin.js');
});
gulp.task('build-site-js', function () {
   return doGulp('source/js/site/site-client.js','bundle.js');
});

这样你的gulpfile就变成了：

var browserify = require('gulp-browserify');
var buffer = require('vinyl-buffer');
var maps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

function doGulp(src, res) {
   return gulp.src(src) 
    .pipe(browserify({ debug: true }))
    .pipe(buffer())
    .pipe(rename(res)) 
    .pipe(gulp.dest('public/js/'))
    .pipe(maps.init({ loadMaps: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(maps.write('./'))
    .pipe(gulp.dest('public/js/'))
    .pipe(livereload());
}

gulp.watch('source/js/site/*.js', ['build-site-js']);
gulp.watch('source/js/admin/*.js', ['build-admin-js']);
gulp.task('build-admin-js', function () {
  return doGulp('source/js/admin/admin-client.js','admin.js');
});
gulp.task('build-site-js', function () {
   return doGulp('source/js/site/site-client.js','bundle.js');
});

Answer 2

这是接受的答案。（Stack Overflow不允许我在明天之前接受我自己的答案。我不将设置我的提醒电话只是为了这个，所以如果我忘了，请考虑这是接受的答案。）

此设置适用于我：

gulp.watch('source/js/**/*.js', function (options) {
    var dir = options.path.match(/\\js\\(\w+)\\/)[1]; // Windows specific [1]

    gulp.src('source/js/' + dir + '/' + dir + '-client.js')
        .pipe(browserify({ debug: true }))
        .pipe(buffer())
        .pipe(gulp.dest('public/js/'))
        .pipe(maps.init({ loadMaps: true }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('public/js/'))
        .pipe(livereload());
});

// [1] Use path.sep for a portable solution: nodejs.org/api/path.html#path_path_sep

我正在使用gulp.watch回调的object参数来确定已更改文件的父目录 - 在我的情况下为'site'或'admin'。基于此，我动态生成gulp.src输入。

为了简单起见，我还删除了重命名部分，因此捆绑包“保留”作为捆绑包入口点的文件的名称。

使用Gulp和Browserify创建多个包时避免代码重复

2 个答案: