So nutzen Sie die Maschinen: Mit Task Runnern produktiv sein

Task-Runner sind die Helden (oder Bösewichte, je nach Sichtweise), die im Stillen hinter den meisten Web- und Mobilanwendungen arbeiten. Task Runner bieten einen Mehrwert durch die Automatisierung zahlreicher Entwicklungsaufgaben wie das Verketten von Dateien, das Hochfahren von Entwicklungsservern und das Kompilieren von Code. In diesem Artikel behandeln wir Grunt-, Gulp-, Webpack- und npm-Skripte. Wir werden auch einige Beispiele für jeden bereitstellen, um Ihnen den Einstieg zu erleichtern. Gegen Ende werde ich einige einfache Gewinne und Tipps für die Integration von Ideen aus diesem Beitrag in Ihre Anwendung herausgeben.

Es besteht die Meinung, dass Task-Runner und JavaScript-Fortschritte im Allgemeinen die Front-End-Landschaft übermäßig verkomplizieren. Ich stimme zu, dass es nicht immer die beste Nutzung Ihrer Zeit ist, den ganzen Tag damit zu verbringen, Build-Skripte zu optimieren, aber Task-Runner haben einige Vorteile, wenn sie richtig und in Maßen verwendet werden. Das ist unser Ziel in diesem Artikel, die Grundlagen der beliebtesten Task-Runner schnell zu behandeln und solide Beispiele zu liefern, um Ihre Vorstellungskraft anzuregen, wie diese Tools in Ihren Workflow passen können.

Weiterführende Literatur zu SmashingMag:

• Werden Sie ein Befehlszeilen-Power-User mit Oh-My-ZSH und Z
• Eine Einführung in PostCSS
• Steh auf und laufe mit Grunt
• Bauen mit Schluck

Ein Hinweis zur Befehlszeile

Task-Runner und Build-Tools sind hauptsächlich Befehlszeilen-Tools. In diesem Artikel gehe ich von einem angemessenen Maß an Erfahrung und Kompetenz bei der Arbeit mit der Befehlszeile aus. Wenn Sie verstehen, wie man allgemeine Befehle wie cd , ls , cp und mv verwendet, sollten Sie in Ordnung sein, wenn wir die verschiedenen Beispiele durchgehen. Wenn Sie sich mit diesen Befehlen nicht wohl fühlen, finden Sie im Smashing Magazine einen großartigen Einführungsbeitrag. Beginnen wir mit dem Urvater von allen: Grunt.

Grunzen

Grunt war der erste beliebte Task-Runner auf JavaScript-Basis. Ich verwende Grunt in irgendeiner Form seit 2012. Die Grundidee hinter Grunt ist, dass Sie eine spezielle JavaScript-Datei, Gruntfile.js , verwenden, um verschiedene Plugins zu konfigurieren, um Aufgaben zu erledigen. Es verfügt über ein riesiges Ökosystem von Plugins und ist ein sehr ausgereiftes und stabiles Tool. Grunt hat ein fantastisches Webverzeichnis, das die meisten Plugins (derzeit etwa 5.500) indiziert. Das einfache Genie von Grunt ist seine Kombination aus JavaScript und der Idee einer gemeinsamen Konfigurationsdatei (wie ein Makefile), die es viel mehr Entwicklern ermöglicht hat, zu Grunt beizutragen und es in ihren Projekten zu verwenden. Das bedeutet auch, dass Grunt unter dasselbe Versionskontrollsystem gestellt werden kann wie der Rest des Projekts.

Grunt ist kampferprobt und stabil. Ungefähr zum Zeitpunkt des Schreibens wurde Version 1.0.0 veröffentlicht, was eine große Leistung für das Grunt-Team darstellt. Da Grunt weitgehend verschiedene Plugins so konfiguriert, dass sie zusammenarbeiten, kann es ziemlich schnell durcheinander kommen (dh chaotisch und verwirrend zu ändern). Mit ein wenig Sorgfalt und Organisation (Aufteilen von Aufgaben in logische Dateien!) können Sie jedoch für jedes Projekt Wunder bewirken.

