Grafik zum Trennen der Inhaltselemente

wenn grunt-contrib-sass zu langsam ist

Vorneweg: Durchschnittlich benötige für meine Web-Projekte ca. 20 Sass-Dateien, die mittels einer zentralen default.scss in der entsprechenden Reihenfolge importiert und über grunt-contrib-watch überwacht und weiterverarbeitet werden. Dieser Vorgang dauert seit einiger Zeit je Änderung nahezu 30 Sekunden. Definitiv zu lange. Grundsätzlich bin ich ein großer Freund des Grunt Task-Runners. Er läuft seit Jahren zuverlässig. Aber wenn es mal hakt, was selten vorkommt, dann ist das meist nicht in ein paar Minuten erledigt, sondern zieht eine ganze Schlange an Fehlern hinter sich her. Aus diesem Grund habe ich dieses Problem auch zu lange vor mir her geschoben, weil mir Nerven und Zeit fehlten, mich darum so lange zu kümmern. Da gerade Urlaubszeit ist und ich auf Daten eines Kunden warte, gab es keine Ausreden mehr.

Das Problem liegt in grunt-contrib-sass. Dieses Modul ist in Ruby geschrieben und scheint Probleme haben, wenn die Sass Dateien zu umfangreich sind. Die Lösung liegt in grunt-sass, das auf c++ basiert und sich grundlegend unterscheidet. grunt-sass benötigt allerdings mindestens node in der Version 8. Also können vorher updates notwendig sein. Diese Lösung hat die Geschwindigkeit der Sass Kompilierung bei mir mehr als verdoppelt. der Aufwand lohnt sich also.

Als erstes deinstalliert man contrib-sass (sofern vorhanden) mittels:
$ npm uninstall grunt-contrib-sass --save-dev
und installiert:
$ npm install --save-dev node-sass grunt-sass

Richtig, es sind zwei Module, davon nicht beirren lassen. Sowohl node-sass als auch grunt-sass sind Voraussetzungen. Es bestehen bestimmte Abhängigkeiten. Ich beschreibe hier den Vorgang inklusive Einbindung in watch, alle Basis-Infos findet Ihr unter: https://www.npmjs.com/package/grunt-sass, weitere Infos unter: https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

Änderungen in der Gruntfile.js - Datei:

module.exports = function(grunt) {
const sass = require('node-sass');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
  watch: {
   sass: {
    files: ['sass/**/*.scss'],
    tasks: ['sass:dist'],
   },
   ...
   sass: {
    options: {
     implementation: sass, //!!! sass nicht in Anführungszeichen setzen
     sourceMap: true,
     outputStyle: 'compressed'
     },
     dist: {
      files: {
       'ziel/default.css': 'quelle/default.scss'
     }
   }
},
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('default', ['sass:dist', 'watch']);
};

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 7 und 1.
Grafik zum Trennen der Inhaltselemente