如何将grunt autoprefixer和grunt sass结合使用

Question

我对grunt工具和sass很陌生，这是一次很棒的学习经历。：）我目前配置了grunt，以便在构建时连接/最小化我的SCSS。我想使用grunt autoprefixer插件来添加供应商前缀，但我不完全确定如何将其集成到我现有的Gruntfile中。在下面的代码中，我已经开始实现它（请参阅注释后的"TODO"部分），但如果有人能为我指明正确的方向，让它发挥作用，我将不胜感激：）

这是我当前的Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      options: {
        sourceMap: true
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/foundation.css': 'scss/foundation.scss'
        }
      }
    },
    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_components/foundation/js/vendor/',
        src: '**',
        flatten: 'true',
        dest: 'js/vendor/'
      },
      iconfonts: {
        expand: true,
        cwd: 'bower_components/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_components/foundation/js/foundation/foundation.js',
          // Pick the componenets you need in your project
          'bower_components/foundation/js/foundation/foundation.abide.js',
          'bower_components/foundation/js/foundation/foundation.accordion.js',
          'bower_components/foundation/js/foundation/foundation.alert.js',
          'bower_components/foundation/js/foundation/foundation.clearing.js',
          'bower_components/foundation/js/foundation/foundation.dropdown.js',
          'bower_components/foundation/js/foundation/foundation.equalizer.js',
          'bower_components/foundation/js/foundation/foundation.interchange.js',
          'bower_components/foundation/js/foundation/foundation.joyride.js',
          'bower_components/foundation/js/foundation/foundation.magellan.js',
          'bower_components/foundation/js/foundation/foundation.offcanvas.js',
          'bower_components/foundation/js/foundation/foundation.orbit.js',
          'bower_components/foundation/js/foundation/foundation.reveal.js',
          'bower_components/foundation/js/foundation/foundation.slider.js',
          'bower_components/foundation/js/foundation/foundation.tab.js',
          'bower_components/foundation/js/foundation/foundation.tooltip.js',
          'bower_components/foundation/js/foundation/foundation.topbar.js',
          'bower_components/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']);
};

Answer 1

您应该自动修改您的sass结果，因此您必须先运行sass，然后再运行autoprefixer。

假设你所有的css样式都在css/foundation.css:中

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

在build任务中：

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