Browser wordt steeds meer een levensvatbare oplossing voor het ontwikkelen van scripts JS en het voorstellen van een syntaxis gemodelleerd naar die van Node.js. Scripts samenstellen met Browser Is simpel. Tijdens de ontwikkelingen is het gebruik van Let op stelt u in staat om bestanden on the fly te compileren. Desondanks, wanneer u uw compilatie wilt integreren met andere taken Slok (zoals het samenstellen van bestanden Minder), loop je tegen een probleem aan: hoe te gebruiken waakzaam op hetzelfde moment als slok-kijk. Antwoord in dit artikel!

overzicht

Gebruik Gulp en Browserify - Niveau 0

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

Gebruiken Slok et Browser is vrij eenvoudig. U kunt de Browserify API gebruiken of eenvoudiger gaan en gulp-browserify gebruiken waarmee u uw bestanden eenvoudig kunt compileren.

const slok = vereisen('slok');
const browserify= vereisen('gulp-browserify');
slok.taak('js', functie() {
slok.src('src/*.js', { dit artikel lezen: vals })
.pipe(verkennen())
.pijp(slok.dest('./bouwen/'))
});

Het probleem dat u al snel tegenkomt, is dat u, om aan uw bestanden te werken en ze onmiddellijk opnieuw te laten compileren, alle bestanden moet parseren. Dit is erg duur. Browser zal al uw bestanden moeten laden, maar ook alle afhankelijkheden die u gebruikt. Hoe groter je project wordt, hoe sneller de tijd gaat. Bovendien, als u gebruikt transformaties comme Babelify tijden zullen nog sneller opzwellen (Lijst van alle plug-ins beschikbaar via Babel). Ook de lijst met alle Browserify-transformaties.

Voordat ik je de definitieve oplossing laat zien, is hier hoe een oplossing eruit zou zien met de klassieker slok-kijk.

slok.taak("horloge", functie () {
slok.kijken("./src/*.js"["js"]).Wij("wijziging", functie(gebeurtenis) {
console.log (`Bestand ${event.pad} is ${event.type}`);
});
});

Met deze oplossing wordt elke keer dat u een van uw bestanden wijzigt, een hele compilatie gestart.

Let op

Let op maakt het efficiënt om uw bestanden mee te compileren Browser. Het bewaart het resultaat van de compilatie van elk bestand (alle bestanden die aan uw bestand zijn gekoppeld, zoals afhankelijkheden...).

Wanneer een bestand wordt bijgewerkt, wordt de zojuist gewijzigde bestandsvingerafdruk bijgewerkt en wordt een bundel zonder al uw afhankelijkheden te ontleden.

Gebruik Gulp, Browserify en Watchify – Level ∞

Node.js-afhankelijkheden installeren

Je kunt ze installeren met Yarn (als je echt up-to-date bent 🙂)!

1	$garen voeg browserify gulp vinyl-buffer vinyl-source-stream watchify –dev toe

Anders gebruik je goede oude NPM 🙉

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

gulpfile.js

"strikt gebruik";
const browserify= vereisen("verkennen"),
buffer= vereisen("vinylbuffer"),
slok = vereisen("slok"),
pad = vereisen("pad"),
bron = vereisen("vinyl-bron-stream"),
gebruiker = vereisen("slik-util"),
kijk uit= vereisen("waakzaam"),
bron = {
js: "./src/main.js"
},
bestemming = {
js: "./bouwen/"
};
laten bundelaar;
functie bundels(profielen) {
if (bundel === undefined) {
if (profiel === "horloge") {
bundeler = watchify(browserify(src.js));
} anders {
bundeler = browserify(src.js);
}
}
bundel();
}
functie bundel() {
laten beginnen = nieuwe Datum().krijg tijd(),
_ = bundelaar
.bundel()
.Wij("Fout", util.log.bind(util, "Browserify-fout"))
.pijp(bron("main.js"))
.pijp(buffer())
.pijp(slok.dest(dest.js)),
tijd = nieuwe Datum().getTime() – begin;
util.log("[browserify] herbundeling duurde" , gebruik.kleuren.cyaan(`${tijd} ms`), util.kleuren.grijs(`(${src.js})`));
terugkeer _;
}
slok.taak("js", bundels.bind(nul));
slok.taak("horloge", functie () {
bundels ("horloge");
bundeler.op("Update", bundel.bind(nul));
});
slok.taak("standaard"["horloge", "js"]);

Hier heb je een extreem vereenvoudigd maar functioneel voorbeeld. Deze code kan verder worden vereenvoudigd, maar het toont u een schets van de code die moet worden geproduceerd om a heet herladen effectief.

Om uw taak te vereenvoudigen, stel ik u een archief ter beschikking met een guplfile.js completer, dat het compileren van bestanden afhandelt JavaScript avec Babel (en een beetje presets zoals ES2015) maar ook bestanden Minder tijdens het beheren van profielen zoals développement met of zonder horloge maar ook productie met minificatie!

Conclusie

Het is heel goed mogelijk om te gebruiken Browser effectief mee Slok op voorwaarde dat je ermee speelt API. Dit dwingt je om een beetje buiten de gebaande paden te gaan en het zonder plug-ins te doen Slok die we gewoonlijk gebruiken.