入门使用

返回导航

创建你的项目

安装必要的依赖 yo, gulp, bower

cnpm i -g yo gulp bower

安装 generator-gulp-angular:

cnpm i -g generator-gulp-angular

创建项目文件夹(my-new-project)并进入 cd

mkdir my-new-project && cd $_

此处如果需要添加远程仓库，可先初始化 git init

在项目文件夹中运行 yo gulp-angular, 可选择性传入项目名（app-name)，没传入名称会默认使用文件夹名字作为项目名字。

yo gulp-angular [app-name]

脚手架选项

使用 yo gulp-angular --help 或者 yo gulp-angular -h 调出命令行，所有选项均系选填，未指明的情况下会使用默认值。

• --app-path='src' 配置 Angular app 文件夹的相对地址（相对当前地址）默认 src
• --dist-path='dist' 配置目标文件夹的相对地址（相对当前地址）默认 dist
• --e2e-path='e2e' 配置端到端测试文件夹的相对地址（相对当前地址）默认 e2e
• --tmp-path='.tmp' 配置缓存文件夹的相对地址（相对当前地址）默认 .tmp
• --skip-install 跳过安装（bower i && cnpm i) 默认自动开始安装
• --skip-welcome-message 跳过脚手架欢迎界面，默认不跳过
• --skip-message 跳过安装信息，默认不跳过
• --default 使用默认配置，默认否
• --advanced 自定义配置项，默认空

命令中配置的文件地址会存储在gulpfile.js文件中。可以通过修改 options.(src|dist|tmp|e2e) 选项的值来实现已经生成好的项目文件地址。

注意: 配置地址同时在其他文件中存在依赖，比如index.html 引用目标文件地址。所以修改文件生成地址时，需要同时修改依赖此文件夹的脚本。

使用 Gulp 任务列表

• gulp 或者 gulp build 用于构建项目并生成文件到/dist目录
• gulp serve 基于源码启动本地 browser-sync 服务器进行预览
• gulp serve:dist 基于目标代码启动 browser-sync 服务器进行预览
• gulp test 使用 Karma 进行单元测试
• gulp test:auto使用 Karma 进行单元测试监听，实现自动化测试
• gulp protractor 使用Protractor进行端到端测试
• gulp protractor:dist 基于目标文件夹使用Protractor进行端到端测试

更多使用方式详见使用手册.

文件结构

脚手架生成的代码结构依照 Angular App 文件结构最佳实践

下面例子以项目名为 gulpAngular 进行展示：

├──  bower_components/
├──  e2e/
├──  gulp/
├──  nodes_modules/
│
├──  src/
│   ├──  app/
│   │   ├──  components/
│   │   │   └──  githubContributor/
│   │   │   │   └──  githubContributor.service.js
│   │   │   │
│   │   │   └──  malarkey/
│   │   │   │   ├──  malarkey.directive.js
│   │   │   │   └──  malarkey.(scss|styl|less|css)
│   │   │   │
│   │   │   └──  navbar/
│   │   │   │   ├──  navbar.directive.(js|ts|coffee)
│   │   │   │   ├──  navbar.html
│   │   │   │   └──  navbar.(scss|styl|less|css)
│   │   │   │
│   │   │   └──  webDevTec/
│   │   │       └──  webDevTec.service.js
│   │   │
│   │   ├──  main/
│   │   │   ├──  main.controller.(js|ts|coffee)
│   │   │   ├──  main.controller.spec.js
│   │   │   └──  main.html
│   │   │
│   │   └──  index.config.(js|ts|coffee)
│   │   └──  index.constants.(js|ts|coffee)
│   │   └──  index.module.(js|ts|coffee)
│   │   └──  index.route.(js|ts|coffee)
│   │   └──  index.run.(js|ts|coffee)
│   │   └──  index.(scss|styl|less|css)
|   |
│   ├──  assets/
│   │   └──  images/
│   ├──  favico.ico
│   └──  index.html
│
├──  .bowerrc
├──  .editorconfig
├──  .gitignore
├──  .eslintrc
├──  bower.json
├──  gulpfile.js
├──  karma.conf.js
├──  package.json
└──  protractor.conf.js

上述目录中使用了 HTML作为案例，实际开发中，可以在 src文件夹中任意添加 .jade, .haml 或者 .hbs (依赖于你使用的模板语言) 。脚手架会自动识别这些模板语言，并自动编译为 HTML。
** 注意 ** 新建一种文件类型时，gulp 无法察觉，所以需要重启 gulp 完成。

glupfile 中的关键词

• useref : HTML 文件中用于标识 gulp 工作的标记，可自定义
• ngAnnotate : 将依赖注入语法糖转为完整的依赖注入过程，保证压缩后可用
• uglify : 优化所有的 JavaScript
• csso : 优化所有的 CSS
• autoprefixer : 根据配置，向 CSS 添加浏览器前缀
• rev : 给文件添加 hash 串来避免浏览器/CDN 缓存问题
• watch : 监听源文件并自动重启编译
• eslint : JavaScript 语言检查工具
• imagemin : 优化项目中的图片文件
• Unit test (karma) : 配置使用 Karma进行单元测试
• e2e test (protractor) : 配置使用 Protractor 进行端到端测试
• browser sync : 功能强大的本地服务器，可用于移动端实测
• angular-templatecache :所有 HTML文件会作为片段加入到 JavaScript 之中（类似 webpack 功能）
• TODO lazy : 跳过并未变化的文件，减少重编译时间

脚手架在构架过程中会问的问题

• 选用 jQuery 版本: jQuery 1.x, 2.x, Zepto, none
• 选用 Angular 模块: animate, cookies, touch, sanitize
• 选用 Angular URI处理模块: ngResource, Restangular, none
• 选用路由器: ngRoute, UI Router, none
• 选用 UI 框架: Bootstrap, Foundation, Angular Material, Material Design Lite, none (依赖选用的 css 预处理器)
• 选用 UI 组件库 : UI Bootstrap, Angular Strap, official Bootstrap JavaScript, Angular Foundation, official Foundation JavaScript, none (依赖选用的 UI框架)
• 选用 CSS 预处理器: Less, Sass with Ruby and Node, Stylus, none
• 选用 JavaScript 预处理器: CoffeeScript, TypeScript, ECMAScript 6 (Traceur and Babel), none
• 选用 HTML 预处理器: Jade, Haml, Handlebars, none
• TODO 选用脚本加载器: Require, Webpack, none
• TODO 选用测试框架: Jasmine, Mocha, Qunit

返回导航