如何构建自动化的前端开发流程

开发 前端 自动化
构建一个自动化的前端开发流程是非常必要的,但现在前端开发流程的构建是百花齐放,没有一个统一的标准,还有很多依赖于后端的架构来做前端开发管理。

如今的前端开发中,已经不再只是一些简单的静态文件了,对于很多Web App来说,前端代码甚至比后端代码要更加复杂,更加难于管理,例如:

  • 我们有许多的第三方库的依赖需要管理;
  • 我们有独立的前端测试需要自动运行;
  • 我们还有很多代码需要在发布时进行打包压缩;
  • ⋯⋯

所以构建一个自动化的前端开发流程是非常必要的,但现在前端开发流程的构建是百花齐放,没有一个统一的标准,还有很多依赖于后端的架构来做前端开发管理。例如在Rails开发中,就有各种前端库的gem包。但是这种依赖于后端框架的管理方式有许多问题:

  • 许多gem包的维护者并不是前端库的维护者,所以更新不一定即时;
  • 不利于前端代码与后端代码做分离;
  • 增加了前端开发者的学习和使用成本;
  • ⋯⋯

 

[[84676]]

于是现在出现了一些不依赖于后端代码(虽然还是要依赖Node.js⋯⋯)的管理工具,对于前端开发者非常友好,例如:YEMAN、Jam、volo、component、Brunch⋯⋯但是这些工具都或多或少有自己的一些问题,所以我决定用一些更轻量的工具(bower、grunt)来搭建自己的前端开发流程。本文的例子来自本人正在开发的一个项目,可以在github上查看所有的代码。

什么是开发流程?

在我看来一个完整的开发流程应该包括:

  • 本地开发环境的初始化
  • 第三方依赖的管理
  • 源文件编译
  • 自动化测试
  • 发布到pipeline和各个环境

而现代的开发流程,就是要使上面的各个部分都可以自动化,一个命令就可以使这些流程都自动走完,并且快速的得到错误或通过的反馈,让我们可以方便快速的修复错误和release。

本地开发环境的初始化

这里我使用的工具是Node.js和NPM,它们都基于JavaScript,使用Json来配置,对于前端开发人员非常友好。

安装完成Node.js和NPM后,在项目根目录下创建NPM的配置文件package.json

  1.     "name": "Project Name", 
  2.     "version": "0.0.1", 
  3.     "description": "Project Description", 
  4.     "repository": { 
  5.         "type": "git", 
  6.         "url": "git://github.com/path/to/your_project" 
  7.     }, 
  8.     "author": "Author Name", 
  9.     "license": "BSD", 
  10.     "readmeFilename": "README.md", 
  11.     "gitHead": "git head", 
  12.     "devDependencies": { 
  13.         "grunt": "latest", 
  14.         "grunt-contrib-connect": "latest", 
  15.         "grunt-contrib-concat": "latest", 
  16.         "grunt-contrib-jasmine": "latest", 
  17.         "grunt-contrib-watch": "latest", 
  18.         "grunt-contrib-compass": "latest" 
  19.     } 

其中最重要的一个配置项是devDependencies,这是用于开发的依赖,例如:自动化测试、源文件编译等等,其中各个依赖的作用和用法将会在后面讲到。而前端生产代码的依赖会使用另一个工具来管理,也在后面讲到。创建完成以后运行npm install,NPM就会将这些依赖都安装到项目根目录的node_modules文件夹中。

第三方依赖的管理

这里我使用的工具是bower。 其实NPM也可以管理,但是NPM并不是读取第三方依赖原始的repository,而是读取自己管理的一个repository,所以更新可能会慢点, 并且它使用CommonJS的接口方便Node.js项目的开发,并不是针对纯前端开发的项目;而bower是读取原始的github repository,没有更新延迟的问题,所有包都是针对纯前端开发项目的。

要使用bower只需要简单的三步:

  1. 安装:npm install bower -g
  2. 在项目根目录中创建配置文件.bowerrc
  3. 在项目根目录中创建依赖配置文件components.json

我们首先来看看.bowerrc的内容:

  1.     "directory" : "components", 
  2.     "json"      : "component.json", 
  3.     "endpoint"  : "https://bower.herokuapp.com" 

其中directory指定了所有的依赖会被安装到哪里;json指定了依赖配置文件的路径;endpoint制定了依赖的repository的寻址服务器,你可以替换为自己的寻址服务器。

然后我们来看看components.json的内容:

  1.     "name": "Project Name", 
  2.     "version": "0.0.1", 
  3.     "dependencies": { 
  4.       "jquery": "latest", 
  5.       "underscore": "latest", 
  6.       "backbone": "latest", 
  7.       "jasmine-jquery": "latest", 
  8.       "jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git" 
  9.     } 

