如何在多个条目文件上使用浏览 watchify tsify gulp，并快速获取多个输出文件

Question

我一直在尝试使用gulp browserify tsify tothpile 4文件以及其库中的4个JS文件，该文件当前正在使用4或5秒。

>

在我当前的构建脚本中，Watchify触发了我所有4个构建管的更改的更改，即使我项目中的每个TS文件都不使用，每个TS文件中的每个TS文件都不使用。p>目前，我正在寻找一种完成此操作的更好，更快的方法。

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/"));
});