Navigare devine din ce în ce mai mult o soluție viabilă pentru dezvoltarea scripturilor JS şi propunând o sintaxă modelată pe cea a lui Node.js. Compilați scripturi cu Navigare Este simplu. În timpul dezvoltărilor, utilizarea de Urmăriți vă permite să compilați fișiere din mers. În ciuda acestui fapt, atunci când doriți să vă integrați compilația cu alte sarcini Înghițitură (cum ar fi compilarea fișierelor Mai puțin), te confrunți cu o problemă: cum să folosești urmăriți în același timp ca ceas înghițit. Raspunde in acest articol!

rezumat

Utilizați Gulp și Browserify – Nivelul 0

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

Utiliser Înghițitură et Navigare este destul de simplu. Puteți utiliza API-ul Browserify sau puteți utiliza gulp-browserify, care vă va permite să vă compilați fișierele cu ușurință.

CONST înghiţitură= necesita('înghiţitură');
CONST browserify= necesita(„gulp-browserify”);
gulp.task(„js”, funcţie() {
gulp.src(„src/*.js”, { citit: fals })
.pipe(browserify())
.pipe(gulp.dest('./construi/'))
});

Problema pe care o întâmpinați rapid este că, pentru a lucra la fișierele dvs. și a le re-compila din mers, va trebui să analizați toate fișierele. Acest lucru este foarte scump. Navigare va trebui să vă încărcați toate fișierele, dar și toate dependențele pe care le utilizați. Cu cât proiectul tău devine mai mare, cu atât timpul va trece mai repede. În plus, dacă utilizați transformatele ca Babelify timpii se vor umfla și mai repede (Lista tuturor pluginurilor disponibile prin Babel). De asemenea, lista tuturor Browserify transformări.

Înainte să vă arăt soluția finală, iată cum ar arăta o soluție cu cea clasică ceas înghițit.

gulp.task("ceas", funcţie () {
gulp.watch(„./src/*.js”, [„js”]).noi("Schimbare", funcţie(eveniment) {
consolă.Buturuga(„Fișier ${event.path} a fost ${event.type}`);
});
});

Cu această soluție, de fiecare dată când schimbați unul dintre fișierele dvs., este lansată o întreagă compilație.

Urmăriți

Urmăriți face eficientă compilarea fișierelor dvs. cu Navigare. Acesta va păstra în memorie rezultatul compilării fiecărui fișier (toate fișierele legate de fișierul dvs., cum ar fi dependențele...).

Când un fișier este actualizat, actualizează amprenta fișierului tocmai modificat și generează un pachet fără a analiza toate dependențele dvs.

Utilizați Gulp, Browserify și Watchify – Nivel ∞

Instalarea dependențelor Node.js

Le poți instala cu Yarn (dacă ești cu adevărat la curent 🙂)!

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

În caz contrar, folosești NPM vechi bun 🙉

1	$ npm instalați browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

„utilizare strictă”;
CONST browserify= necesita(„browserify”),
tampon = necesita("tampon de vinil"),
înghiţitură= necesita("înghiţitură"),
cale = necesita("cale"),
sursa = necesita(„flux-sursă-vinil”),
utilizator = necesita(„gulp-util”),
watchify= necesita(„vizionați”),
src = {
js: „./src/main.js”
},
destinație = {
js: "./construi/"
};
lăsa bundler;
funcţie pachete(profil) {
if (pachet === undefiNed) {
if (profil === "ceas") {
bundler = watchify(browserify(src.js));
} altfel {
bundler = browserify(src.js);
}
}
pachet();
}
funcţie pachet() {
lăsa începe = nou Data().Fă-ți timp(),
_ = bundler
.pachet()
.noi("eroare", util.log.bind(util, „Eroare de navigare”))
.pipe(sursa(„main.js”))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
timp= nou Data().getTime() – start;
util.log(„[browserify] reagrupare a luat” , use.colors.cyan(`${time} ms`), util.culori.gri(`(${src.js})`));
reveni _;
}
gulp.task(„js”, bundles.bind(zero));
gulp.task("ceas", funcţie () {
pachete("ceas");
bundler.on("Actualizați", bundle.bind(zero));
});
gulp.task("Mod implicit", ["ceas", „js”]);

Aici aveți un exemplu extrem de simplificat, dar funcțional. Acest cod ar putea fi simplificat și mai mult, dar vă arată o schiță a codului de produs pentru a gestiona a reîncărcare la cald eficiente.

Pentru a vă simplifica sarcina, vă pun la dispoziție o arhivă cu a guplfile.js mai complet, care se ocupă de compilarea fișierelor JavaScript cu Hărmălaie (si ceva presetări ca ES2015), dar și fișiere Mai puțin în timp ce gestionați profiluri precum Développement cu sau fără ceas dar de asemenea producere cu minificare!

Concluzie

Este destul de posibil de utilizat Navigare eficient cu Înghițitură cu condiția să te joci cu API. Acest lucru te obligă să ieși puțin din drumurile bătute și să faci fără pluginuri Înghițitură pe care le folosim de obicei.