Browserify blir mer og mer en levedyktig løsning for å utvikle skript JS og foreslå en syntaks som er modellert på den av node.js. Kompiler skript med Browserify er enkelt. Under utviklingen, bruken av Watchify lar deg kompilere filer på farten. Til tross for dette, når du ønsker å integrere kompileringen din med andre oppgaver Gulp (som å kompilere filer Mindre), får du et problem: hvordan du bruker watchify samtidig som gulp-klokke. Svar i denne artikkelen!

sammendrag

Bruk Gulp og Browserify – Nivå 0

Name: Agence Web Tremplin Numérique
Price range: $$$

Utiliser Gulp et Browserify er ganske enkelt. Du kan bruke Browserify API eller gå enklere og bruke gulp-browserify som lar deg enkelt kompilere filene dine.

const gulp= krever('gulp');
const browserify= krever('gulp-browserify');
gulp.task('js', funksjon() {
gulp.src('src/*.js', { lese: falsk })
.pipe(browserify())
.pipe(gulp.dest('./bygge/'))
});

Problemet du raskt støter på er at for å jobbe med filene dine og få dem kompilert på nytt, må du analysere alle filene. Dette er veldig dyrt. Browserify må laste inn alle filene dine, men også alle avhengighetene du bruker. Jo større prosjektet ditt blir, jo raskere vil tiden gå. I tillegg, hvis du bruker transforme comme Babelify tidene vil svulme enda raskere (Liste over alle plugins tilgjengelig via Babel). Også listen over alle Browserify transformerer.

Før jeg viser deg den endelige løsningen, her er hvordan en løsning vil se ut med klassikeren gulp-klokke.

gulp.task("se", funksjon () {
gulp.watch(«./src/*.js», ["js"]).vi("endring", funksjon(hendelse) {
trøste.Logg(`Fil ${event.path} har vært ${event.type}`);
});
});

Med denne løsningen, hver gang du endrer en av filene dine, lanseres en hel kompilering.

Watchify

Watchify gjør det effektivt å kompilere filene dine med Browserify. Det vil holde i minnet resultatet av kompileringen av hver fil (alle filene som er koblet til filen din, for eksempel avhengigheter ...).

Når en fil oppdateres, oppdaterer den det nettopp endrede filfingeravtrykket og genererer et pakke uten å analysere alle avhengighetene dine.

Bruk Gulp, Browserify og Watchify – Nivå ∞

Installerer Node.js-avhengigheter

Du kan installere dem med Garn (hvis du virkelig er oppdatert 🙂)!

1	$ yarn add browserify gulp vinyl-buffer vinyl-source-stream watchify –dev

Ellers bruker du gode gamle NPM 🙉

1	$ npm installer browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

"streng bruk";
const browserify= krever("browserify"),
buffer = krever("vinylbuffer"),
gulp= krever("gulp"),
bane = krever("sti"),
kilde = krever("vinyl-kildestrøm"),
bruker = krever("gulp-util"),
watchify= krever("watchify"),
src = {
js: "./src/main.js"
},
destinasjon = {
js: "./bygge/"
};
la bundler;
funksjon bunter(profil) {
if (pakke === undefined) {
if (profil === "se") {
bundler = watchify(browserify(src.js));
} ellers {
bundler = browserify(src.js);
}
}
bunt();
}
funksjon pakke() {
la start = nytt Dato().getTime(),
_ = bunter
.bunt()
.vi("feil", util.log.bind(util, "Browserify-feil"))
.pipe(kilde(«main.js»))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
tid = nytt Dato().getTime() – start;
util.log("[browserify] rebundle tok" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
retur _;
}
gulp.task("js", bundles.bind(null));
gulp.task("se", funksjon () {
bunter("se");
bundler.on("Oppdater", bundle.bind(null));
});
gulp.task("misligholde", ["se", "js"]);

Her har du et ekstremt forenklet, men funksjonelt eksempel. Denne koden kan forenkles ytterligere, men den viser deg en skisse av koden du skal lage for å håndtere en varm omlasting effektive.

For å forenkle oppgaven din gir jeg deg et arkiv med en guplfile.js mer komplett, som håndterer filkompilering Javascript avec Babel (og noe forhåndsinnstillinger som ES2015), men også filer Mindre mens du administrerer profiler som Développement med eller uten se men også produksjon med minifisering!

konklusjonen

Det er fullt mulig å bruke Browserify effektivt med Gulp forutsatt at du spiller med API. Dette tvinger deg til å gå litt utenfor allfarvei og klare deg uten plugins Gulp som vi vanligvis bruker.