0

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']);
};
Luke
  • 67
  • 7

2 Answers2

1

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
ylerjen
  • 4,109
  • 2
  • 25
  • 43
  • Thanks for the explanation, Miam84. I've done as you suggested and updated tasks and added the config for `cssnano`. However, it still doesn't work. The results appear to be the same as before. Just to add that I've commented out `autoprefxer` because I'll have to do a little more research here for the correct config. The documentation for `autoprefixer` for `postcss` only talks about migrating and all the examples are contained within the `postcss` config as opposed to a standalone config. (Maybe this isn't an issue but it's confusing me all the same.) – Luke Nov 25 '15 at 14:13
  • what command do you execute to start the watch ? just `grunt` ? – ylerjen Nov 25 '15 at 16:53
  • Yes, that's what I was using. I've been working away at this throughout the day and you set me in the right direction for a solution. I thank you for that. See below for an updated file that looks to be working. It's a good base for me to build on. Thanks for the response. – Luke Nov 25 '15 at 22:20
0

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']);

};

Luke
  • 67
  • 7