[英]Avoiding code repetition when creating multiple bundles with Gulp and Browserify
鉴于这些依赖性:
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']);
,然后在任务回调中确定更改发生在哪个目录中,并动态设置源文件和目标文件名。
只需编写一个带有不同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');
});
这是公认的答案。 (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
输入。
为简化起见,我还删除了重命名部分,因此捆绑软件“保留”了捆绑软件的入口点文件的名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.