In dem seltenen Fall, dass ein Plugin nicht verfügbar ist, um die benötigte Aufgabe zu erfüllen, stellt Grunt eine Dokumentation bereit, wie Sie Ihr eigenes Plugin schreiben können. Alles, was Sie wissen müssen, um Ihr eigenes Plugin zu erstellen, ist JavaScript und die Grunt-API. Sie müssen fast nie Ihr eigenes Plugin erstellen, also schauen wir uns an, wie Sie Grunt mit einem ziemlich beliebten und nützlichen Plugin verwenden können!

Ein Beispiel

Schauen wir uns an, wie Grunt tatsächlich funktioniert. Das Ausführen von grunt in der Befehlszeile löst das Grunt-Befehlszeilenprogramm aus, das nach Gruntfile.js im Stammverzeichnis des Verzeichnisses sucht. Gruntfile.js enthält die Konfiguration, die steuert, was Grunt tun wird. In diesem Sinne kann Gruntfile.js als eine Art Kochbuch angesehen werden, dem der Koch (dh Grunt, das Programm) folgt; und wie jedes gute Kochbuch enthält Gruntfile.js viele Rezepte (dh Aufgaben).

Wir werden Grunt auf Herz und Nieren prüfen, indem wir das Grunticon-Plugin verwenden, um Symbole für eine hypothetische Web-App zu generieren. Grunticon nimmt ein Verzeichnis von SVGs auf und spuckt mehrere Assets aus:

• eine CSS-Datei mit den Base-64-codierten SVGs als Hintergrundbilder;
• eine CSS-Datei mit PNG-Versionen der Base-64-kodierten SVGs als Hintergrundbilder;
• eine CSS-Datei, die für jedes Symbol auf eine einzelne PNG-Datei verweist.

Die drei verschiedenen Dateien repräsentieren die verschiedenen Fähigkeiten von Browsern und Mobilgeräten. Moderne Geräte erhalten die hochauflösenden SVGs als einzelne Anfrage (dh eine einzelne CSS-Datei). Browser, die keine SVGs, aber Base-64-codierte Assets verarbeiten, erhalten das Base-64-PNG-Stylesheet. Schließlich erhalten alle Browser, die diese beiden Szenarien nicht verarbeiten können, das „traditionelle“ Stylesheet, das PNGs referenziert. All dies aus einem einzigen SVG-Verzeichnis!

Die Konfiguration dieser Aufgabe sieht folgendermaßen aus:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

Gehen wir hier die verschiedenen Schritte durch:

1. Sie müssen Grunt global installiert haben.
2. Erstellen Sie die Gruntfile.js -Datei im Stammverzeichnis des Projekts. Am besten installieren Sie Grunt auch als npm-Abhängigkeit in Ihrer package.json -Datei zusammen mit Grunticon über npm i grunt grunt-grunticon --save-dev .
3. Erstellen Sie ein Verzeichnis mit SVGs und ein Zielverzeichnis (wo die erstellten Assets abgelegt werden).
4. Platzieren Sie ein kleines Skript im head Ihres HTML-Codes, das bestimmt, welche Symbole geladen werden sollen.

So sollte Ihr Verzeichnis aussehen, bevor Sie die Grunticon-Aufgabe ausführen:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

Sobald diese Dinge installiert und erstellt sind, können Sie das obige Code-Snippet in Gruntfile.js . Sie sollten dann in der Lage sein, grunt grunticon von der Befehlszeile aus auszuführen und zu sehen, wie Ihre Aufgabe ausgeführt wird.

Das obige Snippet macht ein paar Dinge:

