Teil 5 – Grunt Task-Runner mit Less Pre-Prozessoren integrieren

Fortsetzung von Teil 4.

Dieser kurze Guide beschäftigt sich in Teil 5 damit, wie Du Grunt als Task-Runner in Windows einrichten kannst.  Bei moderner Webentwicklung ist es oft der Fall, dass CSS mit Hilfe von Less entwickelt und compiliert werden. Das hat nicht nur den Vorteil, dass der Code schlanker und viel flexibler wird, sondern auch, das der Entwickler viel mehr Möglichkeiten hat, Browserübergreifende Vendor-Prefixes schneller mit Hilfe von Mixins in der Entwicklung zu nutzen. Was man dann benötigt, ist ein Taskrunner wie Grunt, der den Compilierungsprozess beim Speichern der Less-Dateien startet und wenn nötig, die fertige CSS auch komprimiert und optimiert auszugeben.

Anzeige

Eckdaten zur Entwicklungsumgebung

Der Vollständige Guide zur Entwicklungsumgebung wird folgende Artikel und Features besitzen:

  1. Teil 1 – Basis Xampp mit PHP 5.6.8
  2. Teil 2 – lokale Domain á la “domain.dev” einrichten und mit Magento nutzen
  3. Teil 3 – GIT-Support + GIT Bash zusammen mit Modman
  4. Teil 4 – NPM Packages 
  5. Teil 5 – Grunt mit Less/Sass Pre-Prozessoren integrieren

Grunt Installation via Commandline / Bash

Die Installation von Grunt und die Einrichtung bzw. Vorkonfigurierung für den Less/JS-Compiler ist relativ simpel.
Starte Deine Bash (zum Beispiel die GIT-Bash) und wechsel in Deinen Projekt-Root.
Damit Deine NPM Packages aktuelle Versionen beinhalten, starte kurz den NPM Update mit npm update und aktualisiere es. Nun kannst du mit der eigentlichen Grunt-Installation starten.

Commandline Befehle zur Installation

Geb diese Befehle der Reihe nach in deine Konsole ein, um Grunt mit Less- und JS-Compiler (uglify) zu installieren.

npm install grunt-cli
npm install jit-grunt --save-dev
npm install less
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-concat --save-dev

 

Alternativ kannst Du auch alle Befehle aneinandergekettet mit einem Befehl in die Console packen.

npm install grunt-cli jit-grunt --save-dev less grunt-contrib-watch --save-dev grunt-contrib-less --save-dev grunt-contrib-uglify --save-dev grunt-contrib-concat --save-dev

 

Gruntfile.js im Projekt-Root einrichten

Damit Grunt weiß, was und wo es Dateien finden kann, die mit einem bestimmten Task kompiliert werden sollen, gibt es die sogenannte Gruntfile.js im Projekt-Root. In dieser Javascript-Datei werden alle nötigen Aufgaben als TASK angelegt und mit spezifischen Informationen wie zum Beispiel die Komprimierungsstufe oder code-cleaning-Anweisungen hinterlegt.

Gruntfile.js Beispiel

var themepath = 'path/to/my/css/and/js/';
//var jsfiles = 'js/**/*.js';

var jsFiles = [
    themepath + 'js/example.js',
    themepath + 'otherFolder/js/example2.js'
];
module.exports = function(grunt) {
    require('jit-grunt')(grunt);

    grunt.initConfig({
        less: {
            development: {
                options: {
                    compress: false,
                    yuicompress: false,
                    optimization: 9
                },
                files: {
                    "path/to/my/css/and/js/styles.dev.css": themepath + "less/styles.less" // destination file and source file
                }
            },
            production: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 9
                },
                files: {
                    "path/to/my/css/and/js/styles.min.css": themepath + "less/styles.less" // destination file and source file
                }
            }
        },
        watch: {
            less: {
                files: ['path/to/my/css/and/js/less/**/*.less'],
                tasks: ['less'],
                options: {
                    nospawn: true
                }
            },
            js: {
                files: ['path/to/my/css/and/js/**/*.js'],
                tasks: ['uglify'],
                options: {
                    spawn: false,
                    livereload: true
                }
            }
        },
        uglify: {
            development: {
                options: {
                    mangle: true,
                    compress: {
                        drop_console: true
                    },
                    beautify: true,
                    report: "min",
                    wrap: undefined,

                    /**
                     * When using wrap this will make all global functions and variables available via the export variable.
                     */
                    exportAll: false,

                    /**
                     * Turn on preservation of comments.
                     * More details on https://github.com/gruntjs/grunt-contrib-uglify
                     * false | 'all' | 'some'
                     */
                    preserveComments: false,

                    /**
                     * This string will be prepended to the beginning of the minified output.
                     */
                    banner: '', //'/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */'

                    /**
                     * This string will be append to the end of the minified output.
                     */
                    footer: ''
                },
                files: [
                    {
                        src: [jsFiles],
                        dest: 'path/to/my/css/and/js/example.js'
                    }
                ]
            },
            production: {
                files: [
                    {
                        src: [jsFiles],
                        dest: 'path/to/my/css/and/js/js/example.min.js'
                    }
                ]
            }
        }
    });

    grunt.registerTask('default', ['less', 'watch']);
};

 

Wenn Sie alle Anpassungen in Grunfile.js durchgeführt haben, können Sie in der Console mit dem Befehl grunt oder auch mit grunt watch den Task-Runner starten. Nun werden alle hinzugefügten Task entsprechend gestartet.

Viel Spass damit!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü