创建具有杯和Browserify

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回调的对象参数来确定改变的文件的父目录 - 无论是'site'或'admin'在我的情况。基于此，我动态生成了gulp.src输入。

为了使事情变得更简单，我也删除了重命名部分，所以捆绑包“保留”了作为捆绑包入口点的文件的名称。