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