在我当前的工作流程中,我需要创建browserify包,但也希望将非commonjs js库连接到文件的开头以公开全局变量,同时还减少http请求的数量和js文件的大小.(其他捆绑包也可能需要其中一些库)
我目前有一个gulp任务,创建browserify包并将任何所需的libs连接到输出文件的开头,但是我发现在合并流时,我的源图是破坏的,并且在Web检查器中; 生成的映射仅显示预先uglified browserify包,而不是单独的js模块.
var gulp = require("gulp"), buffer = require('vinyl-buffer'), gulpif = require("gulp-if"), sourcemaps = require("gulp-sourcemaps"), merge = require('merge-stream'), concat = require('gulp-concat'), uglify = require("gulp-uglify") livereload = require("gulp-livereload"); // compile scripts gulp.task("scripts", function() { "use strict"; // Iterate over bundles var tasks = config.browserifyBundles.map(function(item){ // Use entry file for output file name var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); var browserifyStream = browserify({ entries: item.mainfile, debug: env !== "production" }).bundle() .on("error", notify.onError()) .pipe(source(outputName)) .pipe(buffer()) .pipe(gulpif(env !== "production", sourcemaps.init())) .pipe(gulpif(env !== "production", sourcemaps.write())); // Get files to concat stream from json array var libStream = gulp.src(item.concat); return merge(libStream, browserifyStream) .pipe(gulpif(env !== "production", sourcemaps.init({loadMaps: true}))) .pipe(concat(outputName)) .pipe(uglify()) .pipe(gulpif(env !== "production", sourcemaps.write())) .pipe(gulp.dest(config.projectDir + "js/")) .pipe(notify("updated")) .pipe(livereload()); }); // create a merged stream es.merge.apply(null, tasks); });
(注意我的任务还会读取一个配置json数组来构建几个bundle,如果有多个bundle)
有没有办法可以保留预合并流中的源图?loadmaps设置为true似乎不起作用.
此外,作为一项完整性检查,我的方法是否会被认为是明智的?我错过了一些非常简单的方法来实现我想要的结果吗?