Procházet se stává stále více životaschopným řešením pro vývoj skriptů JS a navrhování syntaxe modelované podle syntaxe Node.js. Kompilace skriptů pomocí Procházet Je jednoduchý. Během vývoje, použití Sledujte umožňuje kompilovat soubory za běhu. Navzdory tomu, když chcete svou kompilaci integrovat s jinými úkoly Doušek (jako kompilace souborů Méně), narazíte na problém: jak používat hlídat ve stejnou dobu jako doušek-hlídat. Odpověď v tomto článku!

shrnutí

Použijte Gulp and Browserify – úroveň 0

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

použití Doušek et Procházet je docela jednoduché. Můžete použít Browserify API nebo jít jednodušeji a použít gulp-browserify, které vám umožní snadno kompilovat soubory.

const doušek = vyžadovat('doušek');
const browserify= vyžadovat('gulp-browserify');
gulp.task('js', funkce() {
gulp.src('src/*.js', { číst: nepravdivý })
.pipe(browserify())
.pipe(gulp.dest('./stavět/'))
});

Problém, na který rychle narazíte, je ten, že chcete-li pracovat se svými soubory a nechat je za běhu znovu zkompilovat, budete muset analyzovat všechny soubory. To je velmi drahé. Procházet budete muset načíst všechny vaše soubory, ale také všechny závislosti, které používáte. Čím větší bude váš projekt, tím rychleji čas uteče. Navíc, pokud používáte transformace jako Babelify časy budou bobtnat ještě rychleji (Seznam všech pluginů dostupných přes Babel). Také seznam všech Procházet transformace.

Než vám ukážu konečné řešení, zde je ukázka toho, jak by vypadalo řešení s klasikou doušek-hlídat.

gulp.task("hodinky", funkce () {
gulp.watch(„./src/*.js“, ["js"]).my("změna", funkce(událost) {
konzole.log(„Soubor ${event.path} byl ${event.type}`);
});
});

S tímto řešením se při každé změně jednoho ze souborů spustí celá kompilace.

Sledujte

Sledujte umožňuje efektivně kompilovat vaše soubory Procházet. Uchová v paměti výsledek kompilace každého souboru (všech souborů spojených s vaším souborem, jako jsou závislosti…).

Když je soubor aktualizován, aktualizuje právě upravený otisk souboru a vygeneruje a ranec bez analýzy všech vašich závislostí.

Použijte Gulp, Browserify a Watchify – Level ∞

Instalace závislostí Node.js

Můžete je nainstalovat pomocí Yarn (pokud jste opravdu aktuální 🙂)!

1	$ yarn add browserify doušek vinyl-buffer vinyl-source-stream watchify –dev

Jinak používáte staré dobré NPM 🙉

1	$ npm nainstalovat browserify doušek vinyl-buffer vinyl-source-stream watchify –save-dev

gulpfile.js

"přísné použití";
const browserify= vyžadovat("procházet"),
vyrovnávací paměť = vyžadovat("vinylový buffer"),
doušek = vyžadovat("doušek"),
cesta = vyžadovat("cesta"),
zdroj = vyžadovat("vinyl-source-stream"),
uživatel = vyžadovat("gulp-util"),
hlídat = vyžadovat("hlídat"),
src = {
js: „./src/main.js“
},
cíl = {
js: "./stavět/"
};
nechat svazovač;
funkce svazky(profil) {
if (balíček === undefined) {
if (profil === "hodinky") {
bundler = watchify(browserify(src.js));
} jiný {
bundler = browserify(src.js);
}
}
bundle();
}
funkce ranec() {
nechat start = nový Datum().getTime(),
_ = svazovač
.bundle()
.my("Chyba", util.log.bind(util, "Chyba procházení"))
.pipe(zdroj("main.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
čas = nový Datum().getTime() – start;
util.log("[browserify] rebulled rebounding trvalo" , použijte.barvy.azurová(`${time} ms'), util.colors.grey(`(${src.js})`));
zpáteční _;
}
gulp.task("js", bundles.bind(null));
gulp.task("hodinky", funkce () {
svazky ("hodinky");
bundler.on("Aktualizace", bundle.bind(null));
});
gulp.task("výchozí", ["hodinky", "js"]);

Zde máte extrémně zjednodušený, ale funkční příklad. Tento kód by mohl být dále zjednodušen, ale ukazuje vám náčrt kódu, který se má vytvořit pro zpracování a horké nabití účinná.

Pro zjednodušení vašeho úkolu vám nabízím archiv s a guplfile.js úplnější, který se stará o kompilaci souborů JavaScript s Babel (a nějaký přednastavení jako ES2015), ale také soubory Méně při správě profilů jako Développement s nebo bez hodinky ale i výroba s minifikací!

závěr

Je docela možné použít Procházet efektivně s Doušek za předpokladu, že budete hrát API. To vás nutí jít trochu mimo zajeté koleje a obejít se bez pluginů Doušek které běžně používáme.