How I can write few tasks in grunt-contrib-sass?

Question

I have some like this in my gruntfile.js:

        sass: {
            app: {
                files: {
                 '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                }
            },
            options: {
                style: 'nested'
            }
    },
grunt.registerTask('default', ['sass']);

But this is only one task. How I can combine two or more tasks? As I know in some grunt modules you can combine multiple tasks like this:

            sass: {
              dev: {
                 app: {
                    files: {
                      '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                    }
                 },
                 options: {
                    style: 'nested'
                 }
              },

              production: {
                 app: {
                    files: {
                      '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
                    }
                 },
                 options: {
                    style: 'compressed',
                    sourcemap: 'none'
                 }
              }
    },
    // and then register tasks
    grunt.registerTask('dev', ['sass:dev']);
    grunt.registerTask('prod', ['sass:production']);

But this doesn't work, GruntJs didn't show mistake and didn't compile sass. What is wrong with this?

How did you run them? Just by registering the `sass`-task as the default should run them both: `grunt.registerTask('default', ['sass'])` -> grunt — Pete TNT, Jul 28 '15 at 08:29
Yes like this, but I want to run it separately each other, like `grunt.registerTask('dev', ['sass:dev'])'` or `grunt.registerTask('production', ['sass:production']) '` — ostinred, Jul 28 '15 at 08:45

score 0 · Answer 1 · answered Jul 28 '15 at 08:57

0

There is a dirty hack but it works for me at least. But at first I would suggest to migrate to Gulp where is such as simple task a peace of cake. So in sort you will create default configuration for sass in initConfig function and then I'll register task with callback function where all magic happens. There you will override default setting, and finally you can run grunt sassTask or whatever name will be.

grunt.registerTask("sassTask", function() {
    grunt.config.data.sass = {
        dist: {
            files: {
                'test.css': 'test.scss'
            }
        }
    };
    grunt.task.run('sass');
});

answered Jul 28 '15 at 08:57

Martin Surynek

658
6
9

this in a nice hack, thanks, would know it, but I find more 'clear' desicion – ostinred Jul 28 '15 at 09:00
I am afraid that there isn't any other workaround, you can check grunt-sass task source from github https://github.com/sindresorhus/grunt-sass/blob/master/tasks/sass.js and is pretty clear how the task is working. – Martin Surynek Jul 28 '15 at 16:08
I read all information about this task, even looked how gulp run this task, but it really very simple. in the answer bellow all work perfect, if you can try it. – ostinred Jul 28 '15 at 18:01

score 0 · Accepted Answer · answered Jul 28 '15 at 08:58

I find my mistake, it would run this tasks in such way:

sass: {
dev: {
    files: {
        '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
    },
    options: {
        style: 'nested'
    }
},
production: {
    files: {
        '<%= meta.cssDist %>style.css': '<%= meta.cssSrc %>style.scss'
    }
    options: {
        style: 'compressed',
        sourcemap: 'none'
    }
}
}
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('prod', ['sass:production']);

How I can write few tasks in grunt-contrib-sass?

2 Answers2