Simply Build Tasks Collection

Letzten Monat habe ich Euch Simply Build vorgestellt. Ein Helper-Tool zur Verwaltung Eurer Tasks und Build-Prozesse. Heute möchte ich Euch eine kleine Sammlung von Simply-Tasks vorstellen, die Euch den Einstieg in Simply erleichtern sollen. Jeder Task funktioniert unabhängig voneinander und prinzipiell auch unabhängig von Simply Build.


JavaScript-Dateien mit Browserify transpilieren

Der erste Task verwendet Browserify und Babelify, um ES6-Dateien in ES5-JavaScript zu transpilieren. In der package.json könnt Ihr über die config-Variable jeweils den Namen der Source-Datei (src) und das Ziel (dest) angeben.

$ simply browserify

Über diesen Link gelangt Ihr direkt zum Task.


CSS-Dateien mit CSSLint überprüfen

Dieser Task ermöglicht Euch das Linten von CSS-Dateien via CSSLint. Über die package.json könnt Ihr wiederum mit der config-Variable einstellen, welcher Ordner bzw. welche Dateien (src) gelintet werden sollen. Im Task-Ordner ist außerdem direkt die .csslintrc, sprich die Konfiguration des Linters, hinterlegt. Diese könnt Ihr nach Euren eigenen Bedürfnissen anpassen. Weitere Informationen zu den Einstellungsmöglichkeiten findet Ihr in der Dokumentation von CSSLint.

$ simply csslint

Über diesen Link gelangt Ihr direkt zum Task.


Electron-App erstellen mit dem Electron Packager

Mit diesem Task könnt Ihr Euer Projekt ganz leicht in eine Electron-App verwandeln. Verwendet wird dafür der Electron Packager. Lediglich Source- und Zielordner könnt Ihr über die package.json einstellen, die restlichen Einstellungen könnt Ihr direkt im Script vornehmen. Wem es lieber ist alles an einem Ort zu konfigurieren, kann die Einstellungen auch vom Script in die package.json verschieben. Zu den Einstellungsmöglichkeiten von Electron Packager schaut Euch bitte dessen Dokumentation an.

$ simply electron-packager

Über diesen Link gelangt Ihr direkt zum Task.


Erstellt eine Dokumentation mit ESDoc

ESDoc ist ein guter Dokumentationsgenerator für JavaScript. Hey, ich gebe nur wieder was das Marketing sagt. Ich mag nicht nur ESDoc, ich mag auch die Feature-Beschreibung. "Generates good documentation." Nicht etwa "the best", nur "good". Das stimmt und das reicht auch. Die komplette Konfiguration des Tasks findet diesmal in der .esdoc.json statt. Auch das ist "good".

$ simply esdoc

Über diesen Link gelangt Ihr direkt zum Task.


ES6-Dateien mit ESLint checken

Dieser Task verwendet ESLint, um ES6- (oder auch ES5-JavaScript-) Dateien zu überprüfen. Der Zielordner zur Überprüfung wird in der package.json angegeben. Die Linting-Regeln könnt Ihr in der .eslintrc.yaml angeben. Hierzu könnt Ihr die Dokumentation von ESLint bemühen.

$ simply eslint

Über diesen Link gelangt Ihr direkt zum Task.


HTML-Dateien minifizieren mit dem HTML-Minifier

Mit diesem Task könnt Ihr HTML-Dateien verkleinern. Dazu wird der HTML-Minifier verwendet. Über die Config-Variable in der package.json könnt Ihr Source (src), Ziel (dest) und auf die Pattern (pattern) angeben, mit der HTML-Dateien identifiziert werden sollen. Standard-mäßig werden nur Dateien mit der Endung "html" verarbeitet.

$ simply html-minifier

Über diesen Link gelangt Ihr direkt zum Task.


JavaScript-Dateien mit JSCSRC linten

JSCSRC ist ein weiterer brauchbarer Linter. Mit diesem könnt Ihr JavaScript-Dateien auf diverse potentielle Bugs überprüfen lassen. In der package.json gebt Ihr unter config an, in welchem Ordner nach JS-Dateien gesucht werden soll. Die eigentlicht Konfiguration der Regeln findet dann in der Datei .jscsrc statt.

