CODEWITHSUNDEEP
gruntjsautoprefixer
El Danielo
El Danielo

Reputation: 780

Why my grunt autoprefixer does not work?

I don't know why but this code stopped working after a while. It is minifing the code but does not add any vendor prefixes. I would also like to add another files to css like normalize but it didn't work either. Here is the code:

  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

uglify: {
  dist: {
    options: {
      banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
    },
    files: {
      'js/scripts.min.js' : [

      ]
    }
  },
  dev: {
    options: {
      banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
      beautify: true,
      compress: false,
      mangle: false
    },
    files: {
      'js/scripts.js' : [

      ]
    }
  }
},
sass: {
  dist: {
    options: {
      compass: true,
      style: 'expanded'
    },
    files: [{
      expand: true,
      cwd: 'sass',
      src: [
        'style.scss'
      ],
      dest: 'css',
      ext: '.css'
    }]
  }
},
watch: {
  styles: {
    files: ['**/*.scss'],
    tasks: ['style']
  }
},
postcss: {
  options: {
    map: {
      inline: false, // save all sourcemaps as separate files...
      annotation: 'css/maps/' // ...to the specified directory
    },

    processors: [
      require('pixrem')(), // add fallbacks for rem units
      require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
      require('cssnano')() // minify the result
    ]
  },
  dist: {
    src: 'css/style.css',
    dest: 'css/styles.min.css'
  }

}});

Edit, I've included whole grunt file in the snippet. 

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    uglify: {
      dist: {
        options: {
          banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
        },
        files: {
          'js/scripts.min.js' : [

          ]
        }
      },
      dev: {
        options: {
          banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
          beautify: true,
          compress: false,
          mangle: false
        },
        files: {
          'js/scripts.js' : [

          ]
        }
      }
    },
    sass: {
      dist: {
        options: {
          compass: true,
          style: 'expanded'
        },
        files: [{
          expand: true,
          cwd: 'sass',
          src: [
            'style.scss'
          ],
          dest: 'css',
          ext: '.css'
        }]
      }
    },
    watch: {
      styles: {
        files: ['**/*.scss'],
        tasks: ['style']
      }
    },
    postcss: {
      options: {
        map: {
          inline: false, // save all sourcemaps as separate files...
          annotation: 'css/maps/' // ...to the specified directory
        },

        processors: [
          require('pixrem')(), // add fallbacks for rem units
          require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
          require('cssnano')() // minify the result
        ]
      },
      dist: {
        src: 'css/style.css',
        dest: 'css/styles.min.css'
      }

    }

  });



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

  // Default task(s).
  grunt.registerTask('style', [
    'sass',
    'postcss'
  ]);

  // Default task(s).
  grunt.registerTask('default', [
    'uglify:dist',
    'sass',
    'postcss',
    'watch'
  ]);

};

Upvotes: 0

Views: 660

Answers (1)

Farside
Farside

Reputation: 10333

I think the issue might be, that it doesn't support last 3 versions directive, that's why it doesn't add anything.

Here's the reference on the possible parameters autoperfixer processor might interpret: https://github.com/ai/browserslist

Try to use something alike:

last 2 versions

hopefully this help, as everything else seems to be correct.

Upvotes: 1

Related Questions