Selaimen vahvistus on tulossa yhä käyttökelpoisempi ratkaisu skriptien kehittämiseen JS ja ehdottaa syntaksia mallin mukaan Node.js. Kääntää skriptejä Selaimen vahvistus On yksinkertainen. Kehityksen aikana käytetään Tarkkaile voit kääntää tiedostoja lennossa. Tästä huolimatta, kun haluat integroida kokoelmasi muihin tehtäviin Kulaus (kuten tiedostojen kokoaminen Vähemmän), kohtaat ongelman: kuinka käyttää tarkkailla samaan aikaan kuin ahmi-kello. Vastaa tässä artikkelissa!

yhteenveto

Käytä Gulp and Browserify -tasoa 0

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

käyttö Kulaus et Selaimen vahvistus on melko yksinkertainen. Voit käyttää Browserify API:ta tai yksinkertaistaa ja käyttää gulp-browserifya, jonka avulla voit kääntää tiedostosi helposti.

const ahmi = edellyttää('kulaus');
const browserify= edellyttää("gulp-browserify");
gulp.task("js", toiminto() {
gulp.src("src/*.js", { luettu: väärä })
.pipe(browserify())
.pipe(gulp.dest('./rakentaa/'))
});

Nopeasti kohtaamasi ongelma on se, että sinun on jäsennettävä kaikki tiedostot, jotta voit käsitellä tiedostojasi ja kääntää ne uudelleen lennossa. Tämä on erittäin kallista. Selaimen vahvistus täytyy ladata kaikki tiedostosi, mutta myös kaikki käyttämäsi riippuvuudet. Mitä isommaksi projektisi tulee, sitä nopeammin aika kuluu. Lisäksi, jos käytät muunnoksia kuten Babelify ajat paisuvat entistä nopeammin (Luettelo kaikista Babelin kautta saatavilla olevista laajennuksista). Myös lista kaikista Selaa muunnoksia.

Ennen kuin näytän sinulle lopullisen ratkaisun, katso, miltä ratkaisu näyttäisi klassikon kanssa ahmi-kello.

gulp.task("katsella", toiminto () {
gulp.watch("./src/*.js"["js"]).me("muuttaa", toiminto(tapahtumaa varten) {
console.Hirsi(`Tiedosto ${event.path} on ${event.type}`);
});
});

Tämän ratkaisun avulla joka kerta kun muutat yhtä tiedostoistasi, koko kokoelma käynnistetään.

Tarkkaile

Tarkkaile tekee tiedostojen kääntämisestä tehokkaan Selaimen vahvistus. Se säilyttää muistissa jokaisen tiedoston käännöstuloksen (kaikki tiedostoon linkitetyt tiedostot, kuten riippuvuudet…).

Kun tiedosto päivitetään, se päivittää juuri muokatun tiedoston sormenjäljen ja luo a niputtaa jäsentämättä kaikkia riippuvuuksiasi.

Käytä Gulp, Browserify ja Watchify - Taso ∞

Node.js-riippuvuuksien asentaminen

Voit asentaa ne Lankalla (jos olet todella ajan tasalla 🙂)!

1	$ lanka lisää browserify gulp vinyyli-puskuri vinyyli-lähde-stream watchify –dev

Muuten käytät vanhaa hyvää NPM:ää 🙉

1	$ npm asentaa browserify gulp vinyyli-puskuri vinyyli-lähde-stream watchify –save-dev

gulpfile.js

"tiukka käyttö";
const browserify= edellyttää("selaa"),
puskuri = edellyttää("vinyylipuskuri"),
ahmi = edellyttää("kulaus"),
polku = edellyttää("polku"),
lähde = edellyttää("vinyylilähde-stream"),
käyttäjä = edellyttää("kukutus"),
katsella = edellyttää("katso"),
src = {
js: "./src/main.js"
},
kohde = {
js: "./rakentaa/"
};
antaa niputtaja;
toiminto nippuja(profiili) {
if (nippu === undefined) {
if (profiili === "katsella") {
bundler = watchify(browserify(src.js));
} muu {
bundler = browserify(src.js);
}
}
nippu();
}
toiminto niputtaa() {
antaa aloita = uusi Treffi().getTime(),
_ = niputtaja
.nippu()
.me("virhe", util.log.bind(util, "Selainvirhe"))
.pipe(source("main.js"))
.pipe(puskuri())
.pipe(gulp.dest(dest.js)),
aika = uusi Treffi().getTime() – aloitus;
util.log("[browserify] rebundle take" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
palata _;
}
gulp.task("js", bundles.bind(nolla));
gulp.task("katsella", toiminto () {
niput ("katsella");
bundler.on("päivittää", bundle.bind(nolla));
});
gulp.task("oletus"["katsella", "js"])?

Tässä on erittäin yksinkertaistettu mutta toimiva esimerkki. Tätä koodia voitaisiin yksinkertaistaa entisestään, mutta se näyttää luonnoksen koodista, joka on tuotettava käsittelemään a kuuma reload tehokas.

Tehtäväsi yksinkertaistamiseksi tarjoan sinulle arkiston, jossa on a guplfile.js täydellisempi, joka käsittelee tiedostojen kääntämisen JavaScript kanssa Baabel (ja hieman esiasetukset kuten ES2015), mutta myös tiedostoja Vähemmän kun hallitset profiileja, kuten développement tai ilman katsella mutta myös tuotanto minimoinnin kanssa!

Yhteenveto

Se on täysin mahdollista käyttää Selaimen vahvistus kanssa tehokkaasti Kulaus jos pelaat API. Tämä pakottaa sinut poikkeamaan syrjään ja olemaan ilman laajennuksia Kulaus joita yleensä käytämme.