• fügt Grunt in Zeile 32 ein neues Konfigurationsobjekt mit dem Namen config grunticon ;
• füllt die verschiedenen Optionen und Parameter für Grunticon im icons -Objekt aus;
• zieht schließlich das Grunticon-Plugin über loadNPMTasks .

So sollte Ihr Verzeichnis nach Grunticon aussehen:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

Los geht’s – fertig! In ein paar Konfigurationszeilen und ein paar Paketinstallationen haben wir die Generierung unserer Icon-Assets automatisiert! Hoffentlich verdeutlicht dies die Leistungsfähigkeit von Task Runnern: Zuverlässigkeit, Effizienz und Portabilität.

Schluck: LEGO-Blöcke für Ihr Bausystem

Gulp entstand irgendwann nach Grunt und strebte danach, ein Build-Tool zu sein, das nicht nur Konfiguration, sondern tatsächlicher Code war. Die Idee hinter Code über Konfiguration ist, dass Code viel aussagekräftiger und flexibler ist als die Änderung endloser Konfigurationsdateien. Die Hürde bei Gulp ist, dass es mehr technisches Wissen erfordert als Grunt. Sie müssen mit der Node.js-Streaming-API vertraut sein und sich beim Schreiben von einfachem JavaScript auskennen.

Gulps Verwendung von Node.js-Streams ist der Hauptgrund, warum es schneller als Grunt ist. Die Verwendung von Streams bedeutet, dass Gulp anstelle des Dateisystems als „Datenbank“ für Dateitransformationen In-Memory-Transformationen verwendet. Weitere Informationen zu Streams finden Sie in der Node.js-Streams-API-Dokumentation zusammen mit dem Stream-Handbuch.

Ein Beispiel

Wie im Grunt-Abschnitt werden wir Gulp mit einem einfachen Beispiel auf Herz und Nieren prüfen: das Verketten unserer JavaScript-Module in einer einzigen App-Datei.

Das Ausführen von Gulp ist dasselbe wie das Ausführen von Grunt. Das Befehlszeilenprogramm gulp sucht nach dem Kochbuch der Rezepte (dh Gulpfile.js ) in dem Verzeichnis, in dem es ausgeführt wird.

Die Begrenzung der Anzahl der Anfragen pro Seite gilt als Best Practice für die Webleistung (insbesondere auf Mobilgeräten). Die Zusammenarbeit mit anderen Entwicklern ist jedoch viel einfacher, wenn die Funktionalität in mehrere Dateien aufgeteilt wird. Geben Sie Task-Runner ein. Wir können Gulp verwenden, um die mehreren JavaScript-Dateien für unsere Anwendung zu kombinieren, sodass mobile Clients eine einzelne Datei statt vieler laden müssen.

Gulp hat das gleiche riesige Ökosystem von Plugins wie Grunt. Um diese Aufgabe zu vereinfachen, stützen wir uns auf das gulp-concat-Plugin. Nehmen wir an, die Struktur unseres Projekts sieht so aus:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

Zwei JavaScript-Dateien befinden sich in unserem src -Verzeichnis, und wir möchten sie zu einer Datei, app.js , in unserem dist/ -Verzeichnis kombinieren. Wir können die folgende Gulp-Aufgabe verwenden, um dies zu erreichen.

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

Die wichtigen Bits befinden sich im gulp.task Callback. Dort verwenden wir die gulp.src API, um alle Dateien mit der .js in unserem src -Verzeichnis abzurufen. Die gulp.src API gibt einen Stream dieser Dateien zurück, die wir dann (über die pipe -API) an das gulp-concat-Plugin übergeben können. Das Plugin verkettet dann alle Dateien im Stream und übergibt sie an die Funktion gulp.dest . Die gulp-dest Funktion schreibt einfach die empfangene Eingabe auf die Festplatte.

Sie können sehen, wie Gulp Streams verwendet, um uns „Bausteine“ oder „Ketten“ für unsere Aufgaben zu geben. Ein typischer Gulp-Workflow sieht folgendermaßen aus:

