利用命令行替代自动化构建工具完成工作流

前端工作中经常需要使用一些自动化工具来完成自动化构建，最常见的就是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执行 运行则全部自动构建
    }
}