Prebrskaj postaja vse bolj izvedljiva rešitev za razvoj skriptov JS in predlaga skladnjo po vzoru sintakse Node.js. Prevajanje skriptov z Prebrskaj Je preprosto. Med razvojem je uporaba Pazi vam omogoča sprotno prevajanje datotek. Kljub temu, ko želite svojo kompilacijo integrirati z drugimi nalogami Opiti (kot je prevajanje datotek manj), naletite na težavo: kako uporabljati paziti hkrati kot gulp-watch. Odgovorite v tem članku!

povzetek

Uporabite Gulp in Browserify – raven 0

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

Uporabnik Opiti et Prebrskaj je čisto preprosto. Uporabite lahko API Browserify ali pa greste preprosteje in uporabite gulp-browserify, ki vam bo omogočil enostavno prevajanje datotek.

const požirek= zahteva('požirek');
const browserify= zahteva('gulp-browserify');
gulp.task('js', funkcija() {
gulp.src('src/*.js', { preberite: false })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});

Težava, na katero hitro naletite, je, da boste morali za delo na svojih datotekah in njihovo sprotno ponovno prevajanje razčleniti vse datoteke. To je zelo drago. Prebrskaj bo moral naložiti vse vaše datoteke, pa tudi vse odvisnosti, ki jih uporabljate. Večji kot bo vaš projekt, hitreje bo čas tekel. Poleg tega, če uporabljate transformacije comme Babelify časi se bodo povečali še hitreje (seznam vseh vtičnikov, ki so na voljo prek Babela). Tudi seznam vseh Browserify preoblikuje.

Preden vam pokažem končno rešitev, tukaj je, kako bi izgledala rešitev s klasiko gulp-watch.

gulp.task("gledati", funkcija () {
gulp.watch(“./src/*.js”["js"]).mi("sprememba", funkcija(dogodek) {
konzola.log(`Datoteka ${event.path} je bilo ${event.type}`);
});
});

S to rešitvijo se vsakič, ko spremenite eno od datotek, zažene celotna kompilacija.

Pazi

Pazi omogoča učinkovito prevajanje vaših datotek Prebrskaj. V pomnilnik bo shranil rezultat prevajanja vsake datoteke (vse datoteke, povezane z vašo datoteko, kot so odvisnosti ...).

Ko je datoteka posodobljena, posodobi prstni odtis pravkar spremenjene datoteke in ustvari datoteko snop brez razčlenjevanja vseh vaših odvisnosti.

Uporabite Gulp, Browserify in Watchify – stopnja ∞

Namestitev odvisnosti Node.js

Lahko jih namestite s Yarn (če ste res na tekočem 🙂)!

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

V nasprotnem primeru uporabljate stari dobri NPM 🙉

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

gulpfile.js

"stroga uporaba";
const browserify= zahteva(»prebrskaj«),
medpomnilnik = zahteva("vinil pufer"),
požirek= zahteva("požirek"),
pot = zahteva(“pot”),
vir = zahteva(“vir-vinil-tok”),
uporabnik = zahteva("gulp-util"),
watchify= zahteva(“watchify”),
src = {
js: “./src/main.js”
},
cilj = {
js: “./build/”
};
Naj povezovalnik;
funkcija svežnji(profil) {
if (sveženj === undefined) {
if (profil === "gledati") {
bundler = watchify(browserify(src.js));
} ostalo {
bundler = browserify(src.js);
}
}
sveženj();
}
funkcija snop() {
Naj začetek = novo Datum().getTime(),
_ = povezovalnik
.bundle()
.mi(“napaka”, util.log.bind(util, »Napaka Browserify«))
.pipe(vir(“main.js”))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
čas = novo Datum().getTime() – začetek;
util.log("[browserify] ponovno združevanje je trajalo" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
vrnitev _;
}
gulp.task("js", bundles.bind(null));
gulp.task("gledati", funkcija () {
svežnji ("gledati");
bundler.on("nadgradnja", bundle.bind(null));
});
gulp.task("privzeto"["gledati", "js"]);

Tukaj imate izjemno poenostavljen, a funkcionalen primer. To kodo bi lahko še poenostavili, vendar vam pokaže skico kode, ki jo je treba izdelati za obravnavo a vroče ponovno polnjenje učinkovit.

Za poenostavitev vaše naloge vam ponujam arhiv z a guplfile.js popolnejši, ki obravnava prevajanje datotek JavaScript z Babel (in nekaj prednastavitve kot ES2015), ampak tudi datoteke manj med upravljanjem profilov, kot je développement z ali brez gledajo ampak tudi proizvodnja z minifikacijo!

zaključek

To je povsem mogoče uporabiti Prebrskaj učinkovito z Opiti pod pogojem, da igrate z API. To vas prisili, da greste malo stran od ustaljenih poti in delate brez vtičnikov Opiti ki jih običajno uporabljamo.