Prehľadávať sa stáva čoraz viac životaschopným riešením pre vývoj skriptov JS a navrhnutie syntaxe modelovanej podľa syntaxe Node.js. Kompilácia skriptov s Prehľadávať Je jednoduchý. Počas vývoja, používanie Sledujte umožňuje kompilovať súbory za behu. Napriek tomu, keď chcete svoju kompiláciu integrovať s inými úlohami Dúšok (ako kompilácia súborov menej), narazíte na problém: ako používať dávať pozor v rovnakom čase ako hlt-sledovať. Odpoveď v tomto článku!

Sommaire

Použite Gulp a Browserify – úroveň 0

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

použitie Dúšok et Prehľadávať je celkom jednoduché. Môžete použiť Browserify API alebo ísť jednoduchšie a použiť gulp-browserify, ktoré vám umožní jednoducho kompilovať vaše súbory.

const hlt = vyžadovať('gulp');
const browserify= vyžadovať('gulp-browserify');
gulp.task('js', funkcie() {
gulp.src('src/*.js', { čítať: nepravdivý })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});

Problém, s ktorým sa rýchlo stretnete, je, že ak chcete pracovať so súbormi a nechať ich za chodu znova skompilovať, budete musieť analyzovať všetky súbory. Toto je veľmi drahé. Prehľadávať budete musieť načítať všetky vaše súbory, ale aj všetky závislosti, ktoré používate. Čím väčší bude váš projekt, tým rýchlejšie vám ubehne čas. Navyše, ak používate transformácia comme Babelify časy budú ešte rýchlejšie (Zoznam všetkých pluginov dostupných cez Babel). Aj zoznam všetkých Prehľadávať transformácie.

Predtým, ako vám ukážem konečné riešenie, tu je to, ako by vyzeralo riešenie s klasikou hlt-sledovať.

gulp.task("sledovať", funkcie () {
gulp.watch(„./src/*.js“, [„js“]).my("zmena", funkcie(udalosť) {
konzola.log(„Súbor ${event.path} bol ${event.type}`);
});
});

S týmto riešením sa pri každej zmene jedného z vašich súborov spustí celá kompilácia.

Sledujte

Sledujte umožňuje efektívne kompilovať vaše súbory Prehľadávať. Uchová v pamäti výsledok kompilácie každého súboru (všetky súbory prepojené s vaším súborom, ako sú závislosti...).

Keď je súbor aktualizovaný, aktualizuje odtlačok práve upraveného súboru a vygeneruje a vonia bez analýzy všetkých vašich závislostí.

Použite Gulp, Browserify a Watchify – úroveň ∞

Inštalácia závislostí Node.js

Môžete si ich nainštalovať pomocou Yarn (ak ste naozaj aktuálny 🙂)!

1	$ priadza pridať browserify hlt vinyl-buffer vinyl-source-stream watchify –dev

Inak používaš staré dobré NPM 🙉

1	$ npm nainštalovať browserify hlt vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

"prísne používanie";
const browserify= vyžadovať("prehliadať"),
nárazník = vyžadovať("vinylový pufer"),
hlt = vyžadovať("dúšok"),
cesta = vyžadovať("cesta"),
zdroj = vyžadovať(„zdrojový zdroj vinylu“),
užívateľ = vyžadovať("gulp-util"),
dávať pozor = vyžadovať("dávať pozor"),
src = {
js: „./src/main.js“
},
cieľ = {
js: „./build/“
};
nechať zväzovač;
funkcie zväzky(profily) {
if (zväzok === undefiNed) {
if (profil === "sledovať") {
bundler = watchify(browserify(src.js));
} inak {
bundler = browserify(src.js);
}
}
bundle();
}
funkcie vonia() {
nechať štart = nový dátum().getTime(),
_ = zväzovač
.bundle()
.my("chyba", util.log.bind(util, "Chyba prehliadania"))
.pipe(zdroj(„main.js“))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
čas = nový dátum().getTime() – začiatok;
util.log("[browserify] prebalenie trvalo" , použite.farby.azúrová(`${time} ms'), util.colors.grey(`(${src.js})`));
návrat _;
}
gulp.task(„js“, bundles.bind(null));
gulp.task("sledovať", funkcie () {
zväzky ("sledovať");
bundler.on("aktualizácia", bundle.bind(null));
});
gulp.task("predvolené", ["sledovať", „js“]);

Tu máte extrémne zjednodušený, ale funkčný príklad. Tento kód by sa dal ďalej zjednodušiť, ale zobrazuje vám náčrt kódu, ktorý sa má vytvoriť na spracovanie a horúce opätovné nabitie účinná.

Pre zjednodušenie vašej úlohy vám poskytujem archív s a guplfile.js úplnejší, ktorý rieši kompiláciu súborov JavaScript s Babel (a nejaké prednastavenie ako ES2015), ale aj súbory menej pri spravovaní profilov ako développement s alebo bez sledovať ale tiež výroba s minifikáciou!

záver

Je celkom možné použiť Prehľadávať efektívne s Dúšok za predpokladu, že budete hrať API. To vás núti ísť trochu mimo zabehnutých koľají a zaobísť sa bez pluginov Dúšok ktoré bežne používame.