1. Holen Sie sich alle Dateien eines bestimmten Typs.
2. Übergeben Sie diese Dateien an ein Plugin (concat!) oder führen Sie eine Transformation durch.
3. Übergeben Sie diese transformierten Dateien an einen anderen Block (in unserem Fall den dest , der unsere Kette beendet).

Wie im Grunt-Beispiel löst das einfache Ausführen von gulp im Stammverzeichnis unseres Projektverzeichnisses die in der Datei Gulpfile.js definierte default aus. Diese Aufgabe verkettet unsere Dateien und lässt uns mit der Entwicklung unserer App oder Website fortfahren.

Webpaket

Der neueste Neuzugang im JavaScript-Task-Runner-Club ist Webpack. Webpack bezeichnet sich selbst als „Modul-Bundler“, was bedeutet, dass es mithilfe von Modulmustern wie dem CommonJS-Muster dynamisch ein Bündel von JavaScript-Code aus mehreren separaten Dateien erstellen kann. Webpack hat auch Plugins, die es Loader nennt.

Webpack ist noch ziemlich jung und hat eine ziemlich dichte und verwirrende Dokumentation. Daher würde ich das Webpack-Repository von Pete Hunt als guten Ausgangspunkt empfehlen, bevor Sie in die offizielle Dokumentation eintauchen. Ich würde Webpack auch nicht empfehlen, wenn Sie neu bei Task Runnern sind oder sich nicht mit JavaScript auskennen. Abgesehen von diesen Problemen ist es immer noch ein spezifischeres Werkzeug als die allgemeine Breite von Grunt und Gulp. Viele Leute verwenden Webpack aus genau diesem Grund zusammen mit Grunt oder Gulp, sodass Webpack sich beim Bündeln von Modulen auszeichnet und Grunt oder Gulp allgemeinere Aufgaben erledigen lässt.

Mit Webpack können wir letztendlich Code im Node.js-Stil für den Browser schreiben, ein großer Gewinn für die Produktivität und eine saubere Trennung von Anliegen in unserem Code über Module. Verwenden wir Webpack, um das gleiche Ergebnis wie beim Gulp-Beispiel zu erzielen, indem wir mehrere JavaScript-Dateien in einer App-Datei kombinieren.

Ein Beispiel

Webpack wird häufig mit Babel verwendet, um ES6-Code in ES5 zu transpilieren. Durch das Transpilieren von Code von ES6 auf ES5 können Entwickler den aufkommenden ES6-Standard verwenden und gleichzeitig ES5 für Browser oder Umgebungen bereitstellen, die ES6 noch nicht vollständig unterstützen. In diesem Beispiel konzentrieren wir uns jedoch darauf, ein einfaches Bündel unserer beiden Dateien aus dem Gulp-Beispiel zu erstellen. Zunächst müssen wir Webpack installieren und eine Konfigurationsdatei webpack.config.js erstellen. So sieht unsere Datei aus:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

In diesem Beispiel verweisen wir Webpack auf unsere Datei src/foo.js , um damit zu beginnen, unseren Abhängigkeitsgraphen zu durchlaufen. Wir haben auch unsere foo.js -Datei so aktualisiert, dass sie wie folgt aussieht:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

Und wir haben unsere bar.js -Datei so aktualisiert, dass sie so aussieht:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

Dies ist ein sehr einfaches CommonJS-Beispiel. Sie werden feststellen, dass diese Dateien jetzt eine Funktion „exportieren“. Im Wesentlichen ermöglichen uns CommonJS und Webpack, unseren Code in eigenständige Module zu organisieren, die in unserer gesamten Anwendung importiert und exportiert werden können. Webpack ist intelligent genug, um den Import- und Exportschlüsselwörtern zu folgen und alles in einer Datei, dist/app.js , zu bündeln. Wir müssen keine Verkettungsaufgabe mehr pflegen, sondern müssen uns stattdessen einfach an eine Struktur für unseren Code halten. Viel besser!

