如何对多个入口文件使用Browserify + Watchify + Tsify + Gulp并快速获得多个输出文件

Question

我一直在尝试使用Gulp + Browserify + Tsify将4个文件加上它们的库转换成4个js文件，目前只需要4到5秒。

在我当前的构建脚本中，watchify会在所有4个构建管道的ts文件发生更改时触发更新，每个管道都会对项目中的每个ts文件进行traspiles，即使该文件没有在该管道中使用。

目前，我正在寻找一种更好、更快的方法来完成这项工作。

import * as browserify from "browserify"
import * as gulp from "gulp"
import * as rename from "gulp-rename"
import * as sass from "gulp-sass"
import * as uglify from "gulp-uglify"
import * as gutil from "gulp-util"
import * as fs from "fs"
import * as tsify from "tsify"
import * as buffer from "vinyl-buffer"
import * as source from "vinyl-source-stream"
import * as watchify from "watchify"
import {assign} from "lodash"

const sassOptions: sass.Options = {
    outputStyle: 'expanded'
}

function combinejs(update: boolean, minify: boolean) {
    ['backScript.ts', 'mainFrame.ts', 'commentFrame.ts','script-inject.ts'].forEach(f => {
        let b = browserify(assign({},watchify.args,{basedir:'src/', entries: f})),
            bundle = () => {
                let pipe = b.bundle().on('error',gutil.log)
                    .pipe(source(f)).pipe(rename({extname:'.js'}))
                if (minify) {
                    pipe = pipe.pipe(buffer()).pipe(uglify())
                }
                pipe.pipe(gulp.dest('build/files/src'))
            }
        b.plugin(tsify)
        if (update){
            b.plugin(watchify,{})
            b.on('update',()=>{
                console.log({update:f})
                bundle()
            })
        }
        b.on('log', console.log)
        console.log(f)
        bundle()
    })
}

gulp.add('js', () => combinejs(false, true))

gulp.add('css', () => {
    gulp.src('src/*.scss')
        .pipe(sass(sassOptions))
        .pipe(gulp.dest('build/files/src'))
})
gulp.add('copyFiles', () => {
    gulp.src(['manifest.json', 'popup.html', 'images/*'], { base: '.' })
        .pipe(gulp.dest('build/files'))
})

gulp.add("default", ['copyFiles','js', 'css'])
gulp.add('build',['copyFiles','css'],()=>{
    combinejs(false,false)
})

gulp.add("watch", ['copyFiles', 'css'], () => {
    combinejs(true, false)
    gulp.watch('src/*.scss', ['css'])
})

Answer 1

确保您排除了库(如jquery、lodash等)

您可能会从factor-bundle (特别是gulp-watchify-factor-bundle)中受益，它可以拆分条目，但将它们的共享代码保存在单独的库中。如果它们有很多共享代码，那么这些代码将被编译并复制到每个条目的输出中。tsify + gulp-watchify-factor-bundle似乎没有很好的文档，所以我猜测您可能需要：

const gulp = require("gulp");
const reduce = require("gulp-watchify-factor-bundle");
const buffer = require("vinyl-buffer");
const filelog = require("gulp-filelog");
const tsify = require("tsify");
const gutil = require("gulp-util");

const devenv = true; // bring your own env config


function configuredUglify() {
    return uglify(); // bring your own uglify
}

gulp.task("clean", () => {
    return del("./bin/js");
});

// full builds
gulp.task("build", ["clean"], () => {
    const basedir = __dirname;

    // browserify options here ()
    const b = reduce.create({
        basedir: basedir,
        debug: devenv,
        // the following may not apply to you
        builtins: [],
        insertGlobals: false,
        detectGlobals: false,
        browserField: false,
        commondir: false
    });

    // any large external libraries should be excluded (and loaded via <script src="..."> tags especially for development)
    b.exclude("jquery");
    b.exclude("moment");

    b.plugin(tsify);

    // NOTE: unlike browserify entries, reduce.src allows globs (like gulp.src) but will consider them a single bundle
    // this is especially handy for unit tests!
    return reduce.src(["backScript.ts", "mainFrame.ts", "commentFrame.ts", "script-inject.ts"], { cwd: basedir })
        // "outputs:" is required otherwise the .ts extension is kept (unlike jsify with vanilla browserify)
        // full:
        .pipe(reduce.bundle(b, { common: "sharedLib.js", outputs: ["backScripts.js", "mainFrame.js", "commentFrame.js", "script-inject.js"] }))
        // incrementals:
        // .pipe(reduce.watch(b, { common: "sharedLib.js", outputs: ["backScripts.js", "mainFrame.js", "commentFrame.js", "script-inject.js"] }))

        // incrementals:
        // .on("bundle", (vinylStream) => { /* vinylStream followed by lines below */ })

        .pipe(buffer())
        .pipe(devenv ? sourcemaps.init({ loadMaps: true, largeFile: true }) : gutil.noop()) // largeFile may be applicable
        .pipe(!devenv ? configuredUglify() : gutil.noop())
        .on("error", gutil.log)
        .pipe(devenv ? sourcemaps.write("./") : gutil.noop())
        .pipe(filelog("browserify"))
        .pipe(reduce.dest("./bin/js/"));
});