自动化构建

自动化构建就是把我们开发时候产生的源代码自动化的构建成生产环境可以运行的代码或者程序，一般我们会把这个自动化构建的过程叫做自动化工作流，作用就是尽可能脱离运行环境的种种问题，在开发阶段去使用提高效率的语法、规范和标准

NPM Scripts 是实现自动化构建工作流的最简单的方式

"scripts": {
    "build": "sass scss/main/scss css/style.css  --watch",  // watch 监听文件变化
    "preserve": "npm run  build"
    "serve": "browser-sync . --files \"css/*.css\"",    // browser-sync启动一个web服务器
    "start": "run-p build serve"    // 需要npm-run-all
  },

常用的自动化构建工具

Grunt

构建过程是基于临时文件构建的，所以构建过程相对较慢，构建过程中，每一步都有磁盘读写操作，每次操作完之后都会生成一个临时文件，下一步操作也会读取这个临时文件

grunt的基本使用

1.新建一个空文件夹,npm init -y 初始化目录，npm i grunt,添加grunt模块，然后在根目录下添加一个gruntfile.js的文件,使用npm的同学还需要安装一个npm install -g grunt-cli, 使用的是yarn的话，就不需要了

gruntfile.js是一个Grunt入口文件，用于定义一些需要Grunt自动执行的任务，这个文件需要导出一个函数，此函数接收一个grunt形参,内部提供一些创建任务时，可以用到的API

2.默认使用grunt.registerTask注册一个任务，两个参数，第一个为任务名，第二个是相对应的回调函数

如果是三个参数的话，那么第二个参数就是关于这个任务的描述
如果任务名称是’default’的话，这个任务就会成为grunt的默认任务，执行的时候命令行直接 grunt 就好了
我们也可以用default映射其他任务，这时候第二个参数传入一个数组，数组中指定任务名字，grunt会依次执行这些任务

3.grunt中的代码默认支持同步模式，如果想要使用异步操作的话，必须要使用this.async()得到一个回调函数，异步操作之后，去调用这个回调函数,不使用this.async()的话，异步函数内部的代码不执行