2017-02-15 66 views
1

我一直在尝试使用咕嘟咕嘟+ Browserify + Tsify到transpile 4个文件加上他们的图书馆成目前正在4 4个js文件或5秒钟。如何使用多个项文件Browserify + Watchify + Tsify +咕嘟咕嘟并获得多个输出文件快速

在我当前的构建脚本中,watchify会触发更新所有4个构建管道的任何ts文件的更新,每个ts文件都会在我的项目中追踪每个ts文件,即使它并未在该管道中使用。

目前我找得到这个做的更好,更快的方式。

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']) 
}) 

回答

0

确保您排除库(比如jquerylodash等)

您可能会受益于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/")); 
});