Die Befehlszeile (Command Line) für Webdesign: Automatisierung mit Grunt

() translation by (you can also view the original English article)

Bis jetzt haben Sie gelernt, wie man Code kompiliert, autoprefixiert, putzt, komprimiert und minimiert, indem Sie einfach ein paar Wörter eingeben. Das ist großartig, aber was ist, wenn Sie ein Projekt haben, bei dem Sie mehrere dieser Befehle nacheinander ausführen müssen, bis Sie Ihre Arbeit abgeschlossen haben? Zum Beispiel:

Kompilieren Sie Präprozessor zu CSS
Autoprefix CSS
Bereinigen Sie CSS
Kompilieren Sie Jade zu HTML
Verketten und reduzieren Sie JavaScript

Selbst mit nur ein paar Worten pro Befehl würde es im Verlauf eines typischen Website-Erstellungsprozesses schnell ermüdend werden.

Hier kommen die "Task Runners" ins Spiel, um den Tag zu retten. Mit Aufgabenläufern können Sie in Ihrem Projekt eine einzelne Datei einrichten, die alle Aufgaben definiert, die Sie in Ihrem Projekt ausführen müssen, und die Reihenfolge, in der sie ausgeführt werden müssen. In dieser Datei können Sie benutzerdefinierte Befehle definieren, mit denen Sie all diese Aufgaben ausführen können Aufgaben einmal.

In diesem Lernprogramm lernen Sie, wie Sie Task-Runner auf diese Weise einrichten. In diesem Prozess sehen Sie außerdem ein Beispiel für das Einbringen von Skripten aus Bower-Paketen zur effizienten Bereitstellung in Ihren Projekten.

Anmerkung: In diesem Lernprogramm wird davon ausgegangen, dass Sie alle vorherigen Tuturials in dieser Serie abgeschlossen haben. Wenn Sie das noch nicht getan haben, werden Sie es als hilfreich empfinden, sie durchzugehen, bevor Sie hier beginnen.

Die "Big Two" Task Runners

Momentan sind mehrere Aufgabenläufer verfügbar, für die Zwecke dieses Tutorials konzentrieren wir uns jedoch auf die zwei derzeit beliebtesten: Grunt und Gulp.

Es gibt einige technische Unterschiede zwischen den beiden Projekten, auf die ich jetzt nicht eingehen werde. Ich werde Ihr auch nicht sagen, welche der beiden Sie benutzen sollen. Stattdessen empfehle ich, die Schritte für die Verwendung beider unten zu befolgen und dann selbst zu entscheiden, welchen Sie bevorzugen.

Erstellen Sie ein Beispielprojekt

Wir werden ein Projekt erstellen, das Stylus und Jade automatisch überwacht und kompiliert und CSS und JavaScript optimiert. Das erreichen wir zuerst mit Grunt und dann (im nächsten Tutorial) mit Gulp.

Zunächst müssen wir ein Beispielprojekt mit einigen Dateien einrichten, auf denen unser Task-Runner arbeiten kann. Erstellen Sie einen Ordner mit dem Namen "Grunt Project" und fügen Sie einen Unterordner namens "build" und einen Unterordner namens "source" hinzu.

Fügen Sie im Ordner "source" zwei neue Unterordner namens "stylus", "jade" hinzu. Fügen Sie jedem Ordner einige Beispieldateien des entsprechenden Typs hinzu.

Die Dateien können beliebigen Code enthalten, nur damit Sie etwas sehen können, an dem der Kompilierungsprozess funktioniert.

Tipp: Wenn Sie sich nicht sicher sind, welchen Code Sie hinzufügen sollen, versuchen Sie, einen Beispielcode von Codepen zu nehmen: Stifte, die mit Griffel markiert sind, Stifte, die mit Jade getaggt sind.

Zum Beispiel:

Wir werden dann auch das nutzen, was wir in einer früheren Lektion über Bower gelernt haben, und uns Downloads von jQuery und Modernizr holen, die wir später zusammenführen und verkleinern werden.

