一、package.json脚本在哪？
NPM 允许在package.json文件里面，使用scripts字段定义脚本命令。
{
//此处省略其它字段...
"scripts": {
"build": "node build.js"
},
}
使用
$ npm run build
二、举例
我想要的效果：
效果.png
实现：
1、打开NPM。
2、搜索对应的模块postcss或者 autoprefixer
第1、2步.png
3、下拉找到CLI的代码
//用于下载模块
$ npm install postcss-cli autoprefixer
//放到package.json的scripts中
$ npx postcss *.css --use autoprefixer -d build/
我的package.json的scripts中是这样的
"scripts": {
"postcss": "postcss *.css --use autoprefixer -d css/"
},
解释：
- 1、"postcss"
可以自己取名。 - 2、"postcss *.css --use autoprefixer -d css/"
把当前文件下所有后缀为.css的文件自动拼装css前缀且放到css文件夹中。
4、执行代码
终端执行：
npm install postcss-cli autoprefixer
效果如下，多了node_modules、package-lock.json等文件
QQ20171203-162658@2x.png
再执行：
npm run postcss
命令行出现效果如下，说明成功了
说明成功了.png
最终效果：
最终效果.png
三、常用的脚本
{
"scripts": {
// 1、css自动加前缀，处理浏览器兼容问题。
"autoprefixer": "postcss *.css --use autoprefixer -d build/",
// 2、 压缩css
"csso": "csso 你的css.css --output out.css",
// 3、检测js是否有错误
"js:lint": "eslint src/js",
// 4、压缩图片
"image:imagemin": "app=imagemin-cli npm run check; imagemin src/images dist/images -p",
// 5、启动服务器，监听css js ,自动刷新
"server": "browser-sync start --server --files '*.css, *.js'",
}
}
链接：
1、自动加前缀
2、压缩CSS
3、检测js
4、压缩图片
ps:3、4、5没试过，可能存在一些问题，希望各位大佬多多指教。
