Shfletoni po bëhet gjithnjë e më shumë një zgjidhje e zbatueshme për zhvillimin e skripteve JS dhe duke propozuar një sintaksë të modeluar në atë të Node.js. Përpiloni skriptet me Shfletoni Është e thjeshtë. Gjatë zhvillimeve, përdorimi i Vëzhgoj ju lejon të përpiloni skedarë menjëherë. Përkundër kësaj, kur dëshironi të integroni përpilimin tuaj me detyra të tjera gllënjkë (si përpilimi i skedarëve më pak), ju hasni në një problem: si ta përdorni vëzhgoj në të njëjtën kohë me gulp-watch. Përgjigjuni në këtë artikull!

Sommaire

Përdorni Gulp dhe Browserify – Niveli 0

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

shfrytëzuesi gllënjkë et Shfletoni është mjaft e thjeshtë. Ju mund të përdorni Browserify API ose të bëni më të thjeshtë dhe të përdorni gulp-browserify i cili do t'ju lejojë të përpiloni skedarët tuaj me lehtësi.

const gllabërim= kërkojnë('gëlltitje');
const shfletuesi= kërkojnë('gulp-browserify');
gulp.detyrë('js', funksion() {
gulp.src('src/*.js', { lexoj: i rremë })
.pipe(shfletuesi())
.pipe(gulp.dest('./build/'))
});

Problemi që hasni shpejt është se për të punuar në skedarët tuaj dhe për t'i ripërpiluar ato menjëherë, do t'ju duhet të analizoni të gjithë skedarët. Kjo është shumë e shtrenjtë. Shfletoni do të duhet të ngarkojë të gjithë skedarët tuaj, por edhe të gjitha varësitë që përdorni. Sa më i madh të bëhet projekti juaj, aq më shpejt do të shkojë koha. Për më tepër, nëse përdorni transformon comme Babelifikoj kohët do të rriten edhe më shpejt (Lista e të gjitha shtojcave të disponueshme përmes Babel). Gjithashtu lista e të gjithave Shfletoni transformimet.

Para se t'ju tregoj zgjidhjen përfundimtare, ja se si do të dukej një zgjidhje me klasiken gulp-watch.

gulp.detyrë("shikoj", funksion () {
gllënjka. shiko ("./src/*.js", ["js"]).ne("ndryshim", funksion(ngjarje) {
konsol.log(`Dosja ${event.path} ka qenë ${event.type}`);
});
});

Me këtë zgjidhje, sa herë që ndryshoni një nga skedarët tuaj, hapet një përmbledhje e tërë.

Vëzhgoj

Vëzhgoj e bën efikas përpilimin e skedarëve tuaj me Shfletoni. Ai do të mbajë në kujtesë rezultatin e përpilimit të çdo skedari (të gjithë skedarët e lidhur me skedarin tuaj, si p.sh. varësitë...).

Kur një skedar përditësohet, ai përditëson gjurmën e gishtit të skedarit të sapo modifikuar dhe gjeneron një deng pa analizuar të gjitha varësitë tuaja.

Përdorni Gulp, Browserify dhe Watchify – Niveli ∞

Instalimi i varësive Node.js

Mund t'i instaloni me fije (nëse jeni vërtet të përditësuar 🙂)!

1	$ fije shtoni browserify gllënjkë vinyl-buffer vinyl-source-stream watchify –dev

Përndryshe, ju jeni duke përdorur NPM të mirë të vjetër 🙉

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

gulpfile.js

"përdorim i rreptë";
const shfletuesi= kërkojnë("shfletim"),
tampon = kërkojnë("tampon vinyl"),
gllabërim= kërkojnë("gëlltitje"),
shteg = kërkojnë("rrugë"),
burim= kërkojnë("Vinyl-burim-stream"),
përdorues = kërkojnë("gëlltitje-përdorim"),
vëzhgoj = kërkojnë("shikoj"),
src = {
js: "./src/main.js"
},
destinacioni = {
js: "./build/"
};
le të bundler;
funksion bundles(Profili) {
if (pako === undefined) {
if (profili === "shikoj") {
bundler = shikoj(shfletoj(src.js));
} tjetër {
bundler = shfletues (src.js);
}
}
pako ();
}
funksion deng() {
le të fillimi = i ri data().getTime(),
_ = bundler
.bundle()
.ne("gabim", util.log.bind(util, "Gabimi i shfletuesit"))
.tub(burimi("main.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
kohë= i ri data().getTime() – start;
util.log("[browserify] ribundle mori" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
kthim _;
}
gulp.detyrë("js", bundles.bind(null));
gulp.detyrë("shikoj", funksion () {
tufa ("shikoj");
bundler.on("përditëso", bundle.bind(null));
});
gulp.detyrë("i parazgjedhur", ["shikoj", "js"]);

Këtu keni një shembull jashtëzakonisht të thjeshtuar, por funksional. Ky kod mund të thjeshtohet më tej, por ju tregon një skicë të kodit për të prodhuar për të trajtuar a ringarkoni nxehtë efektive.

Për të thjeshtuar detyrën tuaj, unë ju ofroj një arkiv me a guplfile.js më e plotë, e cila merret me përpilimin e skedarëve JavaScript me Babel (dhe disa paravendosjet si ES2015) por edhe skedarë më pak gjatë menaxhimit të profileve si Développement me ose pa shikoj por gjithashtu prodhim me pakësim!

përfundim

Është mjaft e mundur të përdoret Shfletoni në mënyrë efektive me gllënjkë me kusht që të luani me API. Kjo ju detyron të dilni pak nga rruga e rrahur dhe të bëni pa shtojca gllënjkë që ne përdorim zakonisht.