今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾。

npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工具,jasmine单元测试框架,ng-scenario e2e测试框架(以前不知道javascript还能做端对端测试的),coffeescript, less, sass等前端技术,没想到前端是可以这样玩的。

根据这段时间的学习,我将各种相关的技术做一个前端方案的整合,主题为博客网站,命名为SingleUI,功能还没完全做好,但会继续更新。有兴趣的同学可以根据自己的需求做调整。项目地址

--------------华丽分界线------------

环境安装部署

1. nodejs: v0.12.2 以上

2. bower: npm install bower -g

3. gulp:npm install gulp -g

安装包: 进入webui目录下, 执行命令 npm install prebuild 安装相关包 (若相关的包安装失败或执行命令报错,请将它删掉再安装)

命令: 请查看package.json的scripts和build目录下相关任务配置

项目架构

build: 相关task配置,config目录下是单个配置,task目录下是组合配置

dist: 源代码编译后的目录,connect服务器指向该目录

lib: 第三方插件库

mocks: 本地模拟数据,routes为后端api接口

node_modules: npm依赖包

src: 源代码,架构分层根据功能模块划分,每个目录下有对应的js, spec.js, scenario.js, scss, html文件

test: karma 单元测试和e2e测试配置文件

test_out: 单元测试和e2e测试的代码覆盖率报表,测试结果报表

vendor: bower 依赖的包

bower.json: bower 配置文件

gulpfile.js: gulp 配置文件

middleware.js: 中间组件

package.json: npm配置文件

前后端分离

本项目采用前后端分离开发的方式,即开发前约定数据格式,就各干各的,那么对于前端来说,发出http请求,获取数据,应该如何做?

目前想到有两种:

1. 通过express或其它服务器作为中间组件拦截。

2. angularjs可以通过MockJS拦截。

本项目用的是第一种,使用gulp-connect启动服务器,中间组件middleware指向express,那么对应的请求就会到express,只需要写对应的API接口即可,这其实相当于写express后端。

命令

我想要的开发模式:当源文件下的文件例如scss,html,js发生改动时,会执行对应的task,并且浏览器自动刷新。

产品版本:合并压缩重命名css,js,html。

根据项目的需求,通过各种插件处理,就有了现在的解决方案。

build目录下命令,请查看具体配置。

1. gulp dev : 编译开发版本

  1)复制相关文件

  2)将app.sass编译

  3)将项目下的html模板合并成angularjs templates module

  4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

2. gulp prod --env production 或 npm run publish : 编译产品版本

  1)sass编译压缩重命名

  2)js合并压缩重命名

  3)将项目下的html模板合并成angularjs templates module

  4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

3. gulp : 开发模式

  1)编译开发版本

  2)启动connect服务器,指定中间件,使用本地mock数据

  3)watch 文件自动刷新

  4)karma,启动单元测试和e2e测试

4. gulp server --env production : 产品模式

  1)编译产品版本

  2)启动connect服务器,指定中间件,使用本地mock数据

5. gulp test_singleRun --env production : 产品模式,并且跑测试

  1)编译产品版本

  2)启动connect服务器,指定中间件,使用本地mock数据

  3)karma,启动单元测试和e2e测试

测试

基于karma, 单元测试使用jammine, e2e测试用 ng-scenario, 输出报表有代码覆盖率karma-coverage, 执行结果报表junit-reporter

项目文件名为xx.spec.js为单元测试,xx.scenario.js为e2e测试

UI

计划

1. 完善SingleUI

2. 对HTML, CSS, JS做强化训练,试图弥补项目经验上的差距。项目地址

angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合的更多相关文章

  1. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  2. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  3. 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

    基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...

  4. 用nodejs+express搭建前端测试服务端

    平时开发前端应用,如果没有现成的后端接口调试,又要保证前端进度,该怎么办呢,当然办法还是很多的,很多大牛都分享过很多经验,我也来说说我常用的方法. 请求本地数据文件 把本地数据放到程序指定目录,发起h ...

  5. 使用 AngularJS & NodeJS 实现基于token 的认证应用(转)

    认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构 ...

  6. nodejs+express Mvc站点

    nodejs+express Mvc站点 像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风 ...

  7. 像asp.net Mvc一样开发nodejs+express Mvc站点

    像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风学了一些,对前端的框架也了解一些,angu ...

  8. nodejs + express + express-session + redis

    nodejs + express + express-session + redis 标题似乎又是不太对,大家领会精神哈 Express 安装express-generator,然后用它来创建一个工程 ...

  9. 使用 AngularJS & NodeJS 实现基于 token 的认证应用

      认证是任何Web应用中不可或缺的一部分.在这个教程中,我们会讨论基于token的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的 ...

随机推荐

  1. sqlserver 链接 ODBC 访问 MySql

    环境:windows 2008 + sqlserver 2008 一 安装 mysql-connector-odbc-5.2.5-winx64.msi 必须安装5.2.5,安装mysql-connec ...

  2. jenkins 插件开发资料

    jenkins plugin 开发:documenthttp://hudson-ci.org/docs/index.htmlhttps://wiki.jenkins-ci.org/display/JE ...

  3. AspNet MVC 缓存

    服务端缓存技术 请求域内的缓存 每个Asp.Net请求都会在Asp.Net框架中创建一个新的System.Web.HttpContext对象(HttpContext对象封装有关个别 HTTP 请求的所 ...

  4. 使用grunt打包ueditor源代码

    支持版本支持 UEditor 1.3.0+ 的版本 使用方法1.线上下载ueditor下载地址:ueditor,要下载"完整版 + 源码" 2.安装nodejs下载nodejs并安 ...

  5. curl模拟登录

    $post_data = array("username"=>"yuejide@163.com","password"=>&qu ...

  6. 阅读开发高手的代码 分享二则.NET开发框架的技巧

    最近阅读了一套ERP开发框架的源代码,对开发框架的理解又深入一层,也为其将知识点运用的如此灵活而自叹不如. 郎咸平教授说,国际金融炒家对国际金融知识的理解与运用程序,是不可想像的.1997年的亚洲金融 ...

  7. 动态变化的OO设计

    今天看到个题目:对象会动态的变化. 游戏精灵,有人和神仙,但是随着人的不断积分,会升级为神仙:神仙也可能会因为积分的减少而降级为人.这种情况怎么画出个类图来. 这是第一版的设计,正常思维.人和神仙都是 ...

  8. GTD时间管理(3)---行动容器分析理论法

    昨天的一篇文章主要是把清空收集箱的信息,放入对应的清单容器 下面我将会对容器中的每件事经过3个维度的分析 那一个例子直接来说明 Ⅱ:如果这个事件很复杂,需要把这个事件当作一个项目进行拆分,最终量化出完 ...

  9. [转]Java Spring的Ioc控制反转Java反射原理

    转自:http://www.kokojia.com/article/12598.html 学习一个东西的时候,如果想弄明白,最好想想框架内部是如何实现的,如果是我做我会怎么实现.下面我就写一个Ioc ...

  10. 【最新图文教程】WinCE5.0中文模拟器SDK(VS2008)的配置

    http://www.blogbus.com/antiblood-logs/204402631.html 经过几天的查找,终于找到了一篇文章是讲VS2008 怎么集成wince5.0 的模拟器的,这里 ...