自动化构建

背景

• 一切重复工作本应自动化,自动化构建是前端工程化一个非常重要的组成部分
• 自动化:就是通过机器去代替手工完成一些工作
• 构建:把一个东西转换成另一个东西
• 自动化构建:将开发过程中的源代码自动化的转换成生产环境中可以运行的代码或者程序
  
• 构建转换那些不被支持的的特性,比如scss和ECMAScript某些新语法在生产环境是不被支持的,但我们在开发过程中可以使用这些新特性,然后通过构建工具转换成生产环境能运行的代码,这样的好处是提高编码侠侣
  效率

自动化构建初体验

• 当我们直接编写css的方式去完成网页的样式,但是我们希望通过sass增强css的编程性,具体实现方式是,在开发的时候我们添加一个构建的环节,这样我们在开发环节通过sass编写样式,再通过工具将scss构建为css

案例:将scss文件否建成css文件

1. 下载sass第三方包

$ yarn add sass

2. 安装完成后,我们可以在node_modules/.bin目录下有一个sass命令文件,在命令行中通过路径可以找到这个命令

$ .\node_modules\.bin\sass

3. 输出sass命令的帮助信息
   
4. 执行scss命令=>构建

$ .\node_modules\.bin\sass  scss/main.scss css/style.css

5. 生成了对应的css文件
   

缺点

• 我们每次都需要重复去输入这些复杂的命令,而且在别人接手我们项目过后,他也不知道如何去运行这些构建的任务=

改进 (NPM scripts)

• 我们需要做一些额外的事情去解决在项目开发阶段这些重复执行的命令=>NPM scripts 就是解决这个问题的
• scripts可以自动发现node_modules中命令,所以我们不需要写完成的路径,知己使用命令的名称就可以,命定定义完成后,我们可以通过npm或者yarn来启动这个命令
  

$ npm run build 或者 yarn build // yarn=命令可以省略run

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

1. 安装browser-sync模块,用于启动测试服务器去运行我们的项目

$ yarn add browser-sync

2. 在scripts中添加一个serve命令,在这个命令中通过browser-sync把当前的目录运行起来(会首先指向当前目录的index.html文件)
   

$ yarn browser-sync

3. 但是如果我们在browser-sync工作之前,我们并没有生成样式,此时browser-sync工作的时候就没有样式文件,我们需要启动serve命令之前让build任务工作,可以借助NPM Scripts的钩子机制定义一个preserve,它会自动在serve命令执行之前去执行,那么这个时候再执行serve命令之前会自定先执行build命令,build命令执行完成之后再执行对应的serve
   
   
4. 我们可以为sass命令添加一个–watch的参数,监听文件的变化,一旦文件中的代码发生改变,它就会自动被编译,但会一直阻塞在监听事件,不会去执行browser-sync命令
   
   
5. 我们需要同事执行多个命令,可以借助npm-run -all的模块实现

$ yarn add npm-run-all

run-p的命令同时执行多个命令(build在前,serve在后)

6. 当我们修改scss文件的代码,通过sass命令构建生成的css文件中的代码也同步发生变化,说明watch已经生效了,但在浏览器中样式还没发生变化,说明浏览器中引用的还是老的css文件,没有引用最新构建生成的css文件(需要手动刷新浏览器)

7. 在browser-sync . 命令后面添加–files参数,这个参数可以让browser-sync 启动过后监听项目下的文件的变化,一旦文件发生变化后,browser-sync会将这些文件的内容自动同步到浏览器,从而更新浏览器中的界面(不需要手动刷新浏览器)
   

常用的自动化构建工具

背景

• NPM Scripts确实能解决一部分自动化构建任务,但是对于相对复杂的构建过程,NPM Scripts就显得非常吃力,这时,我们就需要更为专业的构建工具

市面上常用的自动化构建工具

• Grunt
  • 优点:插件生态完善,几乎可以完成任何自动化构建
  • 缺点:工作过程基于临时文件来实现,每一步都有磁盘读写操作,构建速度比较慢
• Gulp (市面上最流行的构建工具)
  • 优点:工作过程基于内存来实现,构建速度很快,且默认支持同时执行多个任务,效率大大提高
• FIS
  • 百度推出的,适用于新手(FIS大而全,Gunt/Gulp构建工具灵活多变)

注意: webpack实际上是模块打包工具,不在我们这次讨论的范围内

Grunt的基本使用

Grunt同步任务的执行

1. 在空项目中初始化

$ yarn init

2. 安装grunt模块,并新建一个gruntfile.js文件(Grunt的入口文件)

$ yarn add grunt
$ code gruntfile.js // 在当前目录下新建gruntfile.js文件

代码:

// Grunt的入口文件,定义一些需要Grunt自动执行的任务
// 需要导出一个函数,该函数接收一个grunt的形参
// grunt是一个对象,内部提供一些创建任务时的Api,借助这些Api快速创建一些构建任务
module.exports = grunt => {
   
    // 借助 grunt.registerTask()方法注册一个任务,
    // 参数一:任务的名称 
    // 参数二:任务函数,即这个任务发生时自动执行的函数
    grunt.registerTask("foo", () => {
   
        console.log("hello grunt")
    })
}</