[英]grunt-autoprefixer to grunt-postcss
grunt-autoprefixer
说“这个项目已被弃用,取而代之的是 grunt-postcss。” 所以,我想把它改成 grunt-postcss。 我当前在Gruntfile.js
中的grunt-autoprefixer
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
如果升级到grunt-postcss
。 如何在 Gruntfile.js 中编写我的设置?
我在 grunt-postcss 中看到了 README,但我没有得到它。 似乎某些值无法映射到 grunt-postcss 的新设置。
它像任何其他 postcss 处理器一样完成。 例如,请参阅此内容:
var autoprefixer = require('autoprefixer-core');
grunt.initConfig({
postcss: {
options: {
processors: [
autoprefixer({
browsers: ['> 0.5%', 'last 2 versions']
}).postcss
]
},
dist: {
files: {
'dist/': 'css/*.css'
}
}
}
});
autoprefixer
处理器中browsers
选项的使用已更改。
现在您需要将browsers
选项移动到您的 package.json 文件中:
Gruntfile.js
...
processors: [
...
// No autoprefixer 'browsers' option
require('autoprefixer')(),
...
]
...
package.json
{
...
// 'browserslist' option at the end of the file just above the last curly brace
'browserslist': [
'last 2 versions',
'> 0.5%'
]
}
请参阅: https : //github.com/browserslist/browserslist#browserslist-
(这个答案是我从这里的类似答案中提取的: https : //stackoverflow.com/a/64079551/12320578 )
postcss-autoprefixer
使用的一个例子:
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
postcss: {
options: {
processors: [
require('autoprefixer')({grid: 'autoplace'}),
],
map: {
inline: false, // save all sourcemaps as separate files...
annotation: 'assets/css/' // ...to the specified directory
}
},
dist: {
files: {
// Generated file target location and source location
'assets/css/style.min.css': 'assets/css/style.css',
'assets/css/info.min.css': 'assets/css/info.css'
}
// or:
/*files: [
{
expand: true,
src: ['assets/css/*.css', '!**/*.min.css'],
ext: '.min.css',
extDot: 'first'
}
]*/
}
},
watch: {
styles: {
files: ['assets/css/style.css', 'assets/css/info.css'],
// or:
/*files: ['assets/css/*.css', '!assets/css/*.min.css'],*/
tasks: ['postcss']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
};
package.json
{
... // Other already existing options
"browserslist": [
"last 4 versions",
"> 0.5%"
]
}
请参阅https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.