Verlängerung

Webpack ähnelt Gulp darin, dass „es nur JavaScript ist“. Es kann über sein Ladesystem erweitert werden, um andere Task-Runner-Aufgaben zu erledigen. Beispielsweise können Sie css-loader und sass-loader verwenden, um Sass in CSS zu kompilieren und sogar Sass in Ihrem JavaScript zu verwenden, indem Sie das require CommonJS-Muster überladen! Ich plädiere jedoch normalerweise dafür, Webpack ausschließlich zum Erstellen von JavaScript-Modulen zu verwenden und einen anderen, allgemeineren Ansatz zum Ausführen von Aufgaben zu verwenden (z. B. Webpack- und npm-Skripte oder Webpack und Gulp, um alles andere zu erledigen).

npm-Skripte

npm-Skripte sind der neueste Hipster-Wahn, und das aus gutem Grund. Wie wir bei all diesen Tools gesehen haben, kann die Anzahl der Abhängigkeiten, die sie möglicherweise in ein Projekt einführen, schließlich außer Kontrolle geraten. Der erste Beitrag, den ich sah, der sich für npm-Skripte als Einstiegspunkt für einen Build-Prozess aussprach, war von James Halliday. Sein Beitrag fasst die ignorierte Kraft von npm-Skripten perfekt zusammen (Hervorhebung von mir):

Es gibt einige ausgefallene Tools für die Build-Automatisierung in JavaScript-Projekten, die ich nie angesprochen habe, da der weniger bekannte Befehl npm run für alles, was ich tun musste, vollkommen ausreichend war, während er einen sehr geringen Konfigurationsbedarf beibehielt.

Hast du das letzte bisschen am Ende verstanden? Der Hauptvorteil von npm-Skripten besteht darin, dass sie einen „sehr geringen Konfigurationsbedarf“ haben. Dies ist einer der Hauptgründe, warum sich npm-Skripte durchgesetzt haben (leider fast vier Jahre später). Mit Grunt, Gulp und sogar Webpack beginnt man schließlich, in Plugins zu ertrinken, die Binärdateien umschließen und die Anzahl der Abhängigkeiten in einem Projekt verdoppeln.

Keith Cirkel hat das Go-to-Tutorial zur Verwendung von npm als Ersatz für Grunt oder Gulp. Er stellt die Blaupause bereit, wie Sie die Leistungsfähigkeit von npm-Skripten voll ausschöpfen können, und er hat ein wichtiges Plugin eingeführt, Parallel Shell (und eine Vielzahl ähnlicher).

Ein Beispiel

In unserem Abschnitt über Grunt haben wir das beliebte Modul Grunticon genommen und SVG-Symbole (mit PNG-Fallbacks) in einer Grunt-Aufgabe erstellt. Dies war früher der einzige Schmerzpunkt mit npm-Skripten für mich. Für eine Weile ließ ich Grunt für Projekte installiert, nur um Grunticon zu verwenden. Ich habe Grunt in meiner npm-Aufgabe buchstäblich „bezahlt“, um die Einführung eines Task-Runners zu erreichen (oder, wie wir es bei der Arbeit nannten, ein Build-Tool-Turducken). Zum Glück hat The Filament Group, die fantastische Gruppe hinter Grunticon, eine eigenständige (dh Grunt-freie) Version ihres Tools, Grunticon-Lib, veröffentlicht. Verwenden wir es also, um einige Symbole mit npm-Skripten zu erstellen!

Dieses Beispiel ist etwas fortgeschrittener als eine typische npm-Skriptaufgabe. Eine typische npm-Skriptaufgabe ist ein Aufruf eines Befehlszeilentools mit den entsprechenden Flags oder der Konfigurationsdatei. Hier ist eine typischere Aufgabe, die unser Sass zu CSS kompiliert:

 "sass": "node-sass src/scss/ -o dist/css",

