2014-01-16 11 views
5

Ich baue eine umfangreiche JS-Anwendung mit angularjs, und ich benutze Grunt, um alles in eine kompakte Distribution zu verarbeiten. Ich kann nicht herausfinden, was zu Kompilieren, Concat und Minify meine .scss-Dateien in eine einzige CSS-Datei verwenden.Kompilieren, Verketten und Reduzieren von Sass-Dateien mit Grunt

Mein Projekt ist nach Modulen organisiert, daher sind die .scss-Dateien verstreut und nicht in einem einzigen Verzeichnis gruppiert.

Ich habe grunt-contrib-sass und grunt-contrib-compass angeschaut, aber beide scheinen Sie dazu zu zwingen, Dateien einzeln zu kompilieren. Ich suche nach einer Lösung, die sich nicht ändern muss, wenn ich Quelldateien hinzufüge.

Mit welchem ​​Grunt-Plugin kann ich meine Sass-Dateien in einer einzigen CSS-Datei kompilieren, concat und minimieren?

ich derzeit concat und Vertiefung bin mit meiner Ebene CSS-Dateien verketten und minify:

concat: { 
    css: { 
    src: ['<%= src.css %>'], 
    dest: '<%= distdir %>/<%= pkg.name %>.css' 
    }, 
}, 

recess: { 
    min: { 
    files: { 
     '<%= distdir %>/<%= pkg.name %>.css': ['<%= distdir %>/<%= pkg.name %>.css'] 
    }, 
    options: { 
     compress: true 
    } 
    } 
} 
+0

sollten Sie in der Lage sein, es zu tun mit 'recess' durch Pfade zur' files' Array – megawac

+0

Grunzen-Aussparung Zugabe behauptet, für CSS und weniger zu sein: Lint und minify CSS und weniger. Funktioniert es auch mit Sass? – Chaseph

+0

[grunt-sass] (https://github.com/sindresorhus/grunt-sass) oder [grunt-contrib-sass] (https://github.com/gruntjs/grunt-contrib-sass), je nach Ihren Bedürfnissen (grunt-sass benutzt [lib-sass] (https://github.com/hcatlin/libsass)). – steveax

Antwort

3

Ich denke, eine Dokumentation über Muster, die Sie helfen können.

http://gruntjs.com/configuring-tasks#globbing-patterns

sass: {        // Task 
    dist: {       // Target 
    options: {      // Target options 
     style: 'expanded' 
    }, 
    src: 'foo/{a,b}*.sass', // you can use some kind of regular expression 
    dest: 'foo/css/ 
    } 
} 
+0

Danke, Sir, Sie haben mich in die richtige Richtung geführt. – Chaseph

Verwandte Themen