Führen Sie die Befehle aus:

1	bower install jquery --save

1	bower install modernizr --save

Machen Sie nun ein Duplikat Ihres gesamten Projektordners und benennen Sie es in "Gulp Project" um.

Auf diese Weise können Sie die Schritte zur Verwendung von Grunt in Ihrem "Grunt Project" -Ordner und die Schritte zur Verwendung von Gulp in Ihrem "Gulp Project" -Ordner befolgen.

Erste Schritte mit Grunt

Installieren Sie die Grunt-CLI

Damit Grunt-Befehle funktionieren, müssen Sie die CLI (Befehlszeilenschnittstelle) installieren. Installieren Sie es global mit:

1	[sudo] npm install -g grunt-cli

Setup-Projekt für Grunt

Fügen Sie die Datei package.json hinzu

Jedes Projekt, das Grunt verwendet, benötigt eine Datei "package.json" im Stammordner.

Wir haben über die Einrichtung einer "package.json" - Datei mit dem Befehl npm init im vorherigen Taming 3rd Party Packages-Tutorial berichtet. Wenn Sie diesen Abschnitt noch nicht abgeschlossen haben, gehen Sie bitte zurück und folgen Sie ihm jetzt.

Installieren Sie das Grunt-Paket

Installieren Sie Grunt in Ihr Projekt und speichern Sie es als Entwicklungsabhängigkeit mit:

1	npm install grunt --save-dev

Gruntfile hinzufügen

Jedes Grunt-Projekt muss auch eine so genannte Gruntfile im Stammordner haben.

Eine Gruntdatei ist eine Datei namens "Gruntfile.js" oder "Gruntfile.coffee", wenn Sie es vorziehen, in CoffeeScript zu schreiben. In unserem Fall werden wir mit JavaScript arbeiten, also fügen Sie Ihrem Stammordner eine Datei namens "Gruntfile.js" hinzu.

Wenn Sie Ihre Gruntdatei eingeben, können Sie bestimmen, welche Befehle die auszuführenden Aufgaben auslösen. Sie können damit beginnen, einfach eine Basis-Shell in Ihre Grunt-Datei einzufügen. Wir werden später Ihren tatsächlichen Konfigurationscode einrichten.F

ügen Sie Ihrer Gruntfile.js den folgenden Code hinzu:

1	module.exports = function(grunt) {
2
3	};

Installieren Sie Grunt Plugins

Sie werden sich daran erinnern, dass Sie, wenn Sie Pakete mit npm oder Bower verwenden wollten, an der richtigen Stelle suchen mussten, um die Versionen zu erhalten, die für jedes System entwickelt wurden.

Das gleiche gilt für Pakete mit Grunt. Durch Grunt können Sie auf ein Ökosystem von Plugins zugreifen, die im Wesentlichen Wrapper um vanilla npm-Pakete sind. Diese Plugins werden weiterhin über npm ausgeliefert, sind jedoch speziell für die Arbeit mit Grunt ausgelegt

Zum Beispiel könnten Sie anstelle des npm-Pakets UglifyJS mit Grunt das Plugin "grunt-contrib-uglify" verwenden.

Sie können unter http://gruntjs.com/plugins nach Grunt Plugins suchen

Für unser Projekt werden wir diese sechs Grunt Plugins installieren:

Jeder wird in den Unterordner "node_modules" des Projektordners installiert und als Entwicklungsabhängigkeit gespeichert.

Führen Sie jeden dieser Befehle einzeln nacheinander aus, wobei Ihr Terminal auf den Ordner "Grunt Project" zeigt:

1	npm install grunt-contrib-stylus --save-dev

1	npm install grunt-autoprefixer --save-dev

1	npm install grunt-contrib-cssmin --save-dev

1	npm install grunt-contrib-jade --save-dev

1	npm install grunt-contrib-uglify --save-dev

1	npm install grunt-contrib-watch --save-dev

