Grunt autoprefixer is not working

Question

I'm trying to set a autoprefixer Grunt task at Gruntfile.js. Something is wrong because all the code is being compiled but is not being autoprefixed. I have read all the autoprefixer task documentation and I have done many changes but all them have failed.

"use strict";

module.exports = function( grunt ) {

  grunt.initConfig({
    watch: {
      css: {
        files: [ 'assets/sass/**/*.scss' ],
        tasks: [ 'sass:prod', 'sass:dist', 'postcss:dist' ]
      },
      js: {
        files: 'assets/js/*.js',
        tasks: [ 'uglify:dist' ]
      }
    },

    uglify: {

      dist: {
        options: {
          compress: false,
          beautify: false,
          report: 'gzip'
        },
        files: {
          'build/js/app.min.js': ['assets/js/main.js']
        }
      },

      prod: {
        options: {
          compress: true,
          report: 'gzip'
        },
        files: {
          'build/js/app.min.js': ['assets/js/main.js']
        }
      }
    },

    sass: {
      dist: {
        options: {
          style: 'expanded',
          noCache: true,
          sourcemap: 'none',
          lineNumbers: false
        },
        files: {
          'build/css/app.css': 'assets/sass/app.scss'
        }
      },

      prod: {
        options: {
          style: 'compressed',
          noCache: true,
          sourcemap: 'none',
          lineNumbers: false
        },
        files: {
          'build/css/app.min.css': 'assets/sass/app.scss'
        }
      }
    },

    postcss: {
      options: {
        map: false,
        processors: [
          require('autoprefixer')({browsers: ['last 2 versions']})
        ]
      },
      dist: {
        files: {
          'build/css/app.min.css': 'build/css/app.min.css'
        }
      }
    },

    sprite:{
      all: {
        src: 'assets/sprites/*.png',
        dest: 'build/img/spritesheet.png',
        destCss: 'assets/sass/sprites.scss',
        retinaSrcFilter: 'assets/sprites/*@2x.png',
        retinaDest: 'build/img/spritesheet.retina@2x.png',
        padding: 10
      }
    },

    notify_hooks: {
      options: {
        enabled: true,
        max_jshint_notifications: 5, 
        title: "Template", 
        success: true, 
        duration: 3 
      }
    }

  });

  // Load the tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-spritesmith');
  grunt.loadNpmTasks('grunt-notify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.task.run('notify_hooks');

  grunt.registerTask( 'default', [ 'watch', 'postcss:dist' ] );
  grunt.registerTask( 'production', [ 'sass:prod', 'sass:dist', 'uglify:prod' ] );
};

Here is the package.json file:

{
  "devDependencies": {
    "autoprefixer": "^6.2.3",
    "grunt": "^0.4.5",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.3",
    "grunt-postcss": "^0.7.1",
    "grunt-spritesmith": "^6.1.0"
  }
}

These settings were already being used successfully before adding the Autoprefixer configuration. So I think I'm doing something wrong.

Answer 1

your Gruntfile.js looks fine! I've tried your setup and it worked as expected. Have you tried removing and installing the dependencies grunt-contrib-sass, grunt-postcss and autoprefixer? And have you tried running the tasks separately and checked the results?

And I'm not sure why the in and output is the same in your code snippet below:

postcss: {
  options: {
    map: false,
    processors: [
      require('autoprefixer')({browsers: ['last 2 versions']})
    ]
  },
  dist: {
    files: {
      'build/css/app.min.css': 'build/css/app.min.css'
    }
  }
},

Maybe you want to use another filename in the future, but otherwise you can remove the last part:

files: {
   'build/css/app.min.css'
}

Sorry for answering right away (not enough points yet)