AngularJS + CoffeeScript 前端开发环境配置详解

页面导航:首页 > 网络编程 > JavaScript > AngularJS + CoffeeScript 前端开发环境配置详解

AngularJS + CoffeeScript 前端开发环境配置详解

来源: 作者: 时间:2016-02-04 09:15 【

AngularJS 号称 39;第一框架 39; ( 39;The first framework 39;) 确实是名不虚传。由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了。虽然AngularJS的学习曲线很陡峭,入门的门槛相比较高,
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传。由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了。虽然AngularJS的学习曲线很陡峭,入门的门槛相比较高,但这些付出都是值得的相信用过的朋友都会与我有同感吧。为何我如此
地偏爱AngularJS? 或者这样说吧,用AngularJS开发的话其实是给我了一种工业化开发的概念,我对软件工业化的浅显理解简单归结为几点就是:
 
自动化
智能化
注重质量
注重工艺
前端开发比后端开发要求开发人员做更多繁杂的事,例如:js和css 的压缩、依赖引入、更新,图片压缩、“糖果语言(coffeescript/less/sass)”的语法检查与编译、静态图片/静态网页压缩,单元测试、E2E测试、等等。这些锁事往往很耗时间。
 
再者,当引入AngularJS作为主前端框架的话,大量的js源文件管理对文件结构与模块结构合理规划就显得更为之重要。所幸的是,google 是AngularJS工业化的主力推手,为了增加前端开发人员的生产力他们也不遗余力地做了很多工作,最为突出的就是[Yeoman|http://www.yeoman.io],他能快速地为我们建立各种类型项目的脚手架(项目模板),以他们的“最佳实践”为基础快速地为我们完成这一系列繁琐的工作。
 
我在实际项目开发觉得官方提供的 angular 生成器并不是十分合用,在经历了好几个项目的磨合后我在 google 官方的 yeoman angular 脚手架项目上进行了一些定制与修改,也在此作一些分享,由于时间关系还没有去将其成一个generator 所以只能在此以博文方式共享了。
 
如果对Yeoman不了解也不用要,本文将会独立于yeoman 一步一步详细地解释如何部署一个可以用于生产AngularJS前端开发环境。
 
工具
以下这些可谓是前端开发必备了,如果不清楚具体用法那么就先请去他们的官网先脑补吧:
 
npm
Node的依赖包管理工具,可以到 [nodejs 官方|http://nodejs.org/download/]页面获取安装包。
 
** bower **
 
bower 是由twitter开发的客户端依赖包管理工具
 
npm install -g bower
** grunt **
 
自动化任务管理工具,是整个自动化工程的核心。
 
npm install -g grunt-cli
安装此三大工具后我们就可以着手开始了。
 
实现的目标功能
基于 CoffeeScript并支持自动编译
能支持 livereload(一但任何代码、资源发生更改会自动刷新)
自动编译 less
支持 ngdocs 从 CoffeeScript 自动提取注释生成 API文档网站
自动 连接、最小化靜态资源,包括:脚本、图片、网页
自动将bower引入的依赖包注入页面
配备 Karma 的单元测试
配备基于 protractor 的e2e测试
基本目录结构
以下是基本项目目录的构成以及每个目录的功能说明
 
项目目录/
├── app // 应用程序目录
│ ├── bower_components // bower 组件目录 (由 bower 生成)
│ ├── fonts // 字体
│ ├── images // 图片资源
│ ├── styles // 样式目录 可存放 .css 和 .less
│ └── scripts // 应用程序脚本
│ └── app.coffee // angularJS 应用程序文件
│ └── index. // HTML HOME 文件
├── dist // 发布后的程序目录
├── test // 测试程序目录
│ ├── mocks // 存放mocks文件目录
│ ├── e2e // e2e测试文件目录
│ └── spec // 单元测试文件目录
├── node_modules // NodeJS 的组件目录 (由 npm 生成)
├── docs // 存放生成文档
├── .tmp // 临时文件目录 (由 grunt 任务自动生成)
├── .bowerrc // bower 路径规则指定文件
├── conffeelint.json // CoffeeScript 语法检查规则
├── Gruntfile.js // grunt 配置文件
├── karma.conf.js // karma 配置文件
├── protractor.conf.js // protractor 配置文件
├── package.json // nodes 依赖包描述文件
└── bower.json // bower 依赖包描述文件
 
流程及原理
此项目环境主要提供三种主要的运行方式,分别适用于项目生命周期中的不同的时期,更准备地说应该是适用于不同的场景。
 
生成模式 - build
将所有的文件生成至产品交付目录 dist 内,执行包括:
 
coffeescript/less
 
编译
连结
压缩
引用修正,包括 angular 动态注入修正
拷贝
输出必要的静态文件
 
网页
图片
字库
输出注释文档并生成文档网站
 
指令:
grunt build
 
测试模式 - test
多用于开发期,进行自动化单元测试或是e2e测试,考虑到e2e测试的使用频率相对于单元测试要低,故此 test指令只默认执行所有单元测试,
而要执行e2e测试则需加入 e2e 参数作明确指定。
 
指令:
grunt test
- e2e -
grunt test:e2e
 
如果加入 keepalive 参数的话,test 指令将直接运行于后台,且会检测所有的文件变化,一但文件发生更改测试将会自动被重新执行。
 
这种情况多适用于测试程序的编写与调试。
 
grunt test:keepalive
调试模式 - debug
主要用于手工调试与HTML界面设计之用,当启用 debug 模式后,livereload 功能将会被自动载入,也就是所有 app 目录下的任何
变更都能被捕获且浏览器能自动刷新应用更改。
 
指令:
grunt debug
 
Gruntfile.js 文件的设计
首先需要安装 load-grunt-tasks 和 time-grunt 两个插件
 
    npm load-grunt-tasks --save-dev
    npm time-grunt --save-dev
基本的 Gruntfile.js
'use strict';
 
module.exports = function (grunt) {
    // 自动加载所有可用的grunt 任务
    require('load-grunt-tasks')(grunt);
 
    // 可以显示每个任务执行的实际时间,可以便于以我们优化任务
    require('time-grunt')(grunt);
 
    // 配置主要路径
    var config = {
        app: require('./bower.json').appPath || 'app',
        dist: 'dist',
        tmp: '.tmp',
        tasks: grunt.cli.tasks
    };
 
    grunt.initConfig({
        // 任务配置
    });
配置 CoffeeScript
首先是令CoffeeScript能支持语法检查,需要安装 [coffeelint|http://www.coffeelint.org] 插件:
 
npm install coffeelint --save-dev
此插件安装后可以与大名鼎鼎的 jshint一样将语法检查规则放在一个独立的文件内,本项目中就是项目根目录下的 coffeelint.json,
如果需要增加更多的CoffeeScript语法检查规则可以修改此文件 。
 
在Gruntfile.js内的配置如下:
 
coffeelint: {
    options: {
        configFile: 'coffeelint.json'
    },
    all: ['<%= config.app %>/scripts/**/*.coffee'], //检查应用程序目录下的 CoffeeScript脚本
    test: {
        files: {
            src: ['tests/**/*.coffee'] //检查所有测试脚本
        }
    }
}
然后是安装CoffeeScript编译插件: [coffee-script|http://github.com/jashkenas/coffeescript]
 
npm install grunt-contrib-coffee --save-dev
由于我们编译出来的 javascript 不会直接使用,因为还要进行连接、压缩和拷贝过程,所以我们将所有的输出目录设置为 .tmp 目录。
在即使修改时也可以通过livereload 从.tmp目录直接将变更后的脚本直接加载到浏览器内,方便调试之用。
 
还有一点需要特别指出的是 coffee 选项中我将 sourceMap设置为true,只有这个选项打开,当生成map文件后在浏览器调试时才能准确地将被压缩后的
文件正确地重新映射至未压缩的程序源文件。关于 source map的具体用法可以参考 [javascript source map的使用|http://www.cnblogs.com/Ray-liang/p/4018162.html]
一文。
 
coffee: {
    options: {
        bare: false,
        sourceMap: true,
        sourceRoot: ''
    },
    dist: {
        files: [
            {
                expand: true,
                cwd: '<%= config.app %>/scripts',
                src: '{,*
Tags:

文章评论


<