yoeman 简介：http://www.infoq.com/cn/news/2012/09/yeoman

yeoman 官网： http://yeoman.io/

yeoman 是快速创建骨架应用程序的WEB前端工具，实际由 yo, grunt, bower 三个组建而成。

  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.

  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.

  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

简单来说就是 Yo 是配置 Grunt 的 task 的工具，Grunt 是一个部署、预览和测试前端项目的工具，而 Bower 是一个包的管理工具，可以下载 jquery, backbone 等库。

PS: 要运行 yeoman 首先需要配置环境，配置好 node.js 、git 环境。

下面开始写一个 todo-list demo 作为例子

一、首先安装 yo，这会自动安装 grunt, bower

  1. npm install -g yonpm install -g generator-webapp

PS: yo 是命令开头，webapp 是 另外一个参数. yo 可以生成其他各种应用配置。如 backbone, angularjs等，前提首先安装 generator-backbone，即

  1. yo webapp

此时可以看到

webapp 默认带有 Sass 版的 bootstrap库，等到下载完毕后可以看到以下文件：

app 为项目主目录，是部署的根目录

node_modules 为 nodejs的包文件

test 为测试目录，专门用于单元测试，用的是 mocha 来测试

Gruntfile.js 是配置 grunt 自动化任务的配置文件，具体配置可以参考下 Grunt官网

二、添加JS库，这里添加 backbone，bower 会自动下载 underscore.

  1. bower install backbone

三、运行

  1. grunt server

它将运行应用，并监控文件的变化，一旦有改变，就会自动刷新浏览器。

文件又这几个，用的是

  • HTML5 Boilerplate 模板（默认）
  • RequireJS （可选）

四、开始写应用

index.html

  1.  <!doctype html>
  2.  <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3.  <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4.  <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5.  <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6.      <head>
  7.          <meta charset="utf-8">
  8.          <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.          <title></title>
  10.          <meta name="description" content="">
  11.          <meta name="viewport" content="width=device-width">
  12.          <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  13.          <!-- build:css(.tmp) styles/main.css -->
  14.          <link rel="stylesheet" href="styles/bootstrap-2.3.2.min.css">
  15.          <link rel="stylesheet" href="styles/main.css">
  16.          <!-- endbuild -->
  17.          <!-- build:js scripts/vendor/modernizr.js -->
  18.          <script src="bower_components/modernizr/modernizr.js"></script>
  19.          <!-- endbuild -->
  20.      </head>
  21.      <body>
  22.          <div class="container">
  23.               <div class="todo-container">
  24.                  <div class="header">
  25.                      <h2>Todo List</h2>
  26.                      <div class="todo-input">
  27.                          <div class="controls">
  28.                              <input type="text" placeholder="Enter to save" class="todo-input-text" autofocus>
  29.                          </div>
  30.                      </div>
  31.                  </div>
  32.                  <div class="content">
  33.                      <div class="todo-item-list todo-undone-list clearfix">
  34.                          <p>Things to do:</p>
  35.                      </div>
  36.                      <div class="todo-item-list todo-done-list clearfix">
  37.                          <p>Done Things:</p>
  38.                      </div>
  39.                  </div>
  40.                  <div class="footer">
  41.                  </div>
  42.              </div>
  43.          </div>
  44.  
  45.          <script type="text/template" id="todo-input-template">
  46.          </script>
  47.          <script type="text/template" id="todo-item-template">
  48.              <span class="order"><%= order%></span>
  49.              <a href="javascript:void(0);" class="done-<%= done%>">
  50.                  <b><%= title%></b>
  51.                  <button title="删除" class="btn btn-mini pull-right todo-item-remove"><i class="icon-remove"></i></button>
  52.                  <% if (done) { %>
  53.                      <button title="撤销" class="btn btn-mini pull-right todo-item-undone"><i class="icon-repeat"></i></button>
  54.                  <% } else { %>
  55.                      <button title="完成" class="btn btn-mini pull-right todo-item-done"><i class="icon-ok"></i></button>
  56.                  <% } %>
  57.              </a>
  58.          </script>
  59.          <!--[if lt IE 7]>
  60.              <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  61.          <![endif]-->
  62.  
  63.          <!-- build:js scripts/main.js -->
  64.          <script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
  65.          <!-- endbuild -->
  66.  </body>
  67.  </html>

main.coffee

  1.  require.config
  2.    baseUrl : './scripts/'
  3.    shim :
  4.      underscore :
  5.        exports : '_'
  6.      backbone :
  7.        deps : [
  8.          'underscore'
  9.          'jquery'
  10.        ]
  11.        exports : 'Backbone'
  12.      backboneLocalStorage :
  13.        deps : [
  14.          'backbone'
  15.        ]
  16.      app :
  17.        deps : [
  18.          'underscore'
  19.          'jquery'
  20.          'backbone'
  21.        ]
  22.  
  23.    paths :
  24.      jquery : '../bower_components/jquery/jquery'
  25.      underscore : '../bower_components/underscore/underscore'
  26.      backbone : '../bower_components/backbone/backbone'
  27.      backboneLocalStorage: '../bower_components/backbone/examples/backbone.localStorage'
  28.  
  29.  require ['app'], (app) ->
  30.    app.init()

