创建你的项目
安装必要的依赖 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
网友评论