其中最重要的就是dependencies,它指定了所有前端开发依赖的包。所有bower包含的依赖都可以在这里查到,对于bower没有包含的依赖也可以直接指定github的repository,例如:"jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"

最后运行bower install就可以在components文件夹中看到所有第三方依赖的文件了。但是bower有一个问题,就是它将所有github repository中的文件都下载下来了,其中有许多是我们不需要的文件。下面我们会将我们需要的文件提取出来打包放到我们指定的目录中。

#p#

源文件编译

这里我使用的工具是grunt,他本身主要是基于Node.js的文件操作包,其中有许多插件可以让我们完成js文件的compile和compress、sass到css的转换等等操作。要使用它需要先安装命令行工具:npm install grunt-cli -g,然后在项目根目录中创建文件Gruntfile.js,这个文件用于定义各种task,我们首先定义一个task将从bower下载的第三方依赖都打包到文件app/js/lib.js中:

  1. module.exports = function(grunt) { 
  2.     var dependencies = [ 
  3.         'components/jquery/jquery.js', 
  4.         'components/underscore/underscore.js', 
  5.         'components/backbone/backbone.js']; 
  6.     grunt.initConfig({ 
  7.         concat: { 
  8.             js: { 
  9.                 src: dependencies, 
  10.                 dest: 'app/js/lib.js' 
  11.             } 
  12.         } 
  13.     }); 
  14.     grunt.loadNpmTasks('grunt-contrib-concat'); 
  15. }; 

这里的grunt-contrib-concat就是grunt的一个插件,用于文件的合并操作,我们已经在前面的package.json中引入了。js是task name;src指定了合并的源文件地址;dest指定了合并的目标文件。这样当我们运行grunt concat:js后,所有的依赖文件都会被合并为app/js/lib.js。这样做的好处是我们可以控制每个依赖的引入顺序,但是麻烦的是每次引入新的依赖都需要手动加入到dependencies数组中。这个暂时没有更好的解决方案,因为不是所有的包都在自己的components.js中声明了main文件,很多时候必须自己手动指定。

JavaScript文件编译完成以后就是CSS文件,在现代的前端开发中,我们已经很少直接写CSS文件了,一般都使用SASS或者LESS。grunt也提供了这种支持,这里我使用的是grunt-contrib-compass:

  1. module.exports = function(grunt) { 
  2.     var sasses = 'sass'
  3.     grunt.initConfig({ 
  4.         compass: { 
  5.             development: { 
  6.                 options: { 
  7.                     sassDir: sasses, 
  8.                     cssDir: 'app/css' 
  9.                 } 
  10.             } 
  11.         } 
  12.     }); 
  13.     grunt.loadNpmTasks('grunt-contrib-compass'); 
  14. }; 

然后运行grunt compass:development就可以完成CSS文件的编译了。

自动化测试

这里我使用的自动化测试工具是Jasmine,它grunt中同样有一个插件:grunt-contrib-jasmine。下面我们来看看如何在Gruntfile.js中定义测试的task:

  1. module.exports = function(grunt) { 
  2.     var sources = 'app/js/**/*.js'
  3.         specs = 'spec/**/*Spec.js'
  4.     grunt.initConfig({ 
  5.         jasmine: { 
  6.             test: { 
  7.                 src: [sources], 
  8.                 options: { 
  9.                     specs: specs, 
  10.                     helpers: ['spec/helper/**/*.js'], 
  11.                     vendor: 'app/js/lib.js' 
  12.                 } 
  13.             } 
  14.         } 
  15.     }); 
  16.     grunt.loadNpmTasks('grunt-contrib-jasmine'); 
  17. }; 

配置完成以后就可以运行grunt jasmine:test来跑测试,但问题是每次写完代码都要手动执行一次非常麻烦,最好可以每次代码有更改都自动跑一次,让我们可以更快的得到反馈。grunt的watch插件就提供了这种支持:

  1. module.exports = function(grunt) { 
  2.     var sources = 'app/js/**/*.js'
  3.         specs = 'spec/**/*Spec.js'
  4.     grunt.initConfig({ 
  5.         jasmine: { 
  6.             test: { 
  7.                 src: [sources], 
  8.                 options: { 
  9.                     specs: specs, 
  10.                     helpers: ['spec/helper/**/*.js'], 
  11.                     vendor: 'app/js/lib.js' 
  12.                 } 
  13.             } 
  14.         }, 
  15.         watch: { 
  16.             test: { 
  17.                 files: [sources, specs], 
  18.                 tasks: ['jasmine:test'] 
  19.             } 
  20.         } 
  21.     }); 
  22.     grunt.loadNpmTasks('grunt-contrib-jasmine'); 
  23.     grunt.loadNpmTasks('grunt-contrib-watch'); 
  24. }; 

