前端工作中經常需要使用一些自動化工具來完成自動化構建，最常見的就是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執行 運行則全部自動構建
}
}
