javascript - how to use grunt-autoprefixer and grunt-sass together?

I'm new to grunt tooling and sass in general, it's been a great learning experience. :) I currently have grunt configured to concat/minimize my SCSS on build. I would like to use the grunt-autoprefixer plugin to add vendor prefixes, however I'm not entirely sure how to integrate it into my existing Gruntfile. In the code below I've started to implement it ( see the mented out "TODO" section), but if anyone could point me in the right direction to get it working it'd be much appreciated :)

Here's my current Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        sourceMap: true
      },

      dist: {
        options: {
          outputStyle: 'pressed'
        },
        files: {
          'css/foundation.css': 'scss/foundation.scss'
        }
      }
    },

    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_ponents/foundation/js/vendor/',
        src: '**',
        flatten: 'true',
        dest: 'js/vendor/'
      },

      iconfonts: {
        expand: true,
        cwd: 'bower_ponents/fontawesome/',
        src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
        dest: 'assets/fontawesome/'
      },

    },

    // TODO: setup autoprefixer
    // autoprefixer: {
    //   options: {
    //     // Task-specific options go here.
    //     browsers: ['last 2 versions', 'ie 8', 'ie 9']
    //   },
    //   your_target: {
    //     // Target-specific file lists and/or options go here.
    //   },
    // },


      'string-replace': {

        fontawesome: {
          files: {
            'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
          },
          options: {
            replacements: [
              {
                pattern: '../fonts',
                replacement: '../assets/fontawesome/fonts'
              }
            ]
          }
        },
      },

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          'bower_ponents/foundation/js/foundation/foundation.js',

          // Pick the ponenets you need in your project
          'bower_ponents/foundation/js/foundation/foundation.abide.js',
          'bower_ponents/foundation/js/foundation/foundation.accordion.js',
          'bower_ponents/foundation/js/foundation/foundation.alert.js',
          'bower_ponents/foundation/js/foundation/foundation.clearing.js',
          'bower_ponents/foundation/js/foundation/foundation.dropdown.js',
          'bower_ponents/foundation/js/foundation/foundation.equalizer.js',
          'bower_ponents/foundation/js/foundation/foundation.interchange.js',
          'bower_ponents/foundation/js/foundation/foundation.joyride.js',
          'bower_ponents/foundation/js/foundation/foundation.magellan.js',
          'bower_ponents/foundation/js/foundation/foundation.offcanvas.js',
          'bower_ponents/foundation/js/foundation/foundation.orbit.js',
          'bower_ponents/foundation/js/foundation/foundation.reveal.js',
          'bower_ponents/foundation/js/foundation/foundation.slider.js',
          'bower_ponents/foundation/js/foundation/foundation.tab.js',
          'bower_ponents/foundation/js/foundation/foundation.tooltip.js',
          'bower_ponents/foundation/js/foundation/foundation.topbar.js',
          'bower_ponents/alertify.js/lib/alertify.js',

          // include vendor js
          'js/vendor/jquery.unveil.js',
          'js/vendor/wow.js',

          // Using all of your custom js files
          'js/custom/*.js'

          ],
          // Concat all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

    uglify: {
      dist: {
        files: {
          // Shrink the file size by removing spaces
          'js/foundation.js': ['js/foundation.js']
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

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

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-string-replace');

  grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
  grunt.registerTask('default', ['watch']);
};

Here's my current Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        sourceMap: true
      },

      dist: {
        options: {
          outputStyle: 'pressed'
        },
        files: {
          'css/foundation.css': 'scss/foundation.scss'
        }
      }
    },

    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_ponents/foundation/js/vendor/',
        src: '**',
        flatten: 'true',
        dest: 'js/vendor/'
      },

      iconfonts: {
        expand: true,
        cwd: 'bower_ponents/fontawesome/',
        src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
        dest: 'assets/fontawesome/'
      },

    },

    // TODO: setup autoprefixer
    // autoprefixer: {
    //   options: {
    //     // Task-specific options go here.
    //     browsers: ['last 2 versions', 'ie 8', 'ie 9']
    //   },
    //   your_target: {
    //     // Target-specific file lists and/or options go here.
    //   },
    // },


      'string-replace': {

        fontawesome: {
          files: {
            'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
          },
          options: {
            replacements: [
              {
                pattern: '../fonts',
                replacement: '../assets/fontawesome/fonts'
              }
            ]
          }
        },
      },

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          'bower_ponents/foundation/js/foundation/foundation.js',

          // Pick the ponenets you need in your project
          'bower_ponents/foundation/js/foundation/foundation.abide.js',
          'bower_ponents/foundation/js/foundation/foundation.accordion.js',
          'bower_ponents/foundation/js/foundation/foundation.alert.js',
          'bower_ponents/foundation/js/foundation/foundation.clearing.js',
          'bower_ponents/foundation/js/foundation/foundation.dropdown.js',
          'bower_ponents/foundation/js/foundation/foundation.equalizer.js',
          'bower_ponents/foundation/js/foundation/foundation.interchange.js',
          'bower_ponents/foundation/js/foundation/foundation.joyride.js',
          'bower_ponents/foundation/js/foundation/foundation.magellan.js',
          'bower_ponents/foundation/js/foundation/foundation.offcanvas.js',
          'bower_ponents/foundation/js/foundation/foundation.orbit.js',
          'bower_ponents/foundation/js/foundation/foundation.reveal.js',
          'bower_ponents/foundation/js/foundation/foundation.slider.js',
          'bower_ponents/foundation/js/foundation/foundation.tab.js',
          'bower_ponents/foundation/js/foundation/foundation.tooltip.js',
          'bower_ponents/foundation/js/foundation/foundation.topbar.js',
          'bower_ponents/alertify.js/lib/alertify.js',

          // include vendor js
          'js/vendor/jquery.unveil.js',
          'js/vendor/wow.js',

          // Using all of your custom js files
          'js/custom/*.js'

          ],
          // Concat all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

    uglify: {
      dist: {
        files: {
          // Shrink the file size by removing spaces
          'js/foundation.js': ['js/foundation.js']
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

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

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-string-replace');

  grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
  grunt.registerTask('default', ['watch']);
};

Share Improve this question asked Mar 19, 2015 at 14:54 tdc 5,46412 gold badges59 silver badges107 bronze badges

The source for autoprefixer is the output CSS file of the Sass task. You should minify it afterwards. – helloanselm Commented Mar 19, 2015 at 15:02
@helloanselm so does this mean I need to change the SASS outputStyle setting to 'expanded', and then add an additional task to minify after the autoprefixer task? Is there any way to do it without adding more plugins? – tdc Commented Mar 19, 2015 at 15:36
I've been doing this with a minified file and it has been working fine. I do like to call my piled sass file main-unprefixed, use this as source for autoprefixer and have autoprefixer create a main file.But I think that's personal preference – KreaTief Commented Mar 19, 2015 at 17:34
Exactly. You can apply it to the minified, too but should re-minify it afterwards. – helloanselm Commented Mar 20, 2015 at 9:55

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

You should autoprefix your sass result, so you have to run sass first, and then run autoprefixer.

Assuming all your css styles are in css/foundation.css:

autoprefixer:{
  dist:{
    files:{
      'css/foundation.css':'css/foundation.css'
    }
  }
}

In your build task:

grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'autoprefixer' 'concat', 'uglify']);

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744310621a4567928.html

javascript - how to use grunt-autoprefixer and grunt-sass together? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - how to use grunt-autoprefixer and grunt-sass together? - Stack Overflow

1 Answer 1

相关推荐