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
以下似乎成功工作…
恢复到原始文件
-
首先,我build议您将所有代码示例(即,您提供了一个pastebin的代码示例)还原到可以在您分叉的github仓库中find的原始代码版本*。 即以下文件:
- Gruntfile.js
- 咕噜/ concurrent.js
- 咕噜/ sass.js
- 咕噜/ watch.js
*恢复到原来的版本只会使执行以下步骤变得更容易。
postcss的任务设置
- 创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
- 接下来,更新
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
- 在grunt文件夹中find的watch.js文件中名为
sass
的任务应更新如下:
// ... sass: { files: ['public/styles/**/*.scss'], tasks: ['sass:dev', 'postcss:prefix'] }, // ...
请注意添加到tasks
数组中的'postcss:prefix'
。 这将确保在.scss
文件转换为.css
之后应用前缀。
补充笔记:
- 您可能还需要将autoprefixer添加到您的软件包中:
$ npm install autoprefixer --save-dev
-
现在,当您运行
$ grunt serve
(…并将任何编辑保存到.scss
文件)或$ grunt prod
,生成的.css
文件将包含所需的供应商前缀。 -
运行
$ grunt sass:postcss
不再适用。
有同样的问题。 你试试这个:
postcss: { options: { processors: [ require('autoprefixer')({browsers: ['last 8 versions', 'ie 9']}) ] }, src: 'public/styles/css/*.css' }