使用NPM脚本,处理CSS兼容问题

一、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等文件

[email protected]

再执行：

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没试过，可能存在一些问题，希望各位大佬多多指教。