【前端工程化学习笔记】2-1 自动化构建简介

 1、自动化构建是前端工程化当中重要的组成部分

• 何为自动化：通过机器代替手工完成工作
• 何为构建：可理解为转换，把一个东西转换成另一个东西
• 何为自动化构建：把源代码自动化转换成生产环境中可以运行的代码，这个过程称为自动化构建工作流

2、自动化构建的作用

    脱离运行环境的问题，在开发阶段使用提高效率的语法、规范和标准，比如ES最新标准 sass 借助模板引擎创建重复的文件等

3、自动化构建初体验

npm scripts实现自动化构建最简单的方式（package.json中添加scripts: {}），适合构建简单的，复杂的会非常吃力    

// yarn add browser-sync --dev : 用于启动测试服务器运行项目

// yarn add npm-run-all --dev: 用于并行运行命令，不被阻塞影响

// 所在目录package.json

        {

            //...

            "scripts": {

                "build": "sass scss/main.scss css/style.css --watch", 
// --watch当文件发生变化时自动编译，但是文件会阻塞在这里不懂，可用借助npm run all的方式实现并行运行命令
                "preserve":"yarn build",
// preserve是scripts的钩子函数，会在serve之前自动运行，以防serve运行前没有css样式文件可用
                "serve": "browser-sync --files\"css/*.css\"", 
// --files监听文件变化，自动更新页面，不需要手动刷新
                "start": "run-p build serve"
// 同时执行build和serve命令

            }

            //...

        }

4、常用的自动化构建工具(webpack严格说是打包工具，不放这里)

•     grunt：插件生态完善，但工作过程基于临时文件实现，构建速度较慢。每一步都有磁盘读写操作。
•     gulp:解决了grunt构建速度慢的问题，基于内存实现，速度快，默认可执行多个任务，效率提高；使用方式直观易懂；插件生态完善
•     fis：把典型需求集成在内部，微内核，更容易实现资源加载、模块化开发等，大而全。初学fis更适合，灵活多变另外两个更适合