构建过程

为什么构建？

• 一些代码需要编译（CSS,JS），保证浏览器的兼容性
  • 将Less或者Sass换成CSS
  • 将ES6+的新语法换成ES5
• 有些代码需要压缩（CSS,JS,HTML，图片等）
  • 压缩之后的代码体积更小，加载更快，节省带宽
• 有些代码需要做格式化校验，统一代码风格

npm scripts

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

  
  自动化

&并行执行在windwos下不起作用
解决办法

构建样式文件

  "scripts": {
    "style": "lessc styles/main.less styles/main.css && minify styles/main.css > styles/main.min.css"
  },

npm run style

如果没有lessc命令，就安装一下

使用serve发布项目

npm i serve -g
serve .

构建脚本文件

Babel可以将ES6+新语法转换为ES5

• 初始化项目

npm init -yes

• 安装Babel

npm install -g babel-core babel-cli

• 安装转码规则

npm install -g babel-preset-env

• 配置转换规则

.babelrc

• 在npm scripts中添加转换命令

babel src -d dist

• 执行转换命令

npm run script

ESLint（JS代码格式校验）

• 不同的工程师，写的代码风格不同
• 项目代码提交时，需要保持统一的代码格式
• 可以通过工具完成代码格式校验
  • 提供编码规范
  • 根据代码规范检查代码

使用ESLint

• 初始化项目

npm init --yes

• 安装ESLint

npm i eslint -g

• 初始化配置文件

eslint --init

• 检查JS代码格式
• 单个检查

eslint path/filename.js

• 整个目录

eslint path/dirname

eslint规则查看地址

www.eslint.org

在erslint.json内的rules指定语法规则

StyleLint（CSS代码格式校验）

• 初始化项目

npm init --yes

• 安装StyleLint

npm install --global stylelint

• 安装检测标准

npm install --global stylelint-config-standard

• 创建配置文件

.stylelintrc.json

• 检测CSS代码格式
  • 单个文件（stylelint path/filename.css）
  • 整个项目（stylelint */.css）