$ simply jscs

Über diesen Link gelangt Ihr direkt zum Task.


Unit-Tests mit Karma und Jasmine

Dieser Task führt mit Hilfe von Karma und Jasmine Eure Unit-Tests durch. In der package.json könnt Ihr unter config den Pfad Eures Test-Ordners angeben. Die eigentliche Konfiguration der Tests kann unter karma.conf.es6 vorgenommen werden.

$ simply karma

Über diesen Link gelangt Ihr direkt zum Task.


SASS/SCSS-Dateien kompilieren mit Node-SASS

Mittels Node-SASS transpiliert dieser Task Eure SASS- oder SCSS-Dateien in reguläres CSS. Unter config könnt Ihr in der package.json sowohl die Source-Datei, als auch die Ziel-Datei angeben. Weitere Informationen entnehmt Ihr der Dokumentation von Node-SASS.

$ simply node-sass

Über diesen Link gelangt Ihr direkt zum Task.


CSS-Dateien nachbearbeiten mit PostCSS

Mit PostCSS könnt Ihr Eure CSS-Dateien nachbearbeiten. Ein beliebter Filter ist zum Beispiel der Autoprefixer, welcher die lästiger Browser-Prefixes an relevante Stile anklebt. Die Konfiguration findet hier wieder in der package.json statt. Ihr könnt die Quell- und Zieldatei angeben.

$ simply postcss

Über diesen Link gelangt Ihr direkt zum Task.


SASS-Dokumentation mit SassDoc erstellen

SassDoc ist für Sass, was JSDoc für JavaScript ist. So zumindest lässt es die offizielle Webseite verlauten. Ich mag ja lieber ESDoc für JavaScript, aber jedem sein Pläsierchen. Konfiguriert wird hier wieder einmal über die package.json, allerdings nur Quell- und Zielordner. Die Konfiguration der Dokumentation findet in der .sassdocrc.yaml statt. Zu den Details bemüht Ihr bitte die offizielle Webseite von SassDoc.

$ simply sassdoc

Über diesen Link gelangt Ihr direkt zum Task.


SCSS-Dateien mit SASS-Lint überprüfen

Mit diesem Task könnt Ihr Eure SCSS-Dateien via SASS-Lint überprüfen. Über die config-Variable in der package.json könnt Ihr die Suchpattern für SCSS-Dateien festlegen. Außerdem könnt Ihr ignorierte Ordner und Dateien festlegen. Die Linting-Regeln an sich findet Ihr in der .scss-lint.yml.

$ simply scss-lint

Über diesen Link gelangt Ihr direkt zum Task.


CSS-Dateien verkleinern mit UglifyCSS

Dieser Task lässt Euch CSS-Dateien mit UglifyCSS verkleinern. Über die package.json könnt Ihr dabei sowohl die Quell-, als auch die Zieldatei definieren. Alle weiteren Konfigurationsoptionen können direkt in der index.js angepasst werden.

$ simply uglifycss

Über diesen Link gelangt Ihr direkt zum Task.


JavaScript-Dateien verkleinern mittels Uglify JS

Mit Uglify JS ermöglicht es Euch dieser Task auch noch das letzte Byte aus Euren JavaScript-Dateien heraus zu quetschen. Über die package.json könnt Ihr dabei sowohl die Quell-, als auch die Zieldatei konfigurieren. Alle weiteren Einstellungen könnt Ihr in der index.js anpassen.

$ simply uglifyjs

Über diesen Link gelangt Ihr direkt zum Task.


Kommentare


Wichtig: Durch den Click auf die obige Checkbox stimmst Du ausdrücklich der Übertragung von Daten an Facebook zu. Die Zustimmung erfolgt einmalig für die Kommentare dieses Artikels und wird nicht gespeichert. Weitere Details kannst Du dem Punkt Social Plugins der Datenschutzerklärung entnehmen.