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

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 // 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: '{,*/}*.{coffee,litcoffee,coffee.md}',
                dest: '.tmp/scripts',
                ext: '.js'
            }
        ]
    },
    test: {
        files: [
            {
                expand: true,
                cwd: 'test/spec',
                src: '{,*/}*.coffee',
                dest: '.tmp/spec',
                ext: '.js'
            },
            {
                expand: true,
                cwd: 'test/e2e',
                src: '{,*/}*.coffee',
                dest: '.tmp/e2e',
                ext: '.js'
            }
        ]
    }
}

配置 Less

Grunt 提供了合法的less 编译安装包
[grunt-contrib-less|https://github.com/gruntjs/grunt-contrib-less]

npm install grunt-contrib-less --save-dev

同布局coffee 编译器的法则同我们用拿 styles 目录下之
.less文件预先编译成为 .css并存放于 .tmp/styles下,以全后甩卖
和livereload 之用。

less: {
    all: {
        files: [
            {
                expand: true,
                flatten: true,
                cwd: '<%= config.app %>/styles',
                src: ['{,*/}*.less'],
                dest: '.tmp/styles',
                ext: '.css'
            }
        ]
    }
}

减去和连接

当就有的本人连无一直用 Grunt 官方的 uglify,concat 而是下了 usemin
插件这是持续了 yo generator-angular 的做法。他是
yeoman项目的合法插件,这个插件同样是因让 uglify,concat
的,然而他长了针对性文件自动引用的支撑,可以打页面读来脚本文件的援而非是经过hardcore的措施写以Gruntfile中。另外,他还能够添对bower_components内的倚重进行合成而代表人工合成,这是一个好棒的功用可以节省我们从bower_components下寻找输出文件之辛苦,只待关怀bower.json文件内管理保证要无是在Gurntfile.js进行硬编码了。

usemin是一个合成包需要以下这些插件而支持,为了节省篇幅以下的命都是坐
npm install [包] --save-dev 方式安装

  • [grunt-usemin|https://github.com/yeoman/grunt-usemin]
  • [grunt-svgmin|https://github.com/sindresorhus/grunt-svgmin]
  • [grunt-contrib-cssmin|https://github.com/gruntjs/grunt-contrib-cssmin]
  • [grunt-contrib-htmlmin|https://github.com/gruntjs/grunt-contrib-htmlmin]
  • [grunt-contrib-imagemin|https://github.com/gruntjs/grunt-contrib-imagemin]
  • [grunt-contrib-uglify|https://github.com/gruntjs/grunt-contrib-uglify]
  • [grunt-contrib-concat|https://github.com/gruntjs/grunt-contrib-concat]

以下配置是起 generate-angular 中拷贝过来用的:

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
    options: {
        dest: '<%= config.dist %>'
    },
    html: [
        '<%= config.app %>/index.html'
    ]
},

// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
    options: {
        assetsDirs: [
            '<%= config.dist %>',
            '<%= config.dist %>/images'
        ]
    },
    html: ['<%= config.dist %>/{,*/}*.html'],
    css: ['<%= config.dist %>/styles/{,*/}*.css']
},

// The following *-min tasks produce minified files in the dist folder
imagemin: {
    dist: {
        files: [
            {
                expand: true,
                cwd: '<%= config.app %>/images',
                src: '{,*/}*.{gif,jpeg,jpg,png}',
                dest: '<%= config.dist %>/images'
            }
        ]
    }
},

svgmin: {
    dist: {
        files: [
            {
                expand: true,
                cwd: '<%= config.app %>/images',
                src: '{,*/}*.svg',
                dest: '<%= config.dist %>/images'
            }
        ]
    }
},

htmlmin: {
    dist: {
        options: {
            customAttrAssign: [/\?=/],
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeCommentsFromCDATA: true,
            removeEmptyAttributes: true,
            removeOptionalTags: true,
            removeRedundantAttributes: true,
            useShortDoctype: true
        },
        files: [
            {
                expand: true,
                cwd: '<%= config.dist %>',
                src: ['{,*/}*.html', 'views/{,*/}*.html', 'templates/{,*/}*.html'],
                dest: '<%= config.dist %>'
            }
        ]
    }
}

这边要证实的凡 app/index.html文件,也就算是以配置中:

useminPrepare: {
    html: [
        '<%= config.app %>/index.html'
    ]
}

斯选项是吃 usemin 插件去探寻下面论引用的,这里默认只是设定了 index.html
文件,因为这是一个Angular
SPA项目,所以就生一个index.html文件作为主入口,如果你有多单不同之视图模板,而且所引述的
script 都休想同的话,可以将这些模板页明确地位于这 html
数组选项中。

有关usemin的详细用法可以参见google的官文档,以下只是对最好常用之局部进行讲解,力求不失押官方那个硕大之英文文档也会迅速地动用起来。

打开 index.html :

<!doctype html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Project Title</title>
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->

    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/index.js -->
    <!-- endbuild -->
    <base target="_blank">
</head>
<body ng-strict-di>
<div ui-view></div>
</body>
</html>

假定您够细心而晤面发现此处出一些“与众不同之”标记,<!--build:js--><!-- endbuild -->
<!--build:css--><!-- endbuild -->
骨子里就不是注释,他们实际上是 usemin 的专用配置标记。其中
<!-- bower:js--><!--endbower--> 是其它一个插件 bowerInstall 的
配备标记,我会在下文再详尽讲解。

其一符号其实挺简单用他翻过来就是:<!-- build:类型[js|css] 生成的目标文件>,
源文件目录就是当下html所当的目,如果一旦指定多单
源目录可以经过<!-- build:类型({目录1,目录2}) 生成的目标文件>的艺术指定。

本这来理解吧,这里的装就会输出三只文件:

  • vendor.js //第三着依的合成减少脚本
  • index.js //项目外之底合成减少脚本
  • vendor.css //第三正在依的合成压缩样式表
  • main.css //项目外的合成压缩样式表

好吧,先来说说 vendor.*,如果装了 bowerInstall
这个插件在<!-- bower:类型 --><!-- endbower-->外之援是由于 bowerInstall
自动进入的,他参加后会窜index.html源文件,我们无待手工加入。而对于一些较坑爹的老三担保,这里因的坑爹是他的终极输出文件在有稀奇古怪的深层目录中,而休是在他的发布目录的根下,那么我们才用手工加入引用。如
ace-builds 这个包,他的颁布文件是在
ace-builds/src/ace.js,同时他以提供了ace-build/src-min/ace.js
文件,对于这仿佛保险我们便只能手工用具体的援文件在到 <!-- bower-->
标记内,否则bowerInstall是匪掌握该引用哪一个文本的。

设若输出位置就是前我们在 usemin选项中设定的:

useminPrepare {
    options: {
            dest: '<%= config.dist %>'
     }
}

也就是 项目目录/dist

属下是 main.cssindex.js
,这简单个是从不同之源来生成的,main.css
没有指定源,所以他会当当前之index.html所在位置中找找 styles 目录也即是
项目目录/app/styles,那么具体要引用那些自自然的css(之前经过
less生成的)就以此设定。

解释得尤为清楚一些哪怕是 假设有一个 app/styles/custom.less 文件,那么在
index.html内进入者引用应该是:

<!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/custom.css">
<!-- endbuild -->

则custom.css在设计期并无设有,但他会晤受less编译器最终输出,所以引用时要名字对了就推行了。

同样的 build:js 的装也是这理,只是这里多了 .tmp
作源搜寻目录,就是说当 .tmp 找不至的源文件 可以交
app/scripts下找,反之亦然。

bowerInstall

接通上文,就是以此 bowerInstall
插件了,他即是得于bower.json文件自动识别我们的色引入了哪些第三正依,然后就用据的文本自动地注入到
<!--bower:js--><!--bower:css-->标志里面。

npm install grunt-bower-install --save-dev

配备如下:

bowerInstall: {
    app: {
        src: ['<%= config.app %>/index.html'],
        ignorePath: '<%= config.app %>/'
    }
}

bowerInstall 有一个替代品,叫 wiredep
,但此插件很笨,经常会起引用错误的问题,所以这里还是引进用bowerInstall

Angular 的自行依赖注入

对接下去就是如果吗 Angular
环境作专门的部署了,首先要配置的凡据注入。先来看来来Angular官方推荐的依赖注入方法:

angular.main('myApp',[]).controller('MyCtrl',['$scope','$log','$http','$resource',($scope,$log,$http,$resource)->
    #我们的代码在此
])

只不过为因注入我们实际上是格外无趣地修这些对应的白痴式引用,当然就发一两只自然没什么问题,但一旦流入得差不多矣那是概念就是变得
远之难读。如果我们用地方的代码写成这样:

MyCtrl=($scope,$log,$http,$resource)->
 #控制器代码在此
 @

angular.main('myApp',[]).controller 'MyCtrl',MyCtrl

这样是不是又易于读吧?为了兑现此功能,我们得行使
[ngAnnotate|https://www.npmjs.com/package/grunt-ng-annotate]
插件辅助我们贯彻这
种动态式的插,使得我们的代码可读性可以大大地追加。

npm install grunt-ng-annotate --save-dev

ngAnnotate:
{
    dist: {
        files: [
            {
                expand: true,
                cwd: '.tmp/concat/scripts',
                src: ['*.js', '!oldieshim.js'],
                dest: '.tmp/concat/scripts'
            }
        ]
    }
}

自动生成 Angular API 文档

随即是一个我觉得非常 Cool
的插件,他能一直由源代码中一直抽出注释并转一个API参考网站,对于开发产品种类拉极大。这个插件叫
[ngdocs|https://www.npmjs.com/package/grunt-ngdocs]

npm install ngdocs –save-dev

此插件配置非常是简约,但他非克支撑coffeescript,那么我们不得不从扭转的javascript文件作为注释文档生成源:

ngdocs: {
  all: ['.tmp/scripts/**/*.js']
}

有关 ngdocs 这个主题后我会专门花时另行详尽刻画一首文章来具体说明一下。

本子模板

以以Angular的 Routing、directive或是其它的插件,如 angular-ui
都或行使到模板。如:

MyDirective=->
  restrict:'E'
  tempalteUrl:'scripts/directives/MyDirective.tpl.html'

angular.module('myApp').directive 'MyDirective',MyDirective

对利用了 tempalteUrl
指定的模版是无力回天在Karma的测试着找到的,因为jasmine只能找到脚本而非克找到html文件。这样一来就会教得
directive 成为一个不可测试的部件。可以应用
[html2js|https://github.com/karlgoldstein/grunt-html2js]
解决当时无异于问题(angularJS官方推荐)。这个插件的最为深作用是以html文件直接编译为js文件,而不管需要转移我们的源代码,这样一来既而在测试高达解决这题目呢得以用html模板文件包为可颁布之本子(如果您仔细一点会面发现
angular-ui 就是种做的,angular-ui-tpl.js 就是模板文件)。

npm install grunt-html2js --save-dev

斯布局会发出点点复杂

html2js: {
    options: {
        base: 'app',
        target: 'coffee',
        module: 'myApp.templates', //模板会生成至模块内,需要明确指定模块的名称
        singleModule: true,
        useStrict: true,
        htmlmin: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }
    },
    main: {
        src: ['<%= config.app %>/scripts/**/*.tpl.html'],
        dest: '<%= config.app %>/scripts/templates.coffee'
    }
}

起几乎接触当采取时用留意:

  1. 此间才检测 app 目录下有的以
    *.tpl.html结尾的HTML文件(视为模板文件)
  2. 这文件会生成至源目录(app/scripts/)下的templates.coffee
    待coffee编译进行后处理
  3. 于 app.coffee 文件内待鲜明地引入由 module
    所指定的模板模块,否则会引用失败

此外考虑到本文的篇幅问题,这里就小过了 copy, watch 和 connect
三个最好常用的职责部署,具体的可以自本文内附的源代码内参考。

karma

Karma runner
应该属于即最盛行的测试运行器之一了。他的布于Gurnt貌似很简短,而然事实并非如此。他发出单独的部署文件于随档蒙呢karma.conf.js,他的布置选比较多以这个便不一一地详细说明了,这里自己是以Karma配置成会支撑
coffee script并基于 [PhantomJS|http://phantomjs.org]
作为宿主浏览器,以 [jasmine|http://jasmine.github.io/]
作为测试运行架构的之单元测试环境。所有的单元测试文件存放于 test/spec
目录下。

外得之倚重插件分别发:

  • karma-coffee-preprocessor
  • karma-coverage
  • karma-jasmine
  • karma-junit-reporter
  • karma-chrome-launcher
  • karma-phantomjs-launcher
  • karma-requirejs
  • karma-story-reporter

安装后底安排如下:

karma:
 {
    unit: {
        configFile: 'karma.conf.js',
        singleRun: true
    }
}

此间要小心的凡,在 karma.conf.js 配置的公文之 filesexclude
两单挑选,files 内需要配备一体项目运行期
要以的 bower 依赖包,如:

files: [
            'app/bower_components/angular/angular.js',
            'test/spec/{,*/}*.coffee'
       ]

倘若应用及外的angular插件引用得以是参加,则会容许会见导致单元测试AngularJS因找不顶因包要招致注入失败。

exclude 就自然是任需要加载的文本。

是因为国内网络环境问题 安装 phantomJS
可能会见偏慢,如果无法下载phantomJS可以拿其去,而动 chrome 代替。

protractor

对e2e测试(白盒测试/集成测试)也得以用Karma+angular-scenario来安排,但以此以AngularJS官方已当做过时配置而未叫推荐。取而代之的自是
[protractor|http://angular.github.io/protractor/#/]
他也jasmine所扩展的matcher很多,用起确实是
可怜好用。然而 protractor
可能于新吧(发展了才同年多之时刻)他的设置包下载是极其慢的,由其是
[selenium|http://www.seleniumhq.org]的安装。

外的布有点像 karma 也是通过一个外表的
protractor.conf.js文件作为额外的叠加配置的,在 Gruntfile.js 内:

protractor: {
    options: {
        keepAlive: true,
        configFile: "protractor.conf.js"
    },
    all: {}
}

只是值得一谈的凡他所依之 Webdriver 的安装过程。

安装protractor包

npm install protractor --save-dev

protractor 安装后会见赢得一个 webdriver-manager 的命令行工具。protractor
依赖让 selenium 服务器,且selenium是一个基于java开发的,so
在此之前则要事先安装好JDK。

除此以外 protractor 只能支持 chrome 和 ie 两种植浏览器驱动,需要在成就
protractor安装后手动运行:

webdriver-manager update

不知是不是人品问题(我绝对免以为天朝的纱有题目的),这个令自己是总运行无成功!这个命令会从
google的官网上下载一个chrome的依样画葫芦驱动程序至本机的/usr/local/lib/node_modules/protractor/selenium/chromedriver/
目录,如果您的人品以及本人平,也是无力回天下载的话语,那么您可以直接当google上下去载
[chromedriver|https://sites.google.com/a/chromium.org/chromedriver/]
的教然后手工解压到这地方目录下即可。(BTW
我的环境是OSX,在Linux下自己未清楚凡是啊状况,试过的对象要给本人留言作为补偿吧)

鉴于各种的不成功,最后我是直接拿 protractor
的布置指向本绝对目录地址之,如果您发平等的状况出现就是用以下的星星只布局在到protractor.conf.js中吧

seleniumServerJar: '/usr/local/lib/node_modules/protractor/selenium/selenium-server-standalone-2.44.0.jar',
chromeDriver: '/usr/local/lib/node_modules/protractor/selenium/chromedriver/'

protractor 有某些于好的凡可和 WebStorm 以下是切实安排的法门:

AngularJS 1

WOO

鲁写了这般丰富平首,光是蹭文章貌似不绝美好,那么要对这个脚手架项目产生趣味之情侣要到[我的
github|http://www.github.com/dotnetage/]上下载这个类别吧。项目地址是:https://github.com/DotNetAge/Angular-CoffeeScript-Seed。下载后,需要各自运行

sudo npm install
bower install

对本文所陈述之承保进行一次性安装。暂时还尚无时间将这包写成 Yeoman Generator
,不过饭要一如既往人一人吃吧,或者您可以一直Fork这个项目噢。

相关文章