Browserify blir mer och mer en gångbar lösning för att utveckla skript JS och föreslå en syntax som är modellerad efter den för node.js. Sammanställa skript med Browserify Det är enkelt. Under utvecklingen, användningen av Watchify låter dig kompilera filer i farten. Trots detta, när du vill integrera din kompilering med andra uppgifter Gulp (som att kompilera filer Mindre), stöter du på ett problem: hur man använder watchify samtidigt som gulp-klocka. Svara i den här artikeln!

Sommaire

Använd Gulp och Browserify – Nivå 0

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

utiliser Gulp et Browserify är ganska enkelt. Du kan använda Browserify API eller gå enklare och använda gulp-browserify som gör att du enkelt kan kompilera dina filer.

const gulp= kräver('klunk');
const browserify= kräver('gulp-browserify');
gulp.task('js', fungera() {
gulp.src('src/*.js', { läsa: falsk })
.pipe(browserify())
.pipe(gulp.dest('./bygga/'))
});

Problemet du snabbt stöter på är att för att kunna arbeta med dina filer och få dem kompilerade om i farten, måste du analysera alla filer. Detta är väldigt dyrt. Browserify måste ladda alla dina filer men också alla beroenden du använder. Ju större ditt projekt blir, desto snabbare går tiden. Dessutom, om du använder transformer comme Babelify tiderna kommer att svälla ännu snabbare (Lista över alla plugins tillgängliga via Babel). Också listan över alla Browserify förvandlas.

Innan jag visar dig den slutliga lösningen, så här skulle en lösning se ut med klassikern gulp-klocka.

gulp.task("Kolla på", fungera () {
gulp.watch("./src/*.js", ["js"]).vi("förändra", fungera(händelse) {
trösta.logga(`Arkiv ${event.path} har ${event.type}`);
});
});

Med denna lösning, varje gång du ändrar en av dina filer, startas en hel kompilering.

Watchify

Watchify gör det effektivt att kompilera dina filer med Browserify. Resultatet av kompileringen av varje fil sparas i minnet (alla filer som är länkade till din fil, t.ex. beroenden...).

När en fil uppdateras uppdaterar den det nyss ändrade filens fingeravtryck och genererar ett Set utan att analysera alla dina beroenden.

Använd Gulp, Browserify och Watchify – Nivå ∞

Installerar Node.js-beroenden

Du kan installera dem med Yarn (om du verkligen är uppdaterad 🙂)!

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

Annars använder du gamla goda NPM 🙉

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

gulpfile.js

"strikt användning";
const browserify= kräver("browserify"),
buffert = kräver("vinylbuffert"),
gulp= kräver("klunk"),
sökväg = kräver("väg"),
källa = kräver("vinyl-källa-ström"),
användare = kräver("gulp-util"),
watchify= kräver("bevaka"),
src = {
js: "./src/main.js"
},
destination = {
js: "./bygga/"
};
Låt buntare;
fungera buntar(profil) {
if (paket === undefiNed) {
if (profil === "Kolla på") {
bundler = watchify(browserify(src.js));
} annars {
bundler = browserify(src.js);
}
}
bunt();
}
fungera Set() {
Låt börja = ny Datum().få tid(),
_ = buntare
.bunt()
.vi("fel", util.log.bind(util, "Browserify Error"))
.pipe(källa("main.js"))
.pipe(buffert())
.pipe(gulp.dest(dest.js)),
tid = ny Datum().getTime() – start;
util.log("[browserify] rebundle tog" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
avkastning _;
}
gulp.task("js", bundles.bind(null));
gulp.task("Kolla på", fungera () {
buntar("Kolla på");
bundler.on("uppdatering", bundle.bind(null));
});
gulp.task("standard", ["Kolla på", "js"]);

Här har du ett extremt förenklat men funktionellt exempel. Den här koden kan förenklas ytterligare men den visar dig en skiss av koden som ska produceras för att hantera en varmladdning effektiva.

För att förenkla din uppgift förser jag dig med ett arkiv med en guplfile.js mer komplett, som hanterar filkompilering JavaScript avec Babel (och lite förinställningar som ES2015) men också filer Mindre medan du hanterar profiler som développement med eller utan kolla på men också produktion med minifiering!

Slutsats

Det är fullt möjligt att använda Browserify effektivt med Gulp förutsatt att du spelar med API. Detta tvingar dig att gå lite utanför allfartsvägarna och klara dig utan plugins Gulp som vi brukar använda.