Javascript 使用Gulp和Browserify创建多个bundle时避免代码重复
鉴于这些依赖关系:Javascript 使用Gulp和Browserify创建多个bundle时避免代码重复,javascript,gulp,browserify,Javascript,Gulp,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
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'])代码>,然后在任务回调中,确定发生更改的目录,并动态设置源文件名和目标文件名。只需编写一个使用不同参数的函数:
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');
});
<强>这是公认的答案。>(堆栈溢出不允许我在明天之前接受我自己的答案。我不会在我的手机上设置提醒,只是为了这个,所以如果我忘记了,请考虑这个被接受的答案。)
此设置适用于我:
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任务回调函数提供了触发它的源路径(类似于DOM回调中的e.target
),这将简单得多。有没有办法走那条路?@西梅维达斯我想了想,也试过,但没有找到办法。写那些吞咽的任务真是太烦人了。。。但是我又在做一项研究,因为你已经发布了这个问题,它真的会简化很多。干得好!您可以通过在RegExp中将\\\
的实例替换为[\\\/]
使此操作系统不可知,也可以删除RegExp并拆分字符串:options.path.split(require('path').sep)[2]