Wenn Sie fertig sind, sollten Sie diese Ordner im Ordner "node_modules" Ihres Projekts sehen:

Plugins über Gruntfile aktivieren

Jetzt verwenden wir die Methode grunt.loadNpmTasks, um unsere Plugins zu aktivieren.

In den geschweiften Klammern Ihrer bestehenden Gruntdatei fügen wir sechs Zeilen hinzu, eine, um jedes grunt-Plugin zu aktivieren:

module.exports = function(grunt) {

// Load grunt plugins.
 grunt.loadNpmTasks('grunt-contrib-stylus');
 grunt.loadNpmTasks('grunt-autoprefixer');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-jade');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-watch');

};

Dieser Code registriert den Namen jedes Plugins als grunt-Befehl und ermöglicht es uns, diesen Befehl zu verwenden, damit das Plugin eine Aufgabe ausführt. Zum Beispiel würden wir den Befehl grunt stylus verwenden, um eine Stiftaufgabe auszuführen, grunt autoprefixer, um eine Autoprefixer-Aufgabe auszuführen, und so weiter.

Konfigurieren Sie Aufgaben in Gruntfile

Unsere Grunt-Plugins sind installiert und die Befehle zur Verwendung sind betriebsbereit, aber wenn Sie sie jetzt verwenden, würden Sie nichts passieren sehen. Der Grund ist, dass wir eine Konfiguration einrichten müssen, um zu bestimmen, was jede Aufgabe eigentlich tun soll.

Dazu fügen Sie der Gruntdatei die Methode grunt.initConfig hinzu und geben dann Informationen weiter, die angeben, wie die einzelnen Aufgaben ausgeführt werden sollen.

Zuerst fügen wir die grunt.initConfig-Methode über die Zeilen hinzu, die Sie gerade zum Laden von grunt-Plugins hinzugefügt haben:

1	grunt.initConfig();

Jetzt werden wir etwas Platz schaffen, damit wir unsere Konfigurationsinformationen weitergeben können. Fügen Sie öffnende und schließende geschweifte Klammern innerhalb der regulären Klammern hinzu und fügen Sie eine leere Zeile dazwischen hinzu:

1	grunt.initConfig({
2
3	});

Jetzt können wir fortfahren und die Konfiguration für jedes der von uns installierten Plugins hinzufügen.

Jedes Plugin verfügt über einen eigenen Bereich von Einstellungen, die Sie verwenden können. Diese Optionen sind auf den Seiten aufgeführt, auf die im Abschnitt "Install Grunt Plugins" oben verwiesen wird.

Sie können auch alle Details zur Konfiguration von Grunt-Aufgaben hier lesen: http://gruntjs.com/configuring-tasks

Grunt Task Konfiguration Beispiel: Stylus

Wir beginnen mit der Konfiguration für unsere stylus-Aufgabe.

Fügen Sie zwischen den geschweiften Klammern, die Sie gerade hinzugefügt haben, in der leeren Zeile folgenden Code hinzu:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Ihre Gruntdatei sollte nun so aussehen:

module.exports = function(grunt) {

  grunt.initConfig({

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

  });

  // Load grunt plugins.
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
};

Lassen Sie uns einen Überblick über den Code geben, den wir hier hinzugefügt haben. Wir werden nicht jede Aufgabe aufschlüsseln, aber wenn man sich diese anschaut, sollte man eine Vorstellung von der Art der Syntax bekommen, die beim Zusammenstellen der Grunt-Aufgabenkonfiguration verwendet wird.

Wie oben erwähnt, hat jedes Plugin verschiedene Konfigurationsoptionen. Wenn Sie also ein neues Plugin einsetzen, sollten Sie sich die Gebrauchsanweisungen genau ansehen.

Das erste, was wir getan haben, ist, einen Eintrag in unsere Konfiguration für unsere stylus-Aufgabe mit dem Code hinzuzufügen:

1	stylus: {
2
3	},

