npmscript 一键自动化构建 并实现postcss压缩输出

现在各种总自动化工具横行，往往每个项目用的还不太一样。
这里用webpack，那里用glup。每个工具的配置方法还不一样。
一些小项目也就用到了css js压缩 图片压缩 而已。
然而引入那些脱离自己掌控的工具，我觉得完全没必要。
可以根据自己的项目实际情况自己配置npmscript，既方便又灵活
适用于一些小项目 没用各种现成框架脚手架的项目
目前只实用于win平台 不兼容mac 请注意

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "config": {
    "port": 9999,
    "ip": "192.168.123.1"
  },
  "scripts": {
    "dummy": "cross-var echo $npm_package_config_port",
    "end": "rimraf js&& rimraf css&& rimraf images&&rimraf css-mini",
    "js-dir": "if not exist js make-dir js",
    "js-mini-dir": "if not exist js-mini make-dir js-mini",
    "js-main": "if not exist js/main.js echo \"hello\">js/main.js",
    "css-dir": "if not exist css make-dir css",
    "css-main": "if not exist css/main.css echo *{padding:0;margin:0} >css/main.css",
    "images-dir": "if not exist images make-dir images",
    "css-mini-dir": "if not exist css-mini make-dir css-mini",
    "index": "if not exist index.html echo nul>index.html",
    "http-server": "cross-var http-server -c-1 -o -a $npm_package_config_ip -p $npm_package_config_port",
    "opn-cli": "cross-var opn http://$npm_package_config_ip:$npm_package_config_port",
    "post-css-config": "echo nul>postcss.config.js&&ECHO module.exports = {plugins: [require('cssnano')({preset: 'default' }),],};>\"./postcss.config.js\" ",
    "f5":"browser-sync start --server --files \"css/*.css, js/*.js\"",
    
    "build": "npm-run-all  js-dir js-mini-dir js-main css-dir css-main images-dir css-mini-dir index post-css-config",
    "css": "postcss -w css/*.css -d css-mini",
    "http": "npm-run-all http-server",
    "js": "uglifyjs js/*.js -m -c  -o js-mini/main.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "cpr": "^3.0.1",
    "cross-var": "^1.1.0",
    "cssnano": "^3.10.0",
    "del-cli": "^1.1.0",
    "http-server": "^0.10.0",
    "make-dir-cli": "^1.0.0",
    "npm-run-all": "^4.1.2",
    "opn-cli": "^3.1.0",
    "postcss-cli": "^4.1.1",
    "rimraf": "^2.6.2",
    "uglify-js": "^3.2.1"
  } 
}

其中一些CMD命令解释:
echo {padding:0;margin:0} >css/main.css 在css文件夹下建立main.css 并写入{padding:0;margin:0}
if not exist css/main.css 如果css文件夹下没有main.css

config里是一些自定义变量可以自己改
port为自定义端口号
ip为自己的ip
步骤
1 copy本文件为package.json到你自定义的某个文件夹 然后npm install
2 命令npm run build 开始构建 构建完毕之后会自动创建js css images css-mini四个文件夹
3 命令npm run css 开始监听css文件 并压缩输出
4 命令 npm run http 建立静态服务 并打开浏览器
5 命令 npm run js 压缩js文件夹里的所有js 汇成js-mini文件夹下的main.js
PS 实时刷新没有写 因为本人还是喜欢按F5
build完之后 以后再用 直接npm run css即可监听