Browserify bliver mere og mere en brugbar løsning til udvikling af scripts JS og foreslå en syntaks, der er modelleret efter den node.js. Kompiler scripts med Browserify Er enkel. Under udviklingen, brugen af Watchify giver dig mulighed for at kompilere filer på farten. På trods af dette, når du ønsker at integrere din kompilering med andre opgaver Gulp (som at kompilere filer Mindre), løber du ind i et problem: hvordan man bruger watchify samtidig med gulp-ur. Svar i denne artikel!

resumé

Brug Gulp og Browserify – Niveau 0

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

Utiliser Gulp et Browserify er ret simpelt. Du kan bruge Browserify API eller gøre det enklere og bruge gulp-browserify, som giver dig mulighed for nemt at kompilere dine filer.

const sluge = kræver('gulp');
const browserify= kræver('gulp-browserify');
gulp.task('js', funktion() {
gulp.src('src/*.js', { læse: falsk })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});

Problemet, du hurtigt støder på, er, at for at arbejde på dine filer og få dem kompileret på ny, bliver du nødt til at analysere alle filerne. Dette er meget dyrt. Browserify bliver nødt til at indlæse alle dine filer, men også alle de afhængigheder, du bruger. Jo større dit projekt bliver, jo hurtigere går tiden. Derudover, hvis du bruger transformationer som Babelify tider vil svulme endnu hurtigere (Liste over alle plugins tilgængelige via Babel). Også listen over alle Browserify transformerer.

Før jeg viser dig den endelige løsning, er her hvordan en løsning ville se ud med klassikeren gulp-ur.

gulp.task("holde øje", funktion () {
gulp.watch("./src/*.js", ["js"]).vi("lave om", funktion(begivenhed) {
konsol.log(`Fil ${event.path} har været ${event.type}`);
});
});

Med denne løsning, hver gang du ændrer en af dine filer, lanceres en hel kompilering.

Watchify

Watchify gør det effektivt at kompilere dine filer med Browserify. Det vil gemme resultatet af kompileringen af hver fil i hukommelsen (alle filer, der er knyttet til din fil, såsom afhængigheder...).

Når en fil opdateres, opdaterer den det netop ændrede filfingeraftryk og genererer et bundte uden at analysere alle dine afhængigheder.

Brug Gulp, Browserify og Watchify – Niveau ∞

Installation af Node.js-afhængigheder

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

1	$ garn tilføj browserify gulp vinyl-buffer vinyl-source-stream watchify –dev

Ellers bruger du gode gamle NPM 🙉

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

gulpfile.js

"streng brug";
const browserify= kræver("browserify"),
buffer = kræver("vinyl buffer"),
sluge = kræver("sluge"),
sti = kræver("sti"),
kilde = kræver("vinyl-kilde-stream"),
bruger = kræver("gulp-util"),
watchify= kræver("watchify"),
src = {
js: "./src/main.js"
},
destination = {
js: "./build/"
};
lad bundter;
funktion bundter(profil) {
if (bundt === undefineret) {
if (profil === "holde øje") {
bundler = watchify(browserify(src.js));
} andet {
bundler = browserify(src.js);
}
}
bundt();
}
funktion bundte() {
lad start = ny Dato().getTime(),
_ = bundter
.bundt()
.vi("fejl", util.log.bind(util, "Browserify-fejl"))
.pipe(kilde("main.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
tid= ny Dato().getTime() – start;
util.log("[browserify] genbundtet tog" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
afkast _;
}
gulp.task("js", bundles.bind(null));
gulp.task("holde øje", funktion () {
bundter ("holde øje");
bundler.on("opdatering", bundle.bind(null));
});
gulp.task("Standard", ["holde øje", "js"]);

Her har du et ekstremt forenklet, men funktionelt eksempel. Denne kode kunne forenkles yderligere, men den viser dig en skitse af koden, der skal fremstilles for at håndtere en varm genindlæsning effektiv.

For at forenkle din opgave giver jeg dig et arkiv med en guplfile.js mere komplet, som håndterer filkompilering JavaScript med Babel (og nogle forudindstillinger som ES2015), men også filer Mindre mens du administrerer profiler som développement med eller uden ur men også produktion med minifikation!

Konklusion

Det er ganske muligt at bruge Browserify effektivt med Gulp forudsat at du spiller med API. Dette tvinger dig til at gå lidt væk fra alfarvej og undvære plugins Gulp som vi normalt bruger.