[英]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.