Optimieren Sie Ihre Zusammenstellungen mit Gulp, Browserify und Watchify
Browserify wird immer mehr zu einer praktikablen Lösung für die Entwicklung von Skripten JS und Vorschlagen einer Syntax nach dem Vorbild von Node.js. Kompilieren Sie Skripte mit Browserify Ist einfach. Während der Entwicklung ist die Verwendung von Beobachten ermöglicht es Ihnen, Dateien im Handumdrehen zu kompilieren. Trotzdem, wenn Sie Ihre Zusammenstellung mit anderen Aufgaben integrieren möchten Schluck (wie das Kompilieren von Dateien Weniger), stoßen Sie auf ein Problem: wie zu verwenden beobachten zur gleichen Zeit wie Schluck-Uhr. Antworten Sie in diesem Artikel!
Zusammenfassung
Verwenden Sie Gulp und Browserify – Level 0
Verwendung Schluck et Browserify ist ganz einfach. Sie können die Browserify-API verwenden oder einfacher vorgehen und gulp-browserify verwenden, mit dem Sie Ihre Dateien einfach kompilieren können.
|
1
2
3
4
5
6
7
8
|
const Schluck = erfordern('Schluck');
const browserify= erfordern('gulp-browserify');
schluck.task('js', Funktion() {
Schluck.src('src/*.js', { lesen: falsch })
.pipe(browserify())
.pipe(schluck.dest('./bauen/'))
});
|
Das Problem, auf das Sie schnell stoßen, ist, dass Sie alle Dateien parsen müssen, um an Ihren Dateien zu arbeiten und sie spontan neu kompilieren zu lassen. Das ist sehr teuer. Browserify müssen alle Ihre Dateien laden, aber auch alle Abhängigkeiten, die Sie verwenden. Je größer Ihr Projekt wird, desto schneller vergeht die Zeit. Zusätzlich, wenn Sie verwenden Transformationen sowie Babylonisieren Die Zeiten werden noch schneller anschwellen (Liste aller über Babel verfügbaren Plugins). Auch die Liste aller Browserify-Transformationen.
Bevor ich Ihnen die endgültige Lösung zeige, sehen Sie hier, wie eine Lösung mit dem Klassiker aussehen würde Schluck-Uhr.
|
1
2
3
4
5
|
schluck.task("betrachten", Funktion () {
schluck.watch(„./src/*.js“, [„js“]).Wir("ändern", Funktion(Event) {
trösten.Protokoll(„Datei ${event.path} wurde ${event.type}`);
});
});
|
Mit dieser Lösung wird jedes Mal, wenn Sie eine Ihrer Dateien ändern, eine ganze Zusammenstellung gestartet.
Beobachten
Beobachten macht es effizient, Ihre Dateien mit zu kompilieren Browserify. Es speichert das Ergebnis der Kompilierung jeder Datei (alle Dateien, die mit Ihrer Datei verknüpft sind, z. B. Abhängigkeiten …).
Wenn eine Datei aktualisiert wird, aktualisiert sie den Fingerabdruck der gerade geänderten Datei und generiert eine bündeln ohne all Ihre Abhängigkeiten zu analysieren.
Verwenden Sie Gulp, Browserify und Watchify – Level ∞
Installieren von Node.js-Abhängigkeiten
Du kannst sie mit Yarn installieren (wenn du wirklich auf dem Laufenden bist 🙂)!
|
1
|
$ Garn hinzufügen Browserify schlucken Vinyl-Puffer Vinyl-Quellstream Watchify –dev
|
Ansonsten nutzt du das gute alte NPM 🙉
|
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= erfordern(„browserify“),
Puffer = erfordern("Vinylpuffer"),
Schluck = erfordern("Schluck"),
Weg = erfordern("Weg"),
Quelle = erfordern(„Vinyl-Source-Stream“),
Benutzer = erfordern(„schluck-util“),
watchify= erfordern(„beobachten“),
Quelle = {
js: „./src/main.js“
},
Ziel = {
js: "./bauen/"
};
lassen Bündler;
Funktion Bündel(profile) {
if (Paket === undefined) {
if (Profil === "betrachten") {
Bundler = watchify(browserify(src.js));
} sonst {
Bundler = Browserify (src.js);
}
}
bündeln();
}
Funktion bündeln() {
lassen Anfang = neu Datum().Zeit bekommen(),
_ = Bündler
.bündeln()
.Wir("Fehler", util.log.bind(util, „Browserify-Fehler“))
.pipe(Quelle(„main.js“))
.pipe(Puffer())
.pipe(gulp.dest(dest.js)),
Zeit = neu Datum().getTime() – starten;
util.log("[browserify] Neubündelung dauerte" , benutze.colors.cyan(`${Zeit} Frau`), util.colors.grey(`(${src.js})`));
Rückkehr _;
}
schluck.task(„js“, Bundles.bind(null));
schluck.task("betrachten", Funktion () {
Bündel("betrachten");
Bundler.on("Aktualisieren", Bundle.bind(null));
});
schluck.task("Standard", ["betrachten", „js“]);
|
Hier haben Sie ein extrem vereinfachtes, aber funktionsfähiges Beispiel. Dieser Code könnte weiter vereinfacht werden, aber er zeigt Ihnen eine Skizze des Codes, der zur Handhabung von a erstellt werden muss Hot Reload wirksam.
Um Ihre Aufgabe zu vereinfachen, stelle ich Ihnen ein Archiv mit a zur Verfügung guplfile.js vollständiger, das das Kompilieren von Dateien behandelt JavaScript mit Babel (und Presets wie ES2015), sondern auch Dateien Weniger beim Verwalten von Profilen wie développement mit oder ohne ZEIT FÜR STORYTELLING aber auch Produktion mit Minifikation!
Zusammenfassung
Es ist durchaus möglich, zu verwenden Browserify effektiv mit Schluck vorausgesetzt du spielst mit API. Das zwingt Sie dazu, ein wenig abseits der ausgetretenen Pfade zu gehen und auf Plugins zu verzichten Schluck die wir normalerweise verwenden.
