CODEWITHSUNDEEP
sassgruntjs
Daniel Robinson
Daniel Robinson

Reputation: 14898

how to get grunt-sass to process a whole directory, recursively?

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

Answers (2)

Daniel Robinson
Daniel Robinson

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

Colin Bacon
Colin Bacon

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

Related Questions