Grunt grunt-postcss Autoprefixer无法正常工作

Question

我已经跳进了一个非营利性的开源项目，想要帮助一点，但我不熟悉Grunt。我做了一些研究，无法弄清楚配置为什么不起作用。

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

配置：

• 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检查它是否有效。

原始项目（我分叉）可以在这里找到： https://github.com/faforever/website

Answer 1

以下似乎成功运作......

恢复原始文件

1. 首先，我建议您将所有代码示例（即您提供 pastebin 的代码）还原为可以在github repo中找到的原始代码版本分叉*。即以下文件：

   1. Gruntfile.js
   2. grunt/concurrent.js
   3. grunt/sass.js
   4. grunt/watch.js

*恢复原始版本只会让您更轻松地执行以下步骤。

postcss

的任务设置
1. 创建名为 postcss.js 的新文件，并将其保存到项目中名为 grunt 的文件夹中目录。 （由于该项目的许多其他任务作为单独的.js文件存在，我们也将对此新文件执行相同的操作）。

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);的行加载的。

更新 watch.js

1. watch.js 文件中名为sass的任务，位于 grunt 中文件夹，应更新如下：

// ...
sass: {
    files: ['public/styles/**/*.scss'],
    tasks: ['sass:dev', 'postcss:prefix']
},
// ...

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

附加说明：

1. 您可能还需要在包中添加autoprefixer：

$ npm install autoprefixer --save-dev

1. 现在，您运行$ grunt serve （...并保存对.scss文件的所有修改）或$ grunt prod结果{{ 1}}文件将包含所需的供应商前缀。

2. 正在运行.css不再适用。

Answer 2

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

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