我在Gulp中设置了一个构建链，但是每当我运行gulp命令时，它只会使用我提供的两个入口点之一。我正在尝试从这里组合两种方法：
https://fettblog.eu/gulp-browserify-multiple-bundles/
和这里：
https://gist.github.com/frasaleksander/4f7b08b9e0e5cea03919a43372c53d4e
/ var / www / website / gulpfile.js
//////////////
// IMPORTS //
/////////////
//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var es = require('event-stream');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
//JS Dependencies
var tsify = require('tsify');
var watchify = require('watchify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;
/////////////
// CONFIG //
////////////
var babelconfig = {
presets: ['@babel/preset-env'],
extensions: ['.ts']
}
var tsconfig = {
"moduleResolution": "node",
"target": "es2015",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"lib": [
"DOM",
"ES2015",
"ES2015.Iterable"
]
}
//////////////////
// JAVA SCRIPT //
/////////////////
//JS entry points
var mains = glob.sync('src/js/**/*-main.ts');
mains.forEach(val => {
console.log("main: " + val);
})
//Watchify Object
var watchJS = watchify(browserify({
basedir: '.',
debug: true,
entries: mains,
cache: {},
packageCahce: {}
})).plugin(tsify, tsconfig);
///////////////
// DEFAULTS //
//////////////
gulp.task('default', () => {
var tasks = mains.map(function (entry) {
watchJS.entries = [entry];
return watchJS
.transform('babelify', babelconfig)
.bundle()
.pipe(source(entry))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(rename(function (opt) {
console.log("dirname: " + opt.dirname);
console.log("basename: " + opt.basename);
opt.basename = opt.basename.replace('-main', '');
opt.dirname = opt.dirname.replace('src\/js\/', '');
opt.extname = '.min.js';
}))
.pipe(sourcemaps.write('./'))
.on('end', () => {
console.log("write sourcemapse: " + entry);
})
.pipe(gulp.dest('dist/js/'))
});
return es.merge.apply(null, tasks);
});
//Same as the above, but not a callback function so it can be called below
function js() {
var tasks = mains.map(function (entry) {
watchJS.entries = [entry];
console.log('starting ' + watchJS.entries);
return watchJS
.transform('babelify', babelconfig)
.bundle()
.pipe(source(entry))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(rename(function (opt) {
opt.basename = opt.basename.replace('-main', '');
opt.dirname = opt.dirname.replace('src\/js\/', '');
opt.extname = '.min.js';
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/js/'))
});
}
watchJS.on('update', js);
watchJS.on('log', log);
这是运行gulp之后的输出：
main: src/js/projects/tesseract/tesseract-main.ts
main: src/js/writings/dead-battery-main.ts
[10:03:35] Using gulpfile /var/www/website/gulpfile.js
[10:03:35] Starting 'default'...
[10:03:42] 3817638 bytes written (3.15 seconds)
dirname: src/js/writings
basename: dead-battery-main
write sourcemapse: src/js/writings/dead-battery-main.ts
如您所见，我要编译的两个入口点都在mains数组中，但是只有一个完成。最奇怪的部分是我将babelify转换都拿出来编译完成。如果我在不盲目化的情况下正确地理解了我的JS，那么我的JS将无法在几乎所有浏览器上运行，否则我将把它取出来。
我的总体目标是建立一个构建链，该构建链将所有。*-main.ts文件作为src / js /中的入口点，并将它们作为es5 / bundled / minified文件散布在各自dist / js目录中。我也很乐意将所有这些都抛诸脑后，从头开始，有人可以链接一个像Typescript-> Babel-> Browserify-> Uglify buildchain上的指南。谢谢。
我通过改用gulp.watch从公式中删除watchify来解决它。现在是我的gulpfile.js：
//////////////
// IMPORTS //
/////////////
//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');
//JS Dependencies
var tsify = require('tsify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;
//CSS Dependencies
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
/////////////
// CONFIG //
////////////
//Babel Compiler Options
var babelconfig = {
presets: ['@babel/preset-env'],
extensions: ['.ts']
}
//TS Compiler Options
var tsconfig = {
"moduleResolution": "node",
"target": "es2015",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"lib": [
"DOM",
"ES2015",
"ES2015.Iterable"
]
}
//Personal Config for easy path changing
var config = {
dev: {
sass: './src/sass/**/*.scss',
ts: './src/ts/**/*.ts',
entries: './src/ts/**/*-main.ts'
},
prod: {
css: './dist/css/',
html: './',
js: './dist/js/'
}
};
//Livereload stuff
livereload({ start: true });
//////////////////
// JAVA SCRIPT //
/////////////////
gulp.task('js', (done) => {
var tasks = glob.sync(config.dev.entries).map(function (entry) {
log('started building ' + entry);
return browserify()
.add(entry)
.plugin(tsify, tsconfig)
.transform('babelify', babelconfig).on('error', (err) => { log("babel error: " + err); })
.bundle()
.pipe(source(entry))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(rename(function (opt) {
opt.basename = opt.basename.replace('-main', '');
opt.dirname = opt.dirname.replace('src\/ts\/', '');
opt.extname = '.min.js';
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(config.prod.js)).on('end', () => { log("finished building " + entry); }
);
});
livereload();
done();
});
gulp.task('watchJS', () => {
gulp.watch(config.dev.ts,
gulp.series('js')
);
});
//////////
// CSS //
/////////
gulp.task('css', () => {
return gulp.src(config.dev.sass, { base: './' })
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(config.prod.css))
.pipe(livereload()
);
});
gulp.task('watchCSS', () => {
gulp.watch(config.dev.sass,
gulp.series('css')
);
});
///////////////
// DEFAULTS //
//////////////
gulp.task('watch', () => {
livereload.listen();
gulp.watch(config.dev.sass, gulp.series('css'));
gulp.watch(config.dev.ts, gulp.series('js'));
});
gulp.task('default',
gulp.series([
'css',
'js',
'watch'
]
)
);
这是对我帮助最大的文件：