如何在一起使用咕噜-自动复位器和咕噜-萨克斯？

Question

我刚开始学习工装和sass，这是一个很好的学习体验。)目前，我已经配置了grunt，以便在构建时将我的SCSS降到最低。我想使用咕噜自动复位器插件来添加供应商前缀，但是我并不完全确定如何将它集成到现有的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']);