入门使用

文本结构

脚手架生成的代码结构依据 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 : 跳过没有变化的公文,减弱重编写翻译时间

脚手架选项

使用 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
引用目的文件地点。所以修改文件生成地址时,须求同时修改依赖此文件夹的剧本。

脚手架在构架进度中会问的题材

  • 选用 jQuery 版本: jQuery 1.x, 2.x, Zepto, none
  • 选用 Angular 模块: animate, cookies, touch, sanitize
  • 选拔 Angular UWranglerI处理模块: 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

回去导航

行使 居尔p 职分列表

  • 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举办端到端测试

更加多应用方式详细使用手册.

重回导航

创制你的门类

设置须要的正视性 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]