files指定了需要监听变动的文件;tasks指定了修改后自动触发的task。现在只要我们运行grunt watch:test,那么有任何源文件、测试文件的改动,Jasmine测试都会自动运行了。有时候我们也希望测试的结果显示在网页上,便于我们做js的调试。那么可以将tasks:['jasmine:test']改为tasks: ['jasmine:test:build'],然后打开根目录下的_SpecRunner.html文件,就可以在网页中看到测试结果了,再加上一些Chrome的Livereload插件,就可以不用刷新实时的看到测试结果,效率非常之高。虽然grunt插件中也有livereload,但是与grunt-contrib-watch无法很好的集成,所以我没有使用这种方式。

CI Pipeline

由于我的项目是host在github上,所以我选择travis-ci作为我的CI服务器。要启用travis-ci需要以下几步:

  1. 在travis-ci中注册一个账号,获取一个token;
  2. 在你的github项目的Settings–>Service Hooks中找到Travis,填入token并且启用;
  3. 回到travis-ci,在Accounts–>Repositories中打开你的项目的service hook
  4. Push一个.travis.yml到github,触发第一次build。
  5. 修改package.jsonscripts项,指定运行测试的命令

下面我们来看看如何配置.travis.yml

  1. language: node_js 
  2. node_js: 
  3.   - "0.8" 
  4. before_script: 
  5.   - npm install -g grunt-cli 

由于我们的环境是基于Node.js搭建的,所以在language设置了nodejs;而**nodejs指定了Node.js的版 本;before_script**指定了在测试运行前需要执行的命令,由于我们的脚本都是基于grunt的,所以需要先安装grunt的命令行包。

然后再修改package.json

  1.     ⋯⋯ 
  2.     "scripts": { 
  3.         "test": "grunt jasmine:test" 
  4.     } 
  5.     ⋯⋯ 

将修改以后的package.jsonpush到github上,再次触发一个新的build,你可以看到你之前错误的build已经绿了。

这里还有一个小提示:如何让build状态显示在项目的readme中?很简单,只需要在README.md中加入以下代码就可以了:

  1. [![Build Status](https://travis-ci.org/path/to/your_repository.png?branch=master)](http://travis-ci.org/path/to/your_repository) 

到这里基本的环境搭建就完成了,当然我们还可以使用grund的registerTask来定义一个任务序列,还可以加 入template的编译⋯⋯这些都可以通过grunt来灵活设置。最重要的是现在别人拿到一个项目的代码以后,可以通过一些命令来快速的搭建本地环境, 方便的进行测试和开发,而且没有依赖与后端的开发环境,只要定义好接口,前端开发可以完全独立开了。虽然这其中还有很多问题没有解决,例如:

  • 如何让第三方依赖自申明main文件
  • package.jsoncomponents.json其实有些重复
  • Live Reload还需要Chrome插件才能完成
  • ⋯⋯

这正是由于现在前端开发环境还没有后端开发的那种标准化,也正是挑战和机遇之所在!

原文链接:http://www.zation.me/2013/03/15/how-to-build-frontend-dev-env.html

责任编辑:陈四芳 来源: zation.me
相关推荐

2022-07-08 11:18:33

前端实践自动化

2021-05-27 08:00:00

自动化机器人工具

2020-12-08 06:20:49

前端重构Vue

2012-09-04 10:20:31

IBMdw

2021-10-14 06:52:47

自动化开发环境

2020-04-29 11:28:54

智能自动化机器人流程自动化AI

2023-01-04 13:41:23

RPA自动化机器人

2017-01-16 13:38:05

前端开发自动化

2020-09-22 09:46:11

机器人流程自动化RPA流程

2021-09-07 10:43:16

人工智能AI深度学习

2012-11-23 14:28:45

IBMdW

2023-04-06 07:09:25

自动化部署Actions

2015-06-09 13:45:14

2022-09-14 10:00:12

前端自动化测试

2022-03-07 11:09:36

自动化企业技术

2023-09-13 11:40:12

2021-04-28 16:49:27

自动化设备制药

2021-12-28 14:28:01

人工智能AI机器人

2021-02-19 11:09:45

机器人机器人流程自动化RPA

2021-06-30 19:48:21

前端自动化测试Vue 应用
点赞
收藏

51CTO技术栈公众号