Darin haben wir einen compile-Eintrag hinzugefügt, um zu steuern, was während der Kompilierung passiert:

    stylus: {
      compile: {

      }
    },

Innerhalb der compile-Aufgabe haben wir einen options-Bereich erstellt.

Wir haben diesen Bereich verwendet, um die Option compress auf false zu setzen, weil wir unsere Code-Optimierung später durchführen werden.

Wir haben auch die Option paths auf ['source/stylus'] gesetzt. Wenn Stylus die @import-Anweisung beim Kompilieren sieht, sucht sie nach Dateien, die in den "source/stylus"-Ordner des Projekts importiert werden sollen:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        }
      }
    },

Nach dem options-Bereich haben wir einen files-Bereich hinzugefügt, um das Ausgabeverzeichnis und den Dateinamen sowie das Eingabeverzeichnis und den Dateinamen zu steuern.

Wir haben den Ausgabeort unserer kompilierten CSS-Datei als 'build/style.css' festgelegt, während die zu verarbeitende Stylus-Datei 'source/stylus/main.styl' ist.

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Wenn Ihr Terminal auf Ihren Hauptstammordner zeigt, führen Sie den folgenden Befehl aus:

1	grunt stylus

Schauen Sie in Ihren "build" -Ordner und Sie sollten eine neu kompilierte "style.css" - Datei sehen.

Konfigurieren Sie die verbleibenden Aufgaben

Wir werden jetzt ziemlich schnell durch die Konfiguration jeder verbleibenden Aufgabe gehen. Fügen Sie jeden Block des Konfigurationscodes unmittelbar nach dem zuvor hinzugefügten ein.

Autoprefixer

Fügen Sie diesen Code hinzu:

    autoprefixer: {
      compile: {
        files: {
          'build/style.css': 'build/style.css'
        },
      },
    },

Führen Sie die Autoprefixer-Task mit folgenden Aktionen aus:

1	grunt autoprefixer

Wenn Sie Ihre Datei "build/style.css" überprüfen, sollten Sie jetzt Präfixe sehen, wo sie benötigt werden.

cssmin

Fügen Sie diesen Code hinzu:

    cssmin: {
      clean: {
        files: {
          'build/style.css': 'build/style.css'
        }
      }
    },

Führen Sie die cssmin-Task mit folgenden Aktionen aus:

1	grunt cssmin

Wenn Sie Ihre "build/style.css" jetzt erneut betrachten, werden Sie feststellen, dass sie für Sie sauber gemacht und komprimiert wurde.

Jade

Fügen Sie diesen Code hinzu:

    jade: {
      compile: {
        files: [{
          expand: true,
          cwd: "source/jade",
          src: "*.jade",
          dest: "build",
          ext: ".html"
        }]
      }
    },

Führen Sie die Jade-Aufgabe mit:

1	grunt jade

Wenn Sie in Ihren "build" -Ordner schauen, sollten Sie nun eine HTML-Datei sehen, die jeder Jade-Datei entspricht, die Sie in Ihrem "source/jade" -Ordner hatten.

Uglify

Fügen Sie diesen Code hinzu:

    uglify: {
      bower_js_files: {
        files: {
          'build/output.min.js': [
            'bower_components/jquery/dist/jquery.js',
            'bower_components/modernizr/modernizr.js'
          ]
        }
      }
    },

In diesem Beispiel sehen Sie, dass wir auf die Positionen der Bower-Komponenten verweisen, die wir zuvor installiert haben.

Wir greifen die vollständig erweiterten Versionen von jQuery und Modernizr aus unserem "bower_components" -Ordner heraus, verketten und minimieren sie dann in einer neuen Datei namens "output.min.js". Das ist eine großartige Möglichkeit, um Skripts bereitzustellen, die Sie mit Bower verwalten.

Führen Sie die Uglify-Aufgabe mit folgenden Aktionen aus:

1	grunt uglify

Sie sollten nun eine neue "output.min.js" - Datei in Ihrem "build" -Ordner sehen.