app.coffee

  1.  define 'app', ['jquery', 'underscore', 'backbone', 'backboneLocalStorage'], ($, _, Backbone) ->
  2.  
  3.    TodoModel = Backbone.Model.extend
  4.      defaults : () ->
  5.        title : 'Untitle',
  6.        done  : false,
  7.        order : Todos.length+1
  8.  
  9.      initialize : () ->
  10.        this.save()
  11.  
  12.    TodoList = Backbone.Collection.extend
  13.      model : TodoModel
  14.      localStorage : new Backbone.LocalStorage 'todos-backbone'
  15.      done : () ->
  16.        this.where done : true
  17.  
  18.    Todos = new TodoList  # todo 集合
  19.  
  20.    TodoView = Backbone.View.extend
  21.      tagName  : 'div'  # 外容器
  22.      template : _.template $('#todo-item-template').html()   # 模板HTML
  23.  
  24.      # 初始化，坚听对象
  25.      initialize : () ->
  26.        this.listenTo this.model, 'change',  this.render
  27.        this.listenTo this.model, 'destroy', this.remove
  28.  
  29.      # 事件绑定
  30.      events :
  31.        'click  button.todo-item-done'   : 'done'
  32.        'click  button.todo-item-remove' : 'clear'
  33.        'click  button.todo-item-undone' : 'undone'
  34.  
  35.      done : () ->
  36.        if this.model.get('done') == false  # 本身是未完成状态的
  37.          this.model.set done : true
  38.          this.remove()
  39.  
  40.      undone : () ->
  41.        if this.model.get('done') == true  # 本身是完成状态的
  42.          this.model.set done : false
  43.          this.remove()
  44.  
  45.      clear : () ->
  46.        this.model.destroy()
  47.  
  48.      render : () ->
  49.        this.$el.html this.template this.model.toJSON()
  50.        return this
  51.  
  52.    AppView = Backbone.View.extend
  53.      # 初始化保存DOM对象
  54.      initialize : () ->
  55.        this.$input = this.$('.todo-input-text').focus()
  56.        this.$todoList = this.$('.todo-undone-list')
  57.        this.$todoDoneList = this.$('.todo-done-list')
  58.  
  59.        this.listenTo Todos, 'add',         this.addOne
  60.        this.listenTo Todos, 'change:done', this.addOne
  61.  
  62.        Todos.fetch()
  63.  
  64.      events :
  65.        'keypress input.todo-input-text'    : 'createOnEnter'
  66.  
  67.      # Enter 时保存
  68.      createOnEnter : (e) ->
  69.        if e.keyCode != 13
  70.          return
  71.        if !this.$input.val()
  72.          return;
  73.  
  74.        Todos.create title: this.$input.val()
  75.        this.$input.val('')
  76.  
  77.      addOne : (todo) ->
  78.        view = new TodoView  model : todo
  79.        if todo.get('done')
  80.          # 已经完成的加入已完成列表
  81.          this.$todoDoneList.append(view.render().el);
  82.        else
  83.          # 未完成的加入未完成列表
  84.          this.$todoList.append(view.render().el);   
  85.  
  86.        # Todos.each (todo) ->
  87.        todo.save() 
  88.  
  89.    App = new AppView el : $('.todo-container')   # 主应用UI
  90.  
  91.    return init : () ->
  92.      Backbone.history.start()
  93.

main.css

  1.  .todo-container {
  2.      margin: 50px auto 0 auto;
  3.      width: 300px;
  4.  }
  5.  .todo-item-list {
  6.      margin-top: 20px;
  7.  }
  8.  .todo-item-list > div {
  9.      float: left;
  10.      width: 90%;
  11.      margin-top: 10px;
  12.      padding-left: 5%;
  13.  }
  14.  .todo-item-list > div a:hover {
  15.      text-decoration: none;
  16.  }
  17.  .todo-item-list > div button {
  18.      margin: 0 3px;
  19.  }
  20.  .todo-item-list > div span.order {
  21.      margin-right: 10px;
  22.      color: #B6B6B6;
  23.      font-style: italic;
  24.  }
  25.  .todo-item-list > p {
  26.      font-weight: bold;
  27.      margin-top: 1em;
  28.  }

效果图

补充：

这里用的是 coffeescript，yeoman会自动转成js。关于todo-list，可以上官网参考下，我这里简化了部分代码。

Yeoman 学习笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. 深入理解DIP、IoC、DI以及IoC容器

    摘要 面向对象设计(OOD)有助于我们开发出高性能.易扩展以及易复用的程序.其中,OOD有一个重要的思想那就是依赖倒置原则(DIP),并由此引申出IoC.DI以及Ioc容器等概念.通过本文我们将一起学 ...

  2. 如何正确使用日志Log

    title: 如何正确使用日志Log date: 2015-01-08 12:54:46 categories: [Python] tags: [Python,log] --- 文章首发地址:http ...

  3. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  4. ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构

    和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...

  5. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  6. 每天一个设计模式-7 生成器模式（Builder）

    每天一个设计模式-7 生成器模式(Builder) 一.实际问题 在讨论工厂方法模式的时候,提到了一个导出数据的应用框架,但是并没有涉及到导出数据的具体实现,这次通过生成器模式来简单实现导出成文本,X ...

  7. 【干货分享】流程DEMO-制度发文和干部任免

    流程名: 制度发文和干部任免  业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请.  流程相关文件: 流程包.xml  流程说明: 直接导入流程包文件,即可使用本流程  表单: ...

  8. 易用BPM时代，企业如何轻松驾驭H3？

    众所周知,BPM作为企业发展的推动力,能敏捷高效的融合业务流程和信息资源.通过综合考虑流程的成本.效率.质量等方面因素,用IT系统将调整后的流程固化下来,从而降低企业管理成本,提高内部运营效率,提升企 ...

  9. 基于开源项目SharpMap的热力图(HeatLayer)实现。

    当前公司需要一个用时较少的热力图呈现方案,在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后,团队决定用sharpMap的API来实现,由于之前框架采用的是另外一个开源项目GMap.net, ...

  10. 解决mysql插入数据时出现Incorrect string value: '\xF0\x9F...' for column 'name' at row 1的异常

    这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表情或者某些特殊字符是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 我的解决方案是这样的 1.在mysql ...