Gruntfile.js not running certain packages

Question

can you please take a look at the following Gruntfile to see if you can determine why it isn't running cssnano and autoprefixer?

Grunt is currently watching my project and with each save grunt-sass compiles fine but neither grunt-cssnano or autoprefixer are doing their thing and no errors are reported.

Done, without errors. Completed in 1.906s at Wed Nov 25 2015 13:12:18 GMT+0000 (GMT Standard Time) - Waiting...

File "sass\styles.scss" changed. Running "sass:dist" (sass) task

I figure I've done something wrong with grunt-contrib-watch setup (specifically the css part) but that's just a guess.

My project folder looks like so

• dist
  • css
    • styles.css
• node_modules (includes all relevant packages)
• sass
  • styles.css
• Gruntfile.js
• package.json

And my Gruntfile is as follows

module.exports = function (grunt) {

    grunt.initConfig({

        sass: {
            options: {
                sourceMap: false
            },
            dist: {
                files: {
                    'dist/css/styles.css': 'sass/styles.scss'
                }
            }
        },

        postcss: {
            options: {
                map: {
                    inline: false,
                    annotation: 'dist/css/maps/'
                },
                processors: [
                    require('autoprefixer')({
                        browsers: 'last 2 versions'
                    }),
                    require('cssnano')()
                ]
            },
            dist: {
                src: 'dist/css/styles.css'
            }
        },

        watch: {
            sass: {
                files: 'sass/*.scss',
                tasks: ['sass']
            },
            css: {
                files: 'dist/css/styles.css',
                tasks: ['cssnano', 'autoprefixer']
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-cssnano');    

    grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};

Answer 1

With a lot more trial and error it looks like I have a solution. The below file now runs Sass, cssnano, autoprefix and watch. Sass, cssnano and autoprefix packets (and I assume any others that are added in future) will do their thing in grunt.initConfig while and at the bottom of the file registerTask takes care of watch.

More work is need to figure out how to create other registerTasks but that's for another day.

Thanks to Mian who set me on the right track.

module.exports = function (grunt) {

grunt.initConfig({
    sass: {
        options: {
            sourceMap: false
        },
        dist: {
            files: {
                'dist/css/styles.css': 'sass/styles.scss'
            }
        }
    },

    postcss: {
        options: {
            map: {
                inline: false,
                annotation: 'dist/css/maps/'
            },
            processors: [
                require('autoprefixer')({
                    browsers: 'last 2 versions'
                }),
                require('cssnano')()
            ]
        },
        dist: {                
            src: 'dist/css/styles.css'
        }
    },

    watch: {
        sass: {
            files: 'sass/*.scss',
            tasks: ['sass', 'postcss']
        },
    },
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');    

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

};

Answer 2

registering a task like you do :

grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);

will execute the tasks one by one. So in your case, only the watch task will be executed because it "never ends" till you finish it. So the sass, postcss:dist, cssnano wont be reached.

So in your case it will execute the watch task only, which will watch the *.scss files to execute the sass task and watch the style.css to execute the cssnano and autoprefixer task. But these 2 last tasks aren't defined in your config, so it won't do anything.

To solve your problem, remove the tasks from your default registered task because they aren't used :

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

And add a config for each missing task. for example:

cssnano: {
        options: {
            sourcemap: true
        },
        dist: {
            files: {
                'dist/css/styles.min.css': 'dist/css/styles.css'
            }
        }
    },
//and same for autoprefixer