Fügen Sie eine "watch" Aufgabe hinzu

Bis jetzt mag es so aussehen, als hätten wir gerade einen Befehl ersetzt, um eine bestimmte Aufgabe mit einem anderen Befehl auszuführen, aber was wir tatsächlich getan haben, ist die Grundlage dafür zu legen, wo Grunt wirklich zu erstrahlen beginnt.

Der Schlüssel ist die Fähigkeit von Grunt, dass eine Aufgabe eine andere Aufgabe ausführt. Jetzt werden wir eine watch-Aufgabe einrichten, die bestimmte Dateien auf Änderungen hin überwacht, und dann unsere stylus- und jade-Aufgaben automatisch für uns ausführen.

Fügen Sie diesen Code hinzu:

    watch: {
      stylus: {
        files: [ 'source/stylus/*.styl' ],
        tasks: ['stylus', 'autoprefixer', 'cssmin']
      },
      jade: {
        files: [ 'source/jade/*.jade' ],
        tasks: ['jade']
      }
    },

Wir haben zuerst unsere watch-Aufgabe hinzugefügt, und dann haben wir einen Bereich für stylus und jade eingerichtet.

Die files-Option in jedem legt fest, welche Dateien auf Änderungen überwacht werden sollen. Die tasks-Option legt fest, welche Aufgaben bei Änderungen und in welcher Reihenfolge ausgeführt werden sollen.

Für stylus haben wir die watch-Aufgabe so eingerichtet, dass alle ".styl" -Dateien im Ordner "source/stylus" überwacht werden. Wenn er Änderungen sieht, werden die Aufgaben stylus, autoprefixer und cssmin in dieser Reihenfolge ausgeführt.

Jetzt, wenn die watch-Aufgabe ausgeführt wird, müssen Sie lediglich Ihre Stylus-Dateien speichern, und Sie erhalten automatisch eine kompilierte, automatisch kopierte und optimierte CSS-Datei, die für Sie in den Ordner "build" geschrieben wird.

Ebenso haben wir für jade alle ".jade" -Dateien im zu überwachenden "source/jade" -Ordner gesetzt, und wenn einer gespeichert wird, wird automatisch der jade-Aufgabe ausgeführt und die entsprechende HTML-Datei im "build" kompiliert.

Führen Sie die watch-Aufgabe mit folgenden Aktionen aus:

1	grunt watch

Stoppen Sie es erneut durch:

Schließen des Terminals
Drücken Sie CTRL + C

Add "Standard" Aufgabe

An dieser Stelle fragen Sie sich vielleicht, was ist mit der JavaScript-Uglify-Aufgabe?

Der Grund, warum wir es nicht in die watch-Aufgabe aufgenommen haben, ist, dass Sie keine Änderungen an den jQuery- und Modernisr-Dateien vornehmen werden, die die Uglify-Aufgabe verarbeitet. Da die watch-Aufgabe nur auf Änderungen reagiert, wird sie niemals zur Verarbeitung von JavaScript ausgelöst.

Stattdessen werden wir die deafult-Aufgabe verwenden, die in Ihrer Gruntdatei eingestellt werden kann. Das ist die Aufgabe, die ausgeführt wird, wenn Sie den Befehl grunt für sich selbst verwenden und nichts anhängen.

Nach Ihrer letzten grunt.loadNpmTasks-Zeile, aber vor dem Schließen }; der Datei, fügen Sie diese Zeile hinzu:

1	grunt.registerTask('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']);

Das legt die deafult-Aufgabe fest, stylus, autoprefixer, cssmin, jade und dann uglify auszuführen.

Wenn Sie nun den Befehl grunt ohne etwas danach ausführen, wird Ihr gesamtes Projekt einschließlich Ihres JavaScript erstellt.

Im nächsten Tutorial

Als nächstes werden wir den Prozess wiederholen, den wir gerade gelernt haben, aber indem wir Gulp verwenden, um unsere Aufgabe zu erledigen, statt Grunt.