Böngészés egyre inkább életképes megoldás a szkriptek fejlesztésére JS és egy szintaxist javasolunk annak mintájára node.js. Fordítsunk szkripteket a Böngészés Egyszerű. A fejlesztések során a felhasználás Vigyázz lehetővé teszi a fájlok menet közbeni összeállítását. Ennek ellenére, ha összeállítását más feladatokkal szeretné integrálni Korty (mint például a fájlok fordítása Kevésbé), problémába ütközik: hogyan kell használni figyelni ugyanakkor zabálóóra. Válasz ebben a cikkben!

Sommaire

Gulp és Browserify használata – 0. szint

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

használat Korty et Böngészés elég egyszerű. Használhatja a Browserify API-t, vagy egyszerűbbé teheti a gulp-browserify funkciót, amely lehetővé teszi a fájlok egyszerű összeállítását.

const nyelés = szükség('korty');
const browserify = szükség("gulp-browserify");
gulp.task("js", funkció() {
gulp.src("src/*.js", { olvas: hamis })
.pipe(browserify())
.pipe(gulp.dest('./épít/'))
});

A probléma, amellyel gyorsan szembesül, az az, hogy a fájlok feldolgozásához és menet közbeni újrafordításához az összes fájlt elemeznie kell. Ez nagyon drága. Böngészés be kell töltenie az összes fájlt, de az összes használt függőséget is. Minél nagyobb lesz a projektje, annál gyorsabban telik az idő. Ezenkívül, ha használ transzformáció úgymint Babelify az idő még gyorsabban fog duzzadni (A Babelen keresztül elérhető összes plugin listája). Az összes listája is Átalakítások böngészése.

Mielőtt bemutatnám a végső megoldást, nézze meg, hogyan nézne ki a megoldás a klasszikussal zabálóóra.

gulp.task("néz", funkció () {
gulp.watch("./src/*.js", ["js"]).mi("változás", funkció(esemény) {
konzolra.log(`Fájl ${event.path} már ${event.type}`);
});
});

Ezzel a megoldással minden alkalommal, amikor módosítja valamelyik fájlját, egy teljes összeállítás indul el.

Vigyázz

Vigyázz segítségével hatékonyan lefordíthatja fájljait Böngészés. Megőrzi a memóriában az egyes fájlok összeállításának eredményét (a fájlhoz kapcsolódó összes fájl, például a függőségek…).

A fájl frissítésekor frissíti az éppen módosított fájl ujjlenyomatát, és létrehoz egy csomag az összes függősége elemzése nélkül.

A Gulp, Browserify és Watchify használata – Level ∞

Node.js függőségek telepítése

Fonallal telepítheted őket (ha tényleg naprakész vagy 🙂)!

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

Ellenkező esetben a jó öreg NPM-et használod 🙉

1	$ npm telepítés böngészőify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

"szigorú használat";
const browserify = szükség("böngészés"),
puffer = szükség("vinil puffer"),
nyelés = szükség("korty"),
útvonal = szükség("pálya"),
forrás = szükség(„vinyl-forrás-folyam”),
felhasználó = szükség(“nyal-util”),
figyelni= szükség("figyelni"),
src = {
js: "./src/main.js"
},
rendeltetési hely = {
js: "./épít/"
};
hadd kötegelő;
funkció kötegek(profilok) {
if (köteg === undefiNed) {
if (profil === "néz") {
bundler = watchify(browserify(src.js));
} más {
bundler = browserify(src.js);
}
}
csomag();
}
funkció csomag() {
hadd kezdés = új találka().getTime(),
_ = kötegelő
.csomag()
.mi("hiba", util.log.bind(util, "Böngésző hiba"))
.pipe(source(„main.js”))
.pipe(puffer())
.pipe(gulp.dest(dest.js)),
idő = új találka().getTime() – start;
util.log("[browserify] rebundle take" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
visszatérés _;
}
gulp.task("js", bundles.bind(null));
gulp.task("néz", funkció () {
kötegek("néz");
bundler.on("frissítés", bundle.bind(null));
});
gulp.task("alapértelmezett", ["néz", "js"]);

Itt van egy rendkívül leegyszerűsített, de funkcionális példa. Ez a kód tovább egyszerűsíthető, de egy vázlatot mutat a kódról, amelyet az a forró újratöltés hatékony.

Feladatának egyszerűsítése érdekében egy archívumot bocsátok rendelkezésére a guplfile.js teljesebb, amely kezeli a fájlok fordítását JavaScript -val Babel (és néhány előre beállított mint az ES2015), hanem fájlokat is Kevésbé profilok kezelése közben, mint développement vele vagy nélküle óra de szintén Termelés kicsinyítéssel!

Következtetés

Használata teljesen lehetséges Böngészés hatékonyan Korty feltéve, ha játszol vele API. Ez arra kényszeríti, hogy kicsit letérjen a járt útról, és beépülő modulok nélkül maradjon Korty amit általában használunk.