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

我们先来看下前端开发可能存在的问题：

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

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

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

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

什么是开发流程？

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

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

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

本地开发环境的初始化

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

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

{
    "name": "Project Name",
    "version": "0.0.1",
    "description": "Project Description",
    "repository": {
        "type": "git",
        "url": "git://github.com/path/to/your_project" },
    "author": "Author Name",
    "license": "BSD",
    "readmeFilename": "README.md",
    "gitHead": "git head",
    "devDependencies": {
        "grunt": "latest",
        "grunt-contrib-connect": "latest",
        "grunt-contrib-concat": "latest",
        "grunt-contrib-jasmine": "latest",
        "grunt-contrib-watch": "latest",
        "grunt-contrib-compass": "latest" } }

其中最重要的一个配置项是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的内容：

{
    "directory" : "components",
    "json"      : "component.json",
    "endpoint"  : "https://bower.herokuapp.com" }

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

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

{
    "name": "Project Name",
    "version": "0.0.1",
    "dependencies": {
      "jquery": "latest",
      "underscore": "latest",
      "backbone": "latest",
      "jasmine-jquery": "latest",
      "jasmine-ajax": "[email protected]:pivotal/jasmine-ajax.git" } }

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

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

源文件编译

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

module.exports = function(grunt) { var dependencies = [ ‘components/jquery/jquery.js‘, ‘components/underscore/underscore.js‘, ‘components/backbone/backbone.js‘];

    grunt.initConfig({
        concat: {
            js: {
                src: dependencies,
                dest: ‘app/js/lib.js‘ }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
};

这里的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：

module.exports = function(grunt) { var sasses = ‘sass‘;

    grunt.initConfig({
        compass: {
            development: {
                options: {
                    sassDir: sasses,
                    cssDir: ‘app/css‘ }
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-compass‘);
};

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

自动化测试

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

module.exports = function(grunt) { var sources = ‘app/js/**/*.js‘,
        specs = ‘spec/**/*Spec.js‘;

    grunt.initConfig({
        jasmine: {
            test: {
                src: [sources],
                options: {
                    specs: specs,
                    helpers: [‘spec/helper/**/*.js‘],
                    vendor: ‘app/js/lib.js‘ }
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-jasmine‘);
};

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

module.exports = function(grunt) { var sources = ‘app/js/**/*.js‘,
        specs = ‘spec/**/*Spec.js‘;

    grunt.initConfig({
        jasmine: {
            test: {
                src: [sources],
                options: {
                    specs: specs,
                    helpers: [‘spec/helper/**/*.js‘],
                    vendor: ‘app/js/lib.js‘ }
            }
        },
        watch: {
            test: {
                files: [sources, specs],
                tasks: [‘jasmine:test‘]
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-jasmine‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
};

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.json的scripts项，指定运行测试的命令

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

language: node_js node_js:
  - "0.8" before_script:
  - npm install -g grunt-cli

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

然后再修改package.json：

{
    ?? "scripts": { "test": "grunt jasmine:test" }
    ??
}

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

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

[![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.json与components.json其实有些重复
  • Live Reload还需要Chrome插件才能完成
  • ??

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

时间： 2024-10-13 16:20:02

如何构建自动化的前端开发流程的相关文章

搭建前端的开发环境和前端开发流程总结

一.搭建前端的开发环境 1.代码编辑工具:sublime/WebStorm/HBuilder. 2.断点调试工具:Firebug. 3.版本管理工具:Git(本人建议使用git,至于原因大家可以看看相关blog),安装完成后我们就可以从github上clone一些项目. 4.代码合并和混淆工具:webpack (Webpack具有Grunt.Gulp对于静态资源自动化构建的能力,同时兼容AMD与CMD的模块加载规范). 4.开发调试工具:NodeJs.很多非常有用的工具都是基于NodeJs的,我

看大师讲解移动互联网前端开发流程

你做过移动互联网开发吗?在移动互联网超级火爆的今天,你是否也想分的一杯羹呢,来这里看大师给你讲解如何完成一款app,本文的主旨在于讲解在app的制作流程. 今天完成了完全属于自己的一款安卓应用,整个流程都是我一个人跑下来的,感觉小有成就,名字叫"长见识了",是一款趣味答题类的游戏,题目各种火爆各种经典,下载地址,看似一个简单的答题小游戏却是五脏俱全,从开发流程上都进行了严格的规范,大家有空可以下载玩玩~ 该项目虽然比较简单,但是从项目需求分析到最后的开发测试上架流程都是完备了的. 一,

系列网页。前端开发流程

实践了一段时间,发现<Freshman.前端开发流程.>里面的东西比较适合从头到尾开发一个新页面的情况,而在具体开发工作中,我们大部分时候是开发一系列网页,有一些元素(比如很多页面的top/banner部分)是类似的. 所以开发的流程可以是开始先做好第一个页面的全部,把公共部分抽取出来,然后之后的页面只要修改不同部分就好.

Grunt搭建自动化web前端开发环境--完整流程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分离的缺点 双端 MVC 不统一 SEO 性能不够 集中 Or 分离 Nodejs 前后端分离的哲学 Nodejs 分层 实战应用 风险控制 总结 参考资料 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈

我们一般的前端开发流程

有些毕业生或非it行业的人,想了解真正的一个开发流程,就我个人的经验做以简单的分享,仅供参考,不是一个覆盖全行业的事实标准. 老板或甲方是一个需求的真正发起者,也是一个基础idea的梦想师,产品是需求专业化梳理或进行有效评估细化需求负责的, 而设计是前端的上游,前端是设计的下游.设计的工作目的是把产品宏观的思维结果进行专业的处理,因为按一般的习惯,产品最终的结果是原型图,而原型图可以理解为设计的草图, 对真正的用户来说,这个草图过于简单或不符合使用的操作习惯,所以需要设计师进行专业的处理,比如颜

主流的h5前端开发流程

一. 流程 设计师以750pt×1334pt尺寸进行设计(当然高度随内容变化),最后用该尺寸的设计稿进行标注.切图,前端采用flexible进行适配. 二. flexible使用方法 Flexible的使用方法非常简单,只需要引入flexible_css.js和flexible.js 下载地址 l  第一种方法将文件下载后放入项目中引用(省略写法,大家都懂的) l  第二种直接使用阿里CDN资源 <script src="http://g.tbcdn.cn/mtb/lib-flexible

构建之法之开发流程

一.什么是开发流程? 在开发,运营,维护软件过程中的技术,做法,思想统一到一个体系中,叫做"软件开发流程". 二.开发流程. 1.写了再改模式 开发人员拿到需求文稿后,编码成功,交付客户,客户反馈意见,继续编码,多次重复之后发布软件. 2.瀑布模式 遵循成熟行业[分析->设计->实现->销售->维护]的流程.由Winston Royce提出,并且在设计大型系统时需要改进,要做到相邻步骤的回溯,即[系统需求<->软件需求<->分析<-

前端开发流程

产品经理下达任务--ui作图--前端根据ui的图做效果--与后台人员交流 工作中的流程: 早上开早会,产品经理下达命令,讲述昨天完成任务,今日目标. 关于项目中的介绍,一般有工作经验的人,常用的动态效果都会自己封装一个插件. 比如说图片轮播,翻页,tab切换页面. 移动端的项目,用***js做的,用这个js实现了什么效果,在整体页面用什么布局模式,都适配那些,如果做到适配的,介绍一个页面,从上到下,移动端会有上拉加载,下拉刷新, 要分析出这些效果是如何做的,在做这些个项目的时候是怎么解决的 (在