Leon Laci Leon Laci - 7 months ago 31
Javascript Question

Different grunt tasks for watch and sass

I have a grunt project and I am using sass and jade together. I want to have a task for sass when developing where the style would be expanded for troubleshooting and a task for when I 'finish' the project and then the style would be compressed. I am new to grunt and don't know how to do it.

My gruntfile

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

jade: {
compile: {
options: {
pretty: true,
nospawn: false
},

files: {
'index.html' : 'src/index.jade'
}
}
},

sass: {
dist: {
options: {
style: 'expanded',
nospawn: false
},

files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
},

watch: {
jade: {
files: 'src/**/*.jade',
tasks: ['jade']
},

css: {
files: 'src/sass/**/*.sass',
tasks: ['sass']
},

options: {
livereload: true,
nospawn: false
}
},

connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true
}
}
}
});

grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

grunt.registerTask('default', ['connect', 'watch']);
};

Answer

To get compressed css instead of expanded, you would first need to make another sass-task (so within sass:{}), call it finish: for instance and change the compression setting.

It should look something like this:

finish: {
   options: {
            style: 'compressed',
            nospawn: false
           },

   files: {
            'build/css/app.css' : 'src/sass/app.sass'
           }
}

Then after grunt.registerTask('default', ['connect', 'watch']); you can add another task, ie finish that should like: grunt.registerTask('finish', ['sass:finish']);

To run it you would type grunt finish on the command line.