Sehen Sie, wie es nur eine Zeile mit verschiedenen Optionen ist? Keine Aufgabendatei erforderlich, kein Build-Tool zum Hochfahren – einfach npm run sass von der Befehlszeile aus ausführen, und Sass ist jetzt CSS. Eine wirklich nette Funktion von npm-Skripten ist, wie Sie Skriptaufgaben miteinander verketten können. Angenommen, wir möchten eine Aufgabe ausführen, bevor unsere Sass-Aufgabe ausgeführt wird. Wir würden einen neuen Skripteintrag wie folgt erstellen:

 "presass": "echo 'before sass',

Richtig: npm versteht das pre- . Es versteht auch das post- Präfix. Jeder Skripteintrag mit demselben Namen wie ein anderer Skripteintrag mit einem pre- oder post- wird vor oder nach diesem Eintrag ausgeführt.

Das Konvertieren unserer Symbole erfordert eine aktuelle Node.js-Datei. Es ist aber nicht zu ernst. Erstellen Sie einfach ein tasks und eine neue Datei mit dem Namen grunticon.js oder icons.js oder was auch immer für diejenigen, die an dem Projekt arbeiten, sinnvoll ist. Sobald die Datei erstellt ist, können wir etwas JavaScript schreiben, um unseren Grunticon-Prozess auszulösen.

Hinweis: Alle diese Beispiele verwenden ES6, also verwenden wir babel-node, um unsere Aufgabe auszuführen. Sie können problemlos ES5 und Node.js verwenden, wenn das bequemer ist.

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

Lassen Sie uns in den Code einsteigen und herausfinden, was los ist.

