Grunt grunt-postcss Autoprefixer不能正常工作

我已经跳进了一个非盈利的开源项目,并且想要帮助一下,但是我不熟悉Grunt。 我做了一些研究,不知道为什么configuration不起作用。

这是我正在尝试使用的插件。 它允许应用几个后处理器,但我现在只需要Autoprefixer: https : //github.com/nDmitry/grunt-postcss

configuration:

  • Gruntfile.js http://pastebin.com/4Ud0sa1W
  • grunt/concurrent.js http://pastebin.com/Satr1wSK
  • grunt/sass.js http://pastebin.com/rc6evWas
  • grunt/watch.js http://pastebin.com/eGBpFSLs

任务得到执行没有问题:

 laptop:website lextoc$ grunt sass:postcss Running "sass:postcss" (sass) task Done. 

但是,CSS文件没有得到所需的供应商前缀,我使用display: flex来检查它是否工作。

原来的项目(我分叉它)可以在这里find: https : //github.com/faforever/website

以下似乎成功工作…

恢复到原始文件

  1. 首先,我build议您将所有代码示例(即,您提供了一个pastebin的代码示例)还原到可以在您分叉的github仓库中find的原始代码版本*。 即以下文件:

    1. Gruntfile.js
    2. 咕噜/ concurrent.js
    3. 咕噜/ sass.js
    4. 咕噜/ watch.js

*恢复到原来的版本只会使执行以下步骤变得更容易。


postcss的任务设置

  1. 创build一个名为postcss.js的新文件,并将其保存到项目目录中名为grunt的文件夹中。 (因为许多项目的其他任务都是以独立的.js文件forms存在的,所以我们也会为这个新项目做同样的事情)

postcss.js的内容应该如下:

 module.exports = { prefix: { options: { processors: [ require('autoprefixer')({ browsers: ['last 8 versions', 'ie 9'] }) ] }, src: './public/styles/css/*.css' } }; 

Gruntfile.js

  1. 接下来,更新Gruntfile.js名为prod的现有注册任务,如下所示:
 // ... grunt.registerTask('prod', [ 'sass:dist', 'postcss:prefix', 'concat:js', 'uglify:dist' ]); // ... 

注意在TaskList数组中添加'postcss:prefix' 。 另外,不需要添加grunt.loadNpmTasks('grunt-postcss'); 因为这些任务是通过读取require('load-grunt-tasks')(grunt);读取的require('load-grunt-tasks')(grunt);


更新watch.js

  1. grunt文件夹中find的watch.js文件中名为sass的任务应更新如下:
 // ... sass: { files: ['public/styles/**/*.scss'], tasks: ['sass:dev', 'postcss:prefix'] }, // ... 

请注意添加到tasks数组中的'postcss:prefix' 。 这将确保在.scss文件转换为.css之后应用前缀。


补充笔记:

  1. 您可能还需要将autoprefixer添加到您的软件包中:

$ npm install autoprefixer --save-dev

  1. 现在,当您运行$ grunt serve (…并将任何编辑保存到.scss文件)$ grunt prod ,生成的.css文件将包含所需的供应商前缀。

  2. 运行$ grunt sass:postcss不再适用。

有同样的问题。 你试试这个:

 postcss: { options: { processors: [ require('autoprefixer')({browsers: ['last 8 versions', 'ie 9']}) ] }, src: 'public/styles/css/*.css' }