Using grunt-contrib-watch to concat css files after compiling them using sass

Question

I'd like to use grunt-contrib-watch to watch my .scss files, compile them and then concatenate them. Right now since I am watching .scss and .css files the changes to my .scss files kick off the task and then the .css changes restart the task and it gets stuck in a loop. How can I order the tasks such that 'concat' will run after 'sass'?

module.exports = function(grunt) {

grunt.initConfig ({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        css: {
            src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
            dest: 'dest/css/built.css'
        }
    },
    sass : {
        dist: {
            files: {
                'src/css/main.css' : 'src/css/main.scss'
            }
        }
    },
    watch : {
        files: ['src/css/*.scss', 'src/css/*.css'],
        tasks: ['sass', 'concat'],
        options: {}
    }
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['sass', 'concat']);

};

Answer 1

// Before generating any new files, remove any previously-created -
grunt.loadTasks('grunt-contrib-clean');

`clean: {
            test: [
                'tmp',
                '.sass-cache'
            ]
        },

// Configuration to be run (and then tested).
grunt.loadTasks('node_modules/grunt-contrib-compass/tasks');

`compass: {
        dist: {                   // Target
                options: {              // Target options
                    sassDir: '',
            },
            dev: {                   // Target
                options: {              // Target options
                    sassDir: '',
            }
       }`   

// cssmin to compress & combine css files
grunt.loadTasks('node_modules/grunt-contrib-cssmin/tasks');

cssmin: {
        compress: {
            files: {
                '<%= project.css %>/main_combined.css': [
                    '<%= project.css %>/tv-carousels.css',
                    '<%= project.css %>/tv-global.css']
                   }
                 }
        }

and then add watch grunt.loadTasks('grunt-contrib-watch');

Answer 2

I have the same question before reading the post http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/ try this

grunt.initConfig ({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        css: {
            src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
            dest: 'dest/css/built.css'
        }
    },
    sass : {
        dist: {
            files: {
                'src/css/main.css' : 'src/css/main.scss'
            }
        }
    },
    watch : 
        css:{
            files: ['src/css/*.scss'],
            tasks: ['buildcss']
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('buildcss', ['sass', 'concat']);

then run grunt watch