CSS Dateien mit Grunt zusammenfassen und minimieren

Gängige Praxis bei der Performanceoptimierung von Web Seiten ist es die Anzahl der Request zu reduzieren. Verwendet man verschiedene CSS Dateien wird jede Datei einzelnd aufgerufen. Dabei kommt es zu Verzögerungen die vermieden werden können wenn man alle CSS Definitionen in eine Datei schreibt. Grunt soll hier einen Lösungsansatz geben. Die Basisinstallation hatte ich hier beschrieben.

Hier der Ablauf. Erst die Installation dann ein Projektverzeichnis erstellen und den Befehl für die Initialisierung geben. Ich hatte erstmal nur ein Element ausgewählt

sudo  npm install -g grunt
mkdir gruntprojects
cd gruntprojects/

grunt init:gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

"gruntfile" template notes:
This template tries to guess file and directory paths, but you will most likely
need to edit the generated grunt.js file before running grunt. If you run grunt
after generating grunt.js, and grunt exits with errors, edit the grunt.js file!

Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n) n
[?] Will files be concatenated or minified? (Y/n) y
[?] Will you have a package.json file? (Y/n) n
[?] Do you need to make any changes to the above before continuing? (y/N)

Writing grunt.js...OK

Initialized from template "gruntfile".

Done, without errors.

Eigentlich wollte ich Javascript und CSS Files zusammenfassen und minimieren. Mit den Standardbeispielen hat das aber nicht geklappt. Die Gründe habe ich nicht rausgefunden. Deshalb habe ich ein anderes Beispiel benutzt und erstmal nur die CSS Dateien angegangen mit diesem Plugin. Erst Installieren und dann die Grunt Befehlsdatei anpassen:

npm install grunt-contrib-mincss

vi grunt.js

module.exports = function(grunt) {
  grunt.initConfig({
    meta: { version: '0.1.0', banner: ' ' },
    lint: { files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js'] },
    test: { files: ['test/**/*.js'] },
mincss: {
  compress: {
    files: {
       '/var/www/html/output.min.css': [
                        '/var/www/html/bootstrap/css/bootstrap.css' ,
                        '/var/www/html/stylesheet.css' ,
                        '/var/www/html/scheet2.css' ,
                        '/var/www/html/thickbox.css' ,
                        ]
    } } },
jshint: {
      options: {
        curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true
      },
      globals: {}
    },
    uglify: {}
  });
grunt.registerTask('default', 'lint test concat min');
grunt.loadNpmTasks('grunt-contrib-mincss');
};

Und jetzt aufrufen

#grunt mincss
Running "mincss:compress" (mincss) task
File /var/www/dev-server/html/templates/xtc5/bootstrap/css/all.min.css created.
Uncompressed size: 122760 bytes.
Compressed size: 18698 bytes gzipped (109417 bytes minified).

Die Datei wird auch gut erstellt. Aufpassen muss man bei der CSS dann vor allem auf Pfadangaben. Wenn man CSS Dateien aus verschiedenen Dateien zusammenstellt kann es sein das in der minimierten Datei die Angabe nicht mehr stimmen.

Auf jeden Fall ist die Webseite erstmal durchgehend zu testen.