Wie Browserify + Watchify + Tsify + Gulp auf mehreren Eingabedateien verwenden und mehrere Ausgabedateien schnell

Question

Ich habe versucht, verwenden Gulp + Browserify + Tsify transpile 4-Dateien sowie die Bibliotheken in 4 js Dateien erhalten, die zur Zeit 4 nehmen wird oder 5 Sekunden.

In meinem aktuellen Build-Skript löst Watchify ein Update auf eine Änderung jeder ts-Datei für alle 4 meiner Build-Pipes aus, von denen jede jede ts-Datei in meinem Projekt trailt, auch wenn sie nicht in dieser Pipe verwendet wird.

Derzeit suche ich nach einem besseren und schnelleren Weg, dies zu tun.

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

Stellen Sie sicher, Bibliotheken sind ohne (wie jquery, lodash, etc.)

Sie von factor-bundle profitieren könnten (insbesondere gulp-watchify-factor-bundle) Ihre Eingaben bis spalten, aber ihre gemeinsamen Code in einer separaten Bibliothek halten . Wenn sie viel gemeinsam genutzten Code haben, wird dieser in der Ausgabe jedes Eintrags kompiliert und dupliziert. tsify + gulp-watchify-factor-bundle scheint nicht gut dokumentiert zu sein, so hier ist meine Vermutung, was Sie benötigen könnten: