分享个人 Full-Stack JavaScript 项目开发经验
如果你还没使用过 Grunt，可先阅读Grunt的安装及其插件的选择。
在样式表开发完成后，我们希望为其自动添加 CSS3 的浏览器前缀或在其它浏览器中的兼容写法，然后经过兼容性测试后将其压缩成生产环境可用的稳定版本。本文介绍如何使用 Grunt 及其 grunt-postcss、autoprefixer、grunt-contrib-cssmin 插件为我们自动化完成这项任务。
安装相关的插件开发依赖：
yarn add grunt-postcss --dev
yarn add autoprefixer --dev
yarn add grunt-contrib-cssmin --dev在 Gruntfile 中添加插件配置：
'use strict';
module.exports = function (grunt) {
const {dir} = require('./Grunt.config');
grunt.initConfig({
/*!
* 使用最新的 autoprefixer 为 css 添加浏览器前缀
* https://www.npmjs.com/package/autoprefixer
* https://caniuse.com/
*/
postcss: {
options: {
// 不再使用 sourcemap
map: false,
processors: [
// 使用 autoprefixer 的默认配置
require('autoprefixer')()
]
},
dist: {
src: `${dir.cssPro}/*.css`
}
},
// 压缩自编写的 css 文件到生产环境
cssmin: {
target: {
files: [{
expand: true,
cwd: `${dir.cssDev}`,
src: ['**/*.css', '!*.min.css', '!vendor/*.css'],
dest: `${dir.cssPro}`,
ext: '.css'
}]
}
}
});
require('load-grunt-tasks')(grunt);
// 把 sass 编译后的 css 添加现代浏览器的前缀
grunt.registerTask('css-prefix', ['postcss']);
// 压缩自编写的 css 到生产环境
grunt.registerTask('css-min', ['postcss', 'cssmin']);
}在 package.json 中添加添加 browserslist 字段。在这里配置可以让如 babel 的其它编译器可以共用一个配置。
{
"browserslist": [
"last 2 versions",
">0.2%",
"not op_mini all",
"not dead",
"ie 10"
]
}了解更多 browserslist 的配置说明，请点击这里。最后把它们压缩到生成环境目录。
如果你不确定所使用样式是否满足你的兼容要求，可以通过caniuse.com进行查询。如果浏览器支持该样式，autoprefixer 可以很好地帮我们处理为兼容的写法。