在拉钩学习的笔记（二十二）自动化构建

1、自动化构建
    构建过程就是 源代码 转换成 生产代码 的过程
    为什么构建（构建内容）
        一些代码需要编译（css,js），保证浏览器的兼容性：将 Less 或 Sass 转换成 css；将 ES6+ 的新语法转成 ES5
        有些代码需要压缩（css、js、HTML、图片等）：压缩后的代码体积更小，加载更快，节省带宽
        有些代码需要做格式化校验，统一代码风格
    将less 转 css ： 安装 less 插件（npm i less -g)； 通过 lessc 命令转换（lessc input.less output.css）
    自动化构建：自动化构建是指将手动构建任务，通过命令自动执行的过程
2、npm script 实现自动化构建的最简方式
    什么是 npm script
        npm 允许在 package.json 文件中，使用 script 字段定义脚本命令
    npm script自定义脚本命令 ： 声明命令(package.json) "script":{"foo":"node bar.js"}； 执行命令 npm run foo 等同于 node bar.js
    npm script 任务的执行方式：
        并行（parallel）： 任务之间没有先后顺序，同时执行可以提高执行效率   （并行执行）在 windows 下不起作用
        串行（series）：任务之间有先后顺序，先执行前一个任务，后执行下一个任务
    npm-run-all： 安装  npm i npm-run-all -D 
        并行执行： npm-run-all -p 脚本1 脚本2 简写 run-p 脚本1 脚本2 
        串行执行： npm-run-all -s 脚本1 脚本2 简写 run-s 脚本1 脚本2 
3、构建样式文件
    将 less 转成 css  npm i less -g     lessc input.less output.css
    压缩 css 文件       npm i minify -g
    步骤： 初始化项目（npm init --yes）； 添加 script 命令（less+minify）； 执行 script 命令（npm run 命令）
4、构建脚本文件
    将 不兼容的ES6新语法 转成 兼容性好的ES5
    Babel插件可以将 ES6+ 语法转成 ES5
    babel 转换命令 
        单个文件：babel input.js --out-file output.js 或 babel input.js -o output.js
        整个目录： babel src --outd-dir dist 或 babel src -d dist
    步骤：初始化项目（npm init --yes）； 安装Babel （npm install -g babel-core babel-cli） ； 安装转码规则（npm install -D babel-preset-env）； 配置转换规则（.babelrc）； 在 npm script 中添加转换命令（babel src -d dist）； 执行转换命令
5、代码格式校验
    不同的工程师，写的代码风格不同；项目代码提交时，需要保持统一的代码格式
    可以通过工具完成代码格式校验：提供代码规范，根据编码规范，自动检查代码
    ESLint：对 JavaScript 代码格式进行检查      https://eslint.org/
        初始化项目（npm init --yes）
        安装 ESLint（npm i eslint -g）
        初始化配置文件（eslint --init）
        检查 js 代码格式 ： 单个文件 （eslint path/filename.js） 整个目录 （eslint path/dirname）
    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）