1. Wir import (dh benötigen) zwei Bibliotheken, grunticon-lib und globby . Globby ist eines meiner Lieblingstools und macht die Arbeit mit Dateien und Globs so einfach. Globby erweitert Node.js Glob (wählen Sie alle JavaScript-Dateien über ./*.js ) mit Promise-Unterstützung. In diesem Fall verwenden wir es, um alle Dateien im Verzeichnis src/icons abzurufen.
2. Sobald wir das getan haben, setzen wir ein paar options in einem Optionsobjekt und rufen dann die Grunticon-Lib mit drei Argumenten auf:
   • die Icon-Dateien,
   • das Ziel,
   • die Optionen. Die Bibliothek übernimmt und kaut auf diesen Symbolen herum und erstellt schließlich die SVG- und PNG-Versionen im gewünschten Verzeichnis.
3. Wir sind fast fertig. Denken Sie daran, dass sich dies in einer separaten Datei befindet und wir einen „Hook“ hinzufügen müssen, um diese Datei von unserem npm-Skript aus aufzurufen, wie folgt: "icons": "babel-node tasks/icons.js" .
4. Jetzt können wir npm run icons , und unsere Symbole werden jedes Mal erstellt.

npm-Skripte bieten ein ähnliches Maß an Leistung und Flexibilität wie andere Task-Runner, ohne die Plugin-Schulden.

Aufschlüsselung der hier behandelten Task Runner

Einige leichte Gewinne

All diese Beispiele und Task-Runner scheinen überwältigend zu sein, also lassen Sie es uns aufschlüsseln. Zunächst hoffe ich, dass Sie aus diesem Artikel nicht mitnehmen, dass jeder Task-Runner oder jedes Build-System, das Sie gerade verwenden, sofort durch eines der hier erwähnten ersetzt werden muss. Ein solcher Austausch wichtiger Systeme sollte nicht unüberlegt erfolgen. Hier ist mein Ratschlag für das Upgrade eines bestehenden Systems: Tun Sie es inkrementell.

Wrapper-Skripte!

Ein inkrementeller Ansatz besteht darin, einige „Wrapper“-npm-Skripts um Ihre vorhandenen Task-Runner zu schreiben, um ein gemeinsames Vokabular für Build-Schritte bereitzustellen, das außerhalb des tatsächlich verwendeten Task-Runners liegt. Ein Wrapper-Skript könnte so einfach sein:

 { "scripts": { "start": "gulp" } }

Viele Projekte verwenden die start und test npm-Skriptblöcke, um neuen Entwicklern dabei zu helfen, sich schnell einzugewöhnen. Ein Wrapper-Skript fügt Ihrer Task-Runner-Build-Kette eine weitere Abstraktionsebene hinzu, aber ich denke, es lohnt sich, um die npm-Primitive (z. B. test ) zu standardisieren. Die npm-Befehle haben eine längere Lebensdauer als ein einzelnes Tool.

Streuen Sie ein kleines Webpack hinein

Wenn Sie oder Ihr Team den Schmerz verspüren, eine spröde „Bundle-Reihenfolge“ für Ihr JavaScript aufrechtzuerhalten, oder wenn Sie auf ES6 upgraden möchten, sollten Sie dies als Gelegenheit betrachten, Webpack in Ihr bestehendes Task-Running-System einzuführen. Webpack ist insofern großartig, als Sie so viel oder so wenig davon verwenden können, wie Sie möchten, und dennoch einen Mehrwert daraus ziehen. Beginnen Sie einfach damit, Ihren Anwendungscode zu bündeln, und fügen Sie dann babel-loader hinzu. Webpack verfügt über eine solche Funktionstiefe, dass es für einige Zeit nahezu alle Ergänzungen oder neuen Funktionen aufnehmen kann.

Einfache Verwendung von PostCSS mit npm-Skripten

PostCSS ist eine großartige Sammlung von Plugins, die CSS transformieren und verbessern, sobald es geschrieben und vorverarbeitet wurde. Mit anderen Worten, es ist ein Postprozessor. Es ist einfach genug, PostCSS mit npm-Skripten zu nutzen. Angenommen, wir haben ein Sass-Skript wie in unserem vorherigen Beispiel:

 "sass": "node-sass src/scss/ -o dist/css",

Wir können die lifecycle von npm script verwenden, um ein Skript hinzuzufügen, das automatisch nach der Sass-Aufgabe ausgeführt wird:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

Dieses Skript wird jedes Mal ausgeführt, wenn das Sass-Skript ausgeführt wird. Das Paket postcss-cli ist großartig, da Sie die Konfiguration in einer separaten Datei angeben können. Beachten Sie, dass wir in diesem Beispiel einen weiteren Skripteintrag hinzufügen, um eine neue Aufgabe auszuführen; Dies ist ein häufiges Muster bei der Verwendung von npm-Skripten. Sie können einen Workflow erstellen, der alle verschiedenen Aufgaben erfüllt, die Ihre App benötigt.

Fazit

Task Runner können echte Probleme lösen. Ich habe Task-Runner verwendet, um verschiedene Builds einer JavaScript-Anwendung zu kompilieren, je nachdem, ob das Ziel die Produktion oder die lokale Entwicklung war. Ich habe auch Task Runner verwendet, um Handlebars-Vorlagen zu kompilieren, eine Website für die Produktion bereitzustellen und automatisch Anbieterpräfixe hinzuzufügen, die in meinem Sass fehlen. Dies sind keine trivialen Aufgaben, aber sobald sie in einen Task Runner verpackt wurden, wurden sie mühelos.

Task Runner entwickeln sich ständig weiter und verändern sich. Ich habe versucht, die am häufigsten verwendeten im aktuellen Zeitgeist abzudecken. Es gibt jedoch andere, die ich noch nicht einmal erwähnt habe, wie Broccoli, Brunch und Harp. Denken Sie daran, dass dies nur Werkzeuge sind: Verwenden Sie sie nur, wenn sie ein bestimmtes Problem lösen, nicht weil alle anderen sie verwenden. Viel Spaß beim Ausführen der Aufgabe!