Gulp, Browserify ve Watchify ile derlemelerinizi optimize edin
tarayıcı komut dosyaları geliştirmek için giderek daha uygun bir çözüm haline geliyor JS ve buna göre modellenmiş bir sözdizimi önermek node.js. Komut dosyalarını şununla derleyin: tarayıcı Basit. Gelişmeler sırasında, kullanımı İzle dosyaları anında derlemenizi sağlar. Buna rağmen derlemenizi diğer görevlerle entegre etmek istediğinizde Yudum (dosyaları derlemek gibi Az), bir sorunla karşılaşırsanız: nasıl kullanılır izle aynı zamanda yudum izle. Cevabı bu yazıda!
özet
Gulp ve Browserify Kullanın – Seviye 0
utiliser Yudum et tarayıcı oldukça basit. Browserify API'yi kullanabilir veya daha basite gidebilir ve dosyalarınızı kolayca derlemenizi sağlayacak gulp-browserify'ı kullanabilirsiniz.
|
1
2
3
4
5
6
7
8
|
const yutkunmak= gerektirir('yudum');
const tarayıcılaştır = gerektirir('gulp-tarayıcı');
yudum.görev("js", işlev() {
gulp.src('kaynak/*.js', { okumak: yanlış })
.pipe(browserify())
.pipe(gulp.dest('./inşa etmek/'))
});
|
Hızlı bir şekilde karşılaştığınız sorun, dosyalarınız üzerinde çalışmak ve anında yeniden derlenmelerini sağlamak için tüm dosyaları ayrıştırmanız gerekmesidir. Bu çok pahalı. tarayıcı tüm dosyalarınızı ve ayrıca kullandığınız tüm bağımlılıkları yüklemek zorunda kalacak. Projeniz ne kadar büyük olursa, zaman o kadar hızlı geçer. Ek olarak, kullanırsanız dönüşümler olarak Babelleştirmek zamanlar daha da hızlı artacak (Babel aracılığıyla kullanılabilen tüm eklentilerin listesi). Ayrıca hepsinin listesi Browserify dönüşümleri.
Size nihai çözümü göstermeden önce, klasik çözümle bir çözümün nasıl görüneceği aşağıda açıklanmıştır yudum izle.
|
1
2
3
4
5
|
yudum.görev("kol saati", işlev () {
yudum.izle(“./src/*.js”, [“js”]).Biz("değiştirmek", işlev(olay) {
konsol.kayıt(`Dosya ${event.path} olmuş ${event.type}`);
});
});
|
Bu çözümle, dosyalarınızdan birini her değiştirdiğinizde, bütün bir derleme başlatılır.
İzle
İzle ile dosyalarınızı derlemenizi verimli hale getirir tarayıcı. Her dosyanın derlenmesinin sonucunu (bağımlılıklar gibi dosyanıza bağlı tüm dosyalar…) bellekte tutacaktır.
Bir dosya güncellendiğinde, yeni değiştirilen dosyanın parmak izini günceller ve bir demet tüm bağımlılıklarınızı ayrıştırmadan.
Gulp, Browserify ve Watchify kullanın – Seviye ∞
Node.js bağımlılıklarını yükleme
Bunları Yarn ile kurabilirsiniz (eğer gerçekten güncelseniz 🙂)!
|
1
|
$ yarn tarayıcı ekle gulp vinyl-buffer vinyl-source-stream watchify –dev
|
Aksi takdirde, eski güzel NPM'yi kullanıyorsunuzdur 🙉
|
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 tarayıcılaştır = gerektirir("tarayıcı"),
tampon = gerektirir("vinil tampon"),
yutkunmak= gerektirir("yudum"),
yol = gerektirir("yol"),
kaynak = gerektirir(“vinil kaynak akışı”),
kullanıcı = gerektirir(“yudum-fayda”),
izle = gerektirir(“izle”),
kaynak = {
js: “./src/main.js”
},
hedef = {
js: "./inşa etmek/"
};
izin paketleyici;
işlev Paketler(profil) {
if (paket === undefined) {
if (profil === "kol saati") {
paketleyici = watchify(browserify(src.js));
} başka {
paketleyici = browserify(src.js);
}
}
paket();
}
işlev demet() {
izin başlangıç = yeni Tarih().getTime(),
_ = paketleyici
.paket()
.Biz("hata", util.log.bind(util, “Browserify Hatası”))
.pipe(kaynak(“ana.js”))
.pipe(tampon())
.pipe(gulp.dest(dest.js)),
zaman = yeni Tarih().getTime() – başlat;
util.log("[browserify] geri ödeme alındı" , use.colors.cyan(`${zaman} ms'), util.colors.grey(`(${src.js})`));
dönüş _;
}
yudum.görev(“js”, paketler.bind(boş));
yudum.görev("kol saati", işlev () {
Paketler("kol saati");
paketleyici.açık("güncelleme", paket.bind(boş));
});
yudum.görev("varsayılan", ["kol saati", “js”]);
|
Burada son derece basitleştirilmiş ancak işlevsel bir örneğiniz var. Bu kod daha da basitleştirilebilir, ancak size bir sorunu işlemek için üretilecek kodun bir taslağını gösterir. sıcak yeniden yükleme Etkili.
Görevinizi basitleştirmek için size bir arşiv sağlıyorum. guplfile.js dosya derlemesini yöneten daha eksiksiz JavaScript ile Babil (ve bazı hazır ES2015 gibi), aynı zamanda dosyalar Az gibi profilleri yönetirken gelişme birlikte veya ayrı izle ama aynı zamanda üretim küçültme ile!
Sonuç
kullanmak oldukça mümkün tarayıcı etkili bir şekilde Yudum oynamak şartıyla API. Bu, sizi alışılmışın biraz dışına çıkmaya ve eklentiler olmadan yapmaya zorlar. Yudum genellikle kullandığımız.
