现在各种总自动化工具横行，往往每个项目用的还不太一样。
这里用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即可监听