Optimeerige oma kogumikke Gulpi, Browserify ja Watchify abil
Sirvige on muutumas üha elujõulisemaks lahenduseks skriptide arendamiseks JS ja pakkudes välja süntaksi eeskujul Node.js. Koostage skriptid Sirvige On lihtne. Arenduste käigus kasutatakse Jälgige võimaldab faile lennult kompileerida. Sellest hoolimata, kui soovite oma kompilatsiooni teiste ülesannetega integreerida Suutäis (nagu failide kompileerimine vähem), tekib probleem: kuidas kasutada valvama samal ajal kui närimiskell. Vastus selles artiklis!
kokkuvõte
Kasutage Gulp ja Browserify – tase 0
kasutamine Suutäis et Sirvige on üsna lihtne. Võite kasutada Browserify API-d või minna lihtsamaks ja kasutada gulp-browserify, mis võimaldab teil faile hõlpsalt kompileerida.
1
2
3
4
5
6
7
8
|
const ahmima= nõudma('närima');
const browserify= nõudma('gulp-browserify');
gulp.task("js", funktsioon() {
gulp.src('src/*.js', { lugenud: vale })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});
|
Probleem, millega kiiresti kokku puutute, on see, et failidega töötamiseks ja nende käigupealt uuesti kompileerimiseks peate kõik failid sõeluma. See on väga kallis. Sirvige peab laadima kõik teie failid, aga ka kõik kasutatavad sõltuvused. Mida suuremaks teie projekt läheb, seda kiiremini aeg läheb. Lisaks, kui kasutate muudab comme Babelify ajad paisuvad veelgi kiiremini (kõigi Babeli kaudu saadaolevate pistikprogrammide loend). Samuti kõigi nimekiri Sirvige teisendusi.
Enne kui näitan teile lõplikku lahendust, vaata, milline võiks lahendus välja näha koos klassikaga närimiskell.
1
2
3
4
5
|
gulp.task("vaata", funktsioon () {
gulp.watch("./src/*.js", ["js"]).me("muutus", funktsioon(sündmus) {
lohutada.log(`Fail ${event.path} olnud ${event.type}`);
});
});
|
Selle lahendusega käivitatakse iga kord, kui muudate mõnda faili, terve kompilatsioon.
Jälgige
Jälgige muudab failide kompileerimise tõhusaks Sirvige. See säilitab mällu iga faili kompileerimise tulemused (kõik teie failiga lingitud failid, nt sõltuvused…).
Kui faili värskendatakse, värskendab see äsja muudetud faili sõrmejälge ja genereerib a kimp ilma kõiki oma sõltuvusi analüüsimata.
Kasutage Gulp, Browserify ja Watchify – tase ∞
Node.js-sõltuvuste installimine
Saate need paigaldada lõngaga (kui olete tõesti kursis 🙂)!
1
|
$ yarn add browserify gulp vinyl-buffer vinyl-source-stream watchify –dev
|
Vastasel juhul kasutate vana head NPM-i 🙉
1
|
$ npm install browserify gulp vinyl-buffer vinyl-source-stream watchify –save-dev
|
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
; const browserify= nõudma("brauseri"),
puhver = nõudma("vinüülpuhver"),
ahmima= nõudma("närima"),
tee = nõudma("tee"),
allikas = nõudma("vinüülallika voog"),
kasutaja = nõudma("närimine-util"),
jälgima = nõudma("jälgi"),
src = {
js: "./src/main.js"
},
sihtkoht = {
js: "./build/"
};
laskma komplekteerija;
funktsioon kimbud(profiil) {
if (kimp === undefined) {
if (profiil === "vaata") {
bundler = watchify(browserify(src.js));
} teine {
bundler = browserify(src.js);
}
}
bundle();
}
funktsioon kimp() {
laskma algus = uus kuupäev().getTime(),
_ = komplekteerija
.bundle()
.we("viga", util.log.bind(util, "Browserify Error"))
.pipe(source("main.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
aeg = uus kuupäev().getTime() – algus;
util.log("[browserify] rebundle võttis" , use.colors.cyan(`${time} ms`), util.colors.grey(`(${src.js})`));
tagasipöördumine _;
}
gulp.task("js", bundles.bind(tühjaks));
gulp.task("vaata", funktsioon () {
kimbud ("vaata");
bundler.on("värskendus", bundle.bind(tühjaks));
});
gulp.task("vaikimisi", ["vaata", "js"]);
|
Siin on väga lihtsustatud, kuid funktsionaalne näide. Seda koodi saab veelgi lihtsustada, kuid see näitab koodi, mis tuleb koostada a käsitlemiseks kuum uuesti laadimine tõhus.
Teie ülesande lihtsustamiseks pakun teile arhiivi a guplfile.js täielikum, mis tegeleb failide kompileerimisega JavaScript koos Babel (ja mõned presets nagu ES2015), aga ka faile vähem profiile haldades nagu développement koos või ilma vaatama aga ka tootmine koos minimeerimisega!
järeldus
Seda on täiesti võimalik kasutada Sirvige tõhusalt koos Suutäis eeldusel, et mängite API. See sunnib teid pisut kõrvale kalduma ja ilma pistikprogrammideta hakkama saama Suutäis mida me tavaliselt kasutame.