1. 概述

自动化构建是前端工程化中非常重要的组成部分,实际上指的是通过机器代替手工完成工作。构建过程可以理解为转换,就是把一个东西换转换成另外一些东西。总的来说开发行业的自动化构建就是把开发阶段写出来的源代码自动化的转换成生产环境中可以运行的代码或者程序。

一般会把转换的过程称之为自动化构建工作流,他的作用就是尽可能脱离运行环境的种种问题,在开发阶段使用一些提高效率的语法、规范和标准。

最典型的应用场景就是开发网页应用时可以使用ECMAScript最新标准提高编码效率和质量。利用sass增强css的可编程性,然后借助模板引擎抽象页面当中重复的html

这些用法在浏览器当中是没有办法直接被支持的,这种情况下自动化构建工具就派上用场了,通过自动化构建的方式将这些不被支持的代码特性转换成能够直接运行的代码。就可以尽情在开发过程中使用这些方式提高编码效率了。

2. 编译

在这个案例中通过sass增强css的编程性。具体的实现就是在开发时添加一个构建的环节,这样在开发环节就可以通过sass编写样式再通过工具将sass构建为css

新建一个scss文件,在这个文件中可以按照sass的语法去编写网页样式。

$body-bg: #f8f9fb;
$body-color: #333;

body {
    margin: 0 auto;
    padding: 20px;
    background-color: $body-bg;
    color: $body-color;
}

但是sass并不能在浏览器环境中直接使用,所以需要在开发阶段通过工具把他转换成css。这里使用sass官方提供的sass模块。

yarn add sass --dev

要指定sass的输入路径和css的输出路径,输入路径是main.scss, 输出路径是style.css

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

sass会自动添加对应的source-map文件在调试阶段可以定位到代码中源代码的位置。

3. 命令

可以在package.jsonscript中定义一些与这个项目开发过程有关的脚本命令,这样一来就可以让这些命令跟着项目一起去维护,便于在后期开发过程的使用。最好的方式就是通过npm scripts方式包装构建命令。

具体的实现方式就是在package.json当中去添加一个scripts字段,这个字段是一个对象,键就是命令的名称,值是需要执行的命令。

"script": {
    "build": "sass main.scss style.css"
}

完成过后可以通过npm或者yarn去启动这个scriptyarn当中可以省略这个run

npm run build
yarn build

npm scripts是实现自动化构建最简单的方式,这里安装browser-sync的模块,用于启动测试服务器, 运行项目。

yarn add browser-sync --dev

package.jsonscripts当中添加serve的命令。在这个命令当中通过browser-sync把当前这个目录运行起来。

"script": {
    "build": "sass main.scss style.css",
    "serve": "browser-sync"
}

运行npm run serve会启动一个服务,打开浏览器运行目录下的index.html文件。

但是如果在browser-sync之前并没有生成样式,此时browser-sync工作时页面就没有样式文件,需要在启动serve命令之前让build任务工作。

这里可以借助npm scripts的钩子机制定义一个preserve,他会在serve命令执行之前执行。

"script": {
    "build": "sass main.scss style.css",
    "preserve": "npm run build",
    "serve": "browser-sync"
}

再执行npm run serve就会自动化的先去执行build命令, build完成过后再去执行对应的serve,那此时就可以完全在启动web服务之前自动去构建sass文件。

光有这些还不够还可以为sass文件去添加--watch的参数,有了这个参数过后,sass在工作时就会监听文件的变化,一旦代码中的sass文件发生改变,他就会自动被编译。

"script": {
    "build": "sass main.scss style.css --watch",
    "preserve": "npm run build",
    "serve": "browser-sync"
}

运行serve命令会发现sass文件在工作时命令行会阻塞,这样就导致了后面的browser-sync并没有办法直接工作,这种情况下需要同时执行多个任务,可以借助于npm-run-all的这个模块去实现。

yarn add npm-run-all --dev

scripts当中再去添加一个新的命令start,在这个命令中通过npm-run-all里面的run-p的命令同时执行buildserve命令。

"script": {
    "build": "sass main.scss style.css --watch",
    "serve": "browser-sync",
    "start": "run-p build serve"
}

运行npm run start的命令就会发现build命令和browser-sync命令同时被执行了。可以尝试修改main.scss文件当中的内容,这个时候会发现css文件也会跟着一起变化,也就证明watch已经生效了。

还可以给browser-sync这个命令添加--files参数,这个参数可以让browser-sync在启动后监听项目下的一些文件的变化。一旦当文件发生变化过后,browser-sync会将这些文件的内容自动同步到浏览器,从而更新浏览器当中的界面,可以及时查看到最新监听的效果。这样就避免了修改完代码过后再去手动刷新浏览器的重复工作。

那这样就借助于npm scripts完成一个简单的自动化构建的一个工作流,具体的工作流程就是在启动任务过后,同时运行了buildserve两个命令,其中build自动监听sass文件的变化编译sassbrowser-sync启动一个web服务,当文件发生变化过后刷新浏览器。

"script": {
    "build": "sass main.scss style.css --watch",
    "serve": "browser-sync --files \"*.css\"",
    "start": "run-p build serve"
}

4. 常用的自动化构建工具

npm scripts确实能解决一部分的自动化构建任务,但是对于相对复杂的构建过程,npm scripts就显得有些吃力,这时就需要更为专业的构建工具。

目前市面上开发者使用最多的一些开发工具主要是gulpgruntfis,可能有人会问webpack去哪了,严格来说webpack实际上是一个模块打包工具所以不在这次谈论范围之内。

这些工具都可以解决那些重复而且无聊的工作从而实现自动化,用法上他们也都大体相同,都是先通过一些简单的代码去组织一些插件的使用,然后就可以使用这些工具执行各种重复的工作了。

grunt算是最早的前端构建系统了,他的插件生态非常的完善,用官方的一句话来说就是grunt的插件几乎可以帮你自动化的完成任何你想要做的事情。

但是由于他的工作过程是基于临时文件实现的,所以说他的构建速度相对较慢,例如使用它去完成项目中sass文件的构建,一般会先对sass文件做编译操作,再去自动添加一些私有属性的前缀,最后再去压缩代码。这样一个过程当中,grunt每一步都会有磁盘读写操作,处理的环节越多文件读写的次数也就越多,对于超大型项目来说项目文件会非常多,构建速度就会特别的慢。

gulp很好的解决了grunt当中构建速度慢的问题,因为他是基于内存实现的,也就是说对文件的处理环节都是在内存中完成的。相对于磁盘读写速度自然就快了很多。

另外他默认支持同时执行多个任务,效率自然大大提高,而且他的使用方式相对于grunt更加直观易懂,插件生态也同样非常完善,所以说他后来居上,更受欢迎,应该是目前市面上最流行的前端构建系统了。

fis是百度的前端团队推出的一款构建系统,最早只是在团队内部使用,开源过后在国内快速流行,相对于前面两个构建系统这种微内核的特点fis更像是一种捆绑套餐。

他把项目当中一些典型的需求尽可能都集成在内部了,例如在fis内部可以很轻松的处理资源加载,模块化开发,代码部署,甚至是性能优化。

正是因为这种大而全,所以在国内很多项目中就流行开了,总体来说如果你是初学者的话,可能fis更适合你,但是如果你的要求灵活多变的话,gulpgrunt应该是你更好的选择。

还是那句话,新手是需要规则的,而老手一般会渴望自由。

转载须知

如转载必须标明文章出处文章名称文章作者,格式如下:

转自:【致前端 - zhiqianduan.com】 前端自动化构建  "隐冬"
请输入评论...