Yeoman 学习笔记
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
npm install -g yonpm install -g generator-webapp
PS: yo 是命令开头，webapp 是 另外一个参数. yo 可以生成其他各种应用配置。如 backbone, angularjs等，前提首先安装 generator-backbone，即
yo webapp
此时可以看到
webapp 默认带有 Sass 版的 bootstrap库，等到下载完毕后可以看到以下文件：
app 为项目主目录，是部署的根目录
node_modules 为 nodejs的包文件
test 为测试目录，专门用于单元测试，用的是 mocha 来测试
Gruntfile.js 是配置 grunt 自动化任务的配置文件，具体配置可以参考下 Grunt官网
二、添加JS库，这里添加 backbone，bower 会自动下载 underscore.
bower install backbone
三、运行
grunt server
它将运行应用，并监控文件的变化，一旦有改变，就会自动刷新浏览器。
文件又这几个，用的是
- HTML5 Boilerplate 模板（默认）
- RequireJS （可选）
四、开始写应用
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap-2.3.2.min.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div class="container">
<div class="todo-container">
<div class="header">
<h2>Todo List</h2>
<div class="todo-input">
<div class="controls">
<input type="text" placeholder="Enter to save" class="todo-input-text" autofocus>
</div>
</div>
</div>
<div class="content">
<div class="todo-item-list todo-undone-list clearfix">
<p>Things to do:</p>
</div>
<div class="todo-item-list todo-done-list clearfix">
<p>Done Things:</p>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
<script type="text/template" id="todo-input-template">
</script>
<script type="text/template" id="todo-item-template">
<span class="order"><%= order%></span>
<a href="javascript:void(0);" class="done-<%= done%>">
<b><%= title%></b>
<button title="删除" class="btn btn-mini pull-right todo-item-remove"><i class="icon-remove"></i></button>
<% if (done) { %>
<button title="撤销" class="btn btn-mini pull-right todo-item-undone"><i class="icon-repeat"></i></button>
<% } else { %>
<button title="完成" class="btn btn-mini pull-right todo-item-done"><i class="icon-ok"></i></button>
<% } %>
</a>
</script>
<!--[if lt IE 7]>
<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>
<![endif]-->
<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
</body>
</html>
main.coffee
require.config
baseUrl : './scripts/'
shim :
underscore :
exports : '_'
backbone :
deps : [
'underscore'
'jquery'
]
exports : 'Backbone'
backboneLocalStorage :
deps : [
'backbone'
]
app :
deps : [
'underscore'
'jquery'
'backbone'
]
paths :
jquery : '../bower_components/jquery/jquery'
underscore : '../bower_components/underscore/underscore'
backbone : '../bower_components/backbone/backbone'
backboneLocalStorage: '../bower_components/backbone/examples/backbone.localStorage'
require ['app'], (app) ->
app.init()
app.coffee
define 'app', ['jquery', 'underscore', 'backbone', 'backboneLocalStorage'], ($, _, Backbone) ->
TodoModel = Backbone.Model.extend
defaults : () ->
title : 'Untitle',
done : false,
order : Todos.length+1
initialize : () ->
this.save()
TodoList = Backbone.Collection.extend
model : TodoModel
localStorage : new Backbone.LocalStorage 'todos-backbone'
done : () ->
this.where done : true
Todos = new TodoList # todo 集合
TodoView = Backbone.View.extend
tagName : 'div' # 外容器
template : _.template $('#todo-item-template').html() # 模板HTML
# 初始化，坚听对象
initialize : () ->
this.listenTo this.model, 'change', this.render
this.listenTo this.model, 'destroy', this.remove
# 事件绑定
events :
'click button.todo-item-done' : 'done'
'click button.todo-item-remove' : 'clear'
'click button.todo-item-undone' : 'undone'
done : () ->
if this.model.get('done') == false # 本身是未完成状态的
this.model.set done : true
this.remove()
undone : () ->
if this.model.get('done') == true # 本身是完成状态的
this.model.set done : false
this.remove()
clear : () ->
this.model.destroy()
render : () ->
this.$el.html this.template this.model.toJSON()
return this
AppView = Backbone.View.extend
# 初始化保存DOM对象
initialize : () ->
this.$input = this.$('.todo-input-text').focus()
this.$todoList = this.$('.todo-undone-list')
this.$todoDoneList = this.$('.todo-done-list')
this.listenTo Todos, 'add', this.addOne
this.listenTo Todos, 'change:done', this.addOne
Todos.fetch()
events :
'keypress input.todo-input-text' : 'createOnEnter'
# Enter 时保存
createOnEnter : (e) ->
if e.keyCode != 13
return
if !this.$input.val()
return;
Todos.create title: this.$input.val()
this.$input.val('')
addOne : (todo) ->
view = new TodoView model : todo
if todo.get('done')
# 已经完成的加入已完成列表
this.$todoDoneList.append(view.render().el);
else
# 未完成的加入未完成列表
this.$todoList.append(view.render().el);
# Todos.each (todo) ->
todo.save()
App = new AppView el : $('.todo-container') # 主应用UI
return init : () ->
Backbone.history.start()
main.css
.todo-container {
margin: 50px auto 0 auto;
width: 300px;
}
.todo-item-list {
margin-top: 20px;
}
.todo-item-list > div {
float: left;
width: 90%;
margin-top: 10px;
padding-left: 5%;
}
.todo-item-list > div a:hover {
text-decoration: none;
}
.todo-item-list > div button {
margin: 0 3px;
}
.todo-item-list > div span.order {
margin-right: 10px;
color: #B6B6B6;
font-style: italic;
}
.todo-item-list > p {
font-weight: bold;
margin-top: 1em;
}
效果图
补充：
这里用的是 coffeescript，yeoman会自动转成js。关于todo-list，可以上官网参考下，我这里简化了部分代码。
Yeoman 学习笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- 我的MYSQL学习心得（一） 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 微软发布正式版SQL Server 2016
微软于今天在SQL 官方博客上宣布 SQL Server 数据库软件的正式发布版本(GA),历时一年多,微软为该软件发布了多个公共预览版和候选版本,而今天最终版本终于上线了.在博客中,微软数据集团的企 ...
- Java初始化过程
这篇文章主要讲解Java在创建对象的时候,初始化的顺序.主要从以下几个例子中讲解: 继承关系中初始化顺序 初始化块与构造器的顺序 已经加载过的类的初始化顺序 加载父类,会不会加载子类 创建子类对象会不 ...
- Hyper-V2：向VM增加虚拟硬盘
使用Hyper-V创建VM,在VM成功安装OS之后,发现VM只有一个逻辑盘C,用于存储VM的操作系统.在产品环境中,需要向VM增加虚拟硬盘,便于将数据单独存储在不同的逻辑盘符中.在Hyper-V中,分 ...
- 编写高质量代码:改善Java程序的151个建议(第8章:多线程和并发___建议126~128)
建议126:适时选择不同的线程池来实现 Java的线程池实现从根本上来说只有两个:ThreadPoolExecutor类和ScheduledThreadPoolExecutor类,这两个类还是父子关系 ...
- python基础
内容概要: 一.python2 or python3 目前大多使用python2.7,随着时间的推移,python3将会成为python爱好者的主流. python2和3区别: 1.PRINT IS ...
- python 数据类型 --- 集合
1. 注意列表和集合的区别 set 列表表现形式: list_1 = [1,3,4]; 集合表现形式:set_1= set() list_1 = [1,2,3,4,23,4,2] print(lis ...
- 自己实现简单Spring Ioc
IoC则是一种 软件设计模式,简单来说Spring通过工厂+反射来实现IoC. 原理简单说明: 其实就是通过解析xml文件,通过反射创建出我们所需要的bean,再将这些bean挨个放到集合中,然后对外 ...
- Web安全开发之验证码设计不当引发的撞库问题
感谢某电商平台安全工程师feiyu跟我一起讨论这个漏洞的修复.以往在安全测试的过程中后台经常存在验证码不失效果造成的撞库问题,甚至在一些银行或者电商的登录与查存页面同样存在这个问题,一旦造成撞库无论对 ...
- Set up VLAN (802.1q) tagging on a network interface?
SOLUTION VERIFIED October 13 2015 KB39674 KB741413 environment Red Hat Enterprise Linux 4 Red Hat En ...