前端工作中经常需要使用一些自动化工具来完成自动化构建，最常见的就是css前缀补充，js/css代码压缩等。
其实仅使用命令行即可完成一些自动化工具如：gulp 常做的事，甚至更简单一些。
CSS自动化
完成CSS自动化，需要使用到postcss-cli和 它的插件 autoprefixer
使用命令行，先安装
npm i autoprefixer postcss-cli
添加前缀
也有在线添加css前缀：https://autoprefixer.github.io/
命令行的话，直接用postcss命令
先安装postcss
npm i postcss
为css添加前缀，并保存到build文件夹内
postcss *.css --use autoprefixer -d build/
代码压缩
代码压缩需要先安装，cssnano
npm i cssnano
在根目录下新建一个postcss.config.js 并配置
module.exports = {
plugins: [
require('cssnano')({
preset:'default',
}),
],
};
然后就可以直接使用将代码压缩
postcss index.css
为了让压缩和前缀同时运行，可以进一步配置postcss.config.js
module.exports = {
plugins: [
reqyure('autoprefixer'),
require('cssnano')({
preset:'default',
}),
],
};
这样就可以先添加前缀再压缩CSS。
postcss *.css -d build/
JS自动化
JS也可以进行代码压缩
npm i uglify-es //最新版，es支持es6
然后运行以下指令同样将压缩后的js保存在build目录下
uglifyjs index.js > build/index.js
小结
每次自动化后需要reset（删除）build目录，否则下次运行任务会提示文件已存在。
同时，我们可以将这些命令写入package.json。利用script来最大化办公效率。
{
"scripts": {
"reset": "rm -rf build/; mkdir build",
"css": "postcss *.css -d build/",
"js": "uglifyjs index.js > build/index.js",
"build": "npm run reset && npm run css && npm run js"
}
这样没事直接使用命令行输入：build 就能自动化构建
图片压缩
使用图片压缩工具，能有效降低图片大小，也可以加入自动化流程中。
首先安装：
npm i imagemin-cli
使用命令将制定文件夹下的图片压缩，并存放至build目录下
imagemin images/* --out-dir=build/images
同样可以将图片压缩写入package.json的script中：
{
"scripts": {
"reset": "rm -rf build/; mkdir build",
"css": "postcss *.css -d build/",
"js": "uglifyjs index.js > build/index.js",
"images": "imagemin images/* --out-dir=build/images", //添加图片压缩脚本
"build": "npm run reset && npm run css && npm run js && npm run images"
}
}
结论
实际工作中，不但需要压缩 css/js/img ，还需要将文件下的所有引用同步保存至新文件夹，以保证新的build文件夹下的文件均能正常使用，通常需要同步引用的有html/json
所以package.json继续完善如下：
{
"scripts": {
"start": "static-server", //用于开启静态服务器，npm i static-server,本文不涉及
"reset": "rm -rf build/; mkdir build", //每次重建将删除原文件夹并新建
"css": "postcss *.css -d build/", //添加css前缀并压缩
"js": "uglifyjs index.js > build/index.js", //压缩js
"images": "imagemin images/* --out-dir=build/images", //压缩img
"static-files": "cp *.html build/ && cp *.json build/",
//拷贝json/html至build保证引用
"build": "npm run reset && npm run static-files && npm run css && npm run js && npm run images"
//build执行 运行则全部自动构建
}
}
至此，不需要依赖第三方工具，仅使用命令行就可以完成工作流任务。
同时提一下，将这些安装包写入package.json的devDependencies中，就可以告知包使用者，进一步简化操作方式。
如：
npm i postcss -D //-D 可以在安装此包的时候同时写入package.json的devDependencies
最终结果如下：
{
"devDependencies": { //指出了此工程的所有依赖
"autoprefixer": "^7.1.1",
"cssnano": "^3.10.0",
"imagemin-cli": "^3.0.0",
"postcss": "^6.0.5",
"postcss-cli": "^4.1.0",
"uglify-es": "^3.0.23"
},
"scripts": {
"start": "static-server", //用于开启静态服务器，npm i static-server,本文不涉及
"reset": "rm -rf build/; mkdir build", //每次重建将删除原文件夹并新建
"css": "postcss *.css -d build/", //添加css前缀并压缩
"js": "uglifyjs index.js > build/index.js", //压缩js
"images": "imagemin images/* --out-dir=build/images", //压缩img
"static-files": "cp *.html build/ && cp *.json build/",
//拷贝json/html至build保证引用
"build": "npm run reset && npm run static-files && npm run css && npm run js && npm run images"
//build执行 运行则全部自动构建
}
}
