Grunt autoprefixer无效

Question

我正在尝试在Gruntfile.js中设置autoprefixer Grunt任务。有些东西是错误的，因为所有代码都在编译但没有被自动反射。我已经阅读了所有autoprefixer任务documentation并且我做了很多更改，但是所有这些更改都失败了。

"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' ] );
};

这是package.json文件：

{
  "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"
  }
}

在添加Autoprefixer配置之前，这些设置已成功使用。所以我觉得我做错了。

Answer 1

你的Gruntfile.js看起来很好！我已经尝试过你的设置，它按预期工作。您是否尝试删除并安装依赖项grunt-contrib-sass，grunt-postcss和autoprefixer？您是否尝试过单独运行任务并检查结果？

我不确定为什么输入和输出在下面的代码段中是相同的：

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

也许你想在将来使用另一个文件名，但除此之外你可以删除最后一部分：

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

很抱歉马上回答（还没有足够的分数）