自动化构建

什么是构建

构建过程：源代码 -> 生产代码

为什么构建

• 一些代码需要编译（css，js），保证浏览器的兼容性；
  将 less 或 saas 转换为 css
  将 ES6+ 的新语法转成 ES5
• 有些代码需要压缩（css，js，html，图片）；
  压缩后的代码体积小，加载快，节省带宽
• 有些代码需要做格式化娇艳，统一代码风格
  

体验构建

将 less 转成 css

• 安装 less 插件（npm i less -g）
• 通过 lessc 命令转换 （lessc input.scss output.css）

什么是自动化构建

• 将手动构建任务，通过命令自动执行的过程

npm scripts

什么是 npm scripts

什么是 npm scripts

• npm 允许在package.json 文件中，使用 scripts 字段定义脚本

自动化构建样式文件

npm scripts 中任务的执行方式

npm-run-all 插件

npm scripts 实践

构建样式文件

步骤

1、初始化项目：npm init --yes
2、添加 scripts 命令：less + minify
3、执行 scripts 命令：npm run 命令

• 将 less 转成 css

npm i less -g
lessc input.less output.css

• 压缩 css 文件

npm i minify -g
lessc input.css > input.min.css

构建脚本文件

• Babel 插件可以将 ES6+ 新语法转成 ES5

步骤

1、初始化项目（npm init --yes）
2、安装 Babel （npm i -g babel-core babel-cli）
3、安装转码规则（npm i -D babel- preset-env）
4、配置转换规则（.babelIrc）

{
  "presets": [
    "es2015"
  ]
}

5、在 npm scripts 中添加转换命令( babel src -d
dist )
6、执行转换命令

ESLint 对 js 代码格式进行检查

使用 ESLint

• 初始化项目( npm init --yes )
• 安装 ESLint ( npm i eslint -g )
• 初始化配置文件 ( eslint --init )
• 检查 JS 代码格式
• 单个文件 (eslint path/filename.js)
• 整个目录(eslint path/dirname)

StyleLint 对 css 代码格式进行检查

使用 StyleLint

• 初始化项目( npm init --yes )
• 安装 StyleLint ( npm install --global stylelint )
• 安装检测标准 ( npm install --global stylelint-config- standard )
• 创建配置文件 ( .stylelintrc.json )
• 检查 CSS 代码格式
  1、单个文件 ( stylelint path/filename.css )
  2、整个项目( stylelint **/*.css )