Reputation: 14898
I have been unable to get the grunt-sass task to run as I would like to using a config like this:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
src: 'src/client/**/*.scss',
dest: 'src/client/**/*.css'
}
}
It doesn't seem to respond to the wild card selectors I can only get it to work if I specify a full file name, so I have written my own task function, but I don't know how to call grunt-sass from within my function with the appropriate params?
function compileSass(path){
var fs = require('fs'),
sass = require('node-sass'),
compileSassFile = function(path){
grunt.log.writeln('compile file: '+path);
// how to call grunt-sass here with options {outputStyle: 'compressed'} and dist {src: path: dest: path.replace('.scss', '.css')} ?
},
processDir = function(path){
var files = fs.readdirSync(path);
for(var i = 0; i < files.length; i++){
var fileName = files[i];
if(fs.statSync(path + '/' + fileName).isDirectory()){
processDir(path + '/' + fileName);
} else if(fileName.indexOf('.scss') > 0 && fileName.indexOf('_') !== 0){
compileSassFile(path + '/' + fileName)
}
}
};
processDir(path);
}
grunt.registerTask('buildSass', function(){compileSass('src/client')});
Upvotes: 0
Views: 341
Reputation: 14898
Colin Bacons more directly answers the question as it was asked, but an alternate method that I actually ended up going with was to not use grunt-sass at all but to use the grunt-exec and add node-sass directly into my own package.json file, then I just ran node-sass directly from the terminal with grunt-exec:
exec: {
compileDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o src/client src/client"
},
compileBuildSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o build/client build/client"
},
watchDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -w -r -o src/client src/client"
}
}
grunt.registerTask("watchSass", ["exec:compileDevSass", "exec:watchDevSass"])
Upvotes: 0
Reputation: 15619
It is worth reading about Grunt Files. It gives you a lot of flexibility on what files your task will run against and what it will do with the output.
Your Grunt task should look something like this:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "src/client", // The startup directory
src: ["**/*.scss"], // Source files
dest: "src/client", // Destination
ext: ".css" // File extension
}
]
}
}
Upvotes: 1