学习什么是自动化构建，首先要了解什么是构建       

        就是开发代码转换成生产代码的过程

那什么又是自动化呢？

        就是用一条命令执行多个任务，可以成为自动化

总结来说用一条命令执行多个任务，自动完成开发代码到生产代码的转换就叫自动化构建

 那如何构建，构建的内容又是什么呢？

        less 转化成 css , 开发人员用 less 更容易编写，因浏览器没有引擎解析less文件所以需要转化

        ES6+ 转化成低版本浏览器可兼容的 ES5

        压缩 html js 图片 css 

        重命名文件

        完成格式化的校验

        发布服务器 等

 自动化构建也有不少的工具，其中 npm scripts 是最为简单的

npm scripts  

        什么是 npm scripts 呢？

                在 package.json 文件中的scripts字段下配置脚本命令

         第一步要了解的是 npm scripts 任务的执行方式?

                串行 和 并行

         并行执行在 windows 下不起作用 ， 以代码解释

//create task1 task2 task3

// task1.js
setTimeout(() =>{
    console.log('task1 ...........')
},3000)

// task2.js
setTimeout(() =>{
    console.log('task2 ...........')
},2000)

// task3.js
setTimeout(() =>{
    console.log('task3 ...........')
},3000)

//package.json
{
    ...
    "scripts" : {
        "win-p" : "npm task1.js & npm task2.js & npm task3.js"    
    }
    ...
}

//node terminal
> npm run win-p

task1 ...........
task2 ...........
task3 ...........

// 期待结果
task3 ...........
task2 ...........
task1 ...........
//所以npm_scripts 的并行执行并不起作用

        可以安装插件 npm-run-all 解决这个问题

// node terminal
> npm i npm-run-all -D

//命令使用
run-p script1 script2 script3 //并行
run-s script1 script2 script3 //串行

//package.json
{
    ...
    "scripts" : {
        "t1": "node task1.js",
        "t2": "node task2.js",
        "t3": "node task3.js",
        "p": "run-p t1 t2 t3",
        "s": "run-s t1 t2 t3"
    }
    ...
}

// node terminal
> npm run p
task3 ...........
task2 ...........
task1 ...........

自动化构建 less 转化成 css 的脚本 和 压缩 css 的脚本

        首先要安装 less 插件 和 minify 插件

> npm init --yes
> npm i less -g
> npm i minify -g

// create main.less
/* 
    body 的背景颜色
    h1 的字体颜色
*/

@bg-color : skyblue;
@font-color : green;

body {
    background-color: @bg-color;
}

h1 {
    color: @font-color;
}

// 转换命令
> lessc main.less main.css

// main.css
/* 
    body 的背景颜色
    h1 的字体颜色
*/
body {
  background-color: skyblue;
}
h1 {
  color: green;
}

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

//执行命令
> npm run style

构建脚本文件

        要安装构建脚本文件的插件 babel-core, babel-cli, babel-preser-env

        babel 就是 可以将ES6+的 js 代码转成 ES5

// node terminal
> npm init --yes
> npm i babel-core babel-cli -g
> npm i babel-preset-env -g
-- 配置转换规则  .babelrc
-- 在package.json 中添加转换命令 babel src -d dist
-- 执行转换命令

// .babelc
{
    "presets": [
         "env"
    ]
}

// package.json
{
    ...
    "scripts" : {
           "script" : "babel js -d script"
    }
    ...
}

//执行命令
> npm run script

ESlint 格式校验

// node terminal
> npm init --yes
> npm i eslint -g
> eslint --init

--检查 js 代码格式
> eslint path/filename.js
> eslint path/dirname

// .eslintrc
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "indent" : ["error" , 4], // 缩进4个字符
        "quotes" :["error" , "double"]    //必须是双引号
    }
}

stylelint 格式校验

        stylelint 文件中 的 rules 属性值可以自定义规则

//node terminal
> npm init --yes
> npm i stylelint -g
> npm i stylelint-config-standard -g
-- 创建配置文件 .stylelintrc.json
检查css
stylelint **/*.css
stylelint path/filename.css

// create .stylelintrc.json
{
    "extends" : "stylelint-config-standard",
    "rules":{
        "block-no-empty" : true //不能有空的代码块    
    }
}