前端工程构建工具——Yeoman

一、Yeoman 简介

通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库、框架文件(如 jQuery、Backbone 等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,过程非常繁琐,还没开始编码时间就耗了大半天。为了解决这个问题 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社区共同开发的一个项目——Yeoman。

 

Yeoman 是由三个工具的组成:YO、GRUNT、BOWER

YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具。

GRUNT:前端构建工具,jQuery就是使用这个工具打包的。

BOWER:Web 开发的包管理器,概念上类似 npm,npm 专注于 NodeJs 模块,而 bower 专注于 CSS、JavaScript、图像等前端相关内容的管理。

Yeoman 特性:

  • 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地创建新项目的骨架。
  • 自动编译 CoffeeScrip 和 Compass——在做出变更的时候,Yeoman 的 LiveReload 监视进程会自动编译源文件,并刷新浏览器,而不需要你手动执行。
  • 自动完善你的脚本——所有脚本都会自动针对 JSHint 运行,从而确保它们遵循语言的最佳实践。
  • 内建的预览服务器——你不需要启动自己的 HTTP 服务器。内建的服务器用一条命令就可以启动。
  • 非常棒的图像优化——使用 OptPNG 和 JPEGTran 对所有图像做了优化。
  • 生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单,你只需要构建项目就好。
  • “杀手级”的构建过程——你所做的工作不仅被精简到最少,让你更加专注,为你节省大量工作。
  • 集成的包管理——Yeoman 让你可以通过命令行轻松地查找新的包,安装并保持更新,而不需要你打开浏览器。
  • 对ES6模块语法的支持——你可以使用最新的 ECMAScript 6 模块语法来编写模块。这还是一种实验性的特性,它会被转换成 eS5,从而你可以在所有流行的浏览器中使用编写的代码。
  • PhantomJS单元测试——你可以通过 PhantomJS 轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架。

二、安装

这里以 OSX 上的安装为例,先来看下 Yeoman 的安装环境要求:

  • NodeJS >= 0.8.x
  • Ruby >= 1.8.7
  • Compass >= 0.12.1
  • optipng
  • jpegtran
  • PhantomJS >= 1.6

在 OSX 上 Ruby 是内置的,所以只需要手动配置下其它服务:

  • NodeJS 安装请直接去官网下载 .pkg 安装包进行安装(Homebrew 安装的 NodeJS 会有问题,无法运行 Yeoman 命令)
  • Compass 可以使用 Ruby 自带的包管理工具安装:
      $gem install compass
  • 其余的 optipng、jpegtran、PhantomJS 可以通过 Homebrew 安装,如果已经安装了 Xcode 那么 Xcode CLI Tools 就已经内置。

开始安装 Yeoman:

npm install -g yo grunt-cli bower

遇到权限问题请加sudo

安装完毕后,会看到以下提示:

 

三、使用

1、创建工程

安装好 Yeoman 后,就可以通过命令来新建工程,首先新建一个工程目录,比如 demo,首先创建 demo 目录然后在该下键入命令:

yo webapp

这时 Yeoman 会询问一些配置设置(这里全部选择了 Yes),之后就开始自动创建工程。

 

工程创建完毕后就可以看到 demo 目录下已经生成了许多目录及文件,这时开发所需的环境就搭建好了,可以开始编码了。

 

webapp 其实是 Yeoman 内置的工程模板,它整合了 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS 等框架或库文件,使我们创建完后就能直接使用。除了generator-webapp 还有一个 generator-mocha、generator-backbone、generator-angular等工程模板,可以通过npm search yeoman-generator命令查找,然后使用npm install [name]来安装。

如果工程中需要其它类库,也可以使用命令方便的添加,例如添加 underscore:

bower install underscore

2、启动工程服务

Yeoman 内置 Node 服务。启动命令:

 grunt server

服务启动后会自动打开浏览器访问http://localhost:9000/(端口号可以在 gruntfile.js 中配置),然后工程服务会监听工程目录下的预编译文件,一旦发生改变就自动编译并刷新浏览器。比如我们修改工程下的 main.scss 文件,工程服务就会开始运作:

 

3、运行测试框架

Yeoman 内置 mocha 测试框架,在 PhantomJS 环境下进行测试,测试命令:

grunt test

 

运行完毕后可以在工程里的 test 目录找到测试报告。

至此 Yeoman 的部署就完成了。接下来就是自定义一套工程模板。

参考文章

http://yeoman.io/index.html

http://www.36ria.com/6144

转载于:https://www.cnblogs.com/liusixin/p/6565881.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FME实战教程】001:FME2020中文安装图文教程(附安装包下载)

文章目录1. 安装license2. 安装FME Desktop3. 安装中文语言4. FME软件下载地址1. 安装license 打开软件安装包中的fme-flexnet-win-x64.msi,如下图所示: 点击Next。 点击Next。 单击install。 点击finish,完成。 (1)修…

算法导论 第三部分——基本数据结构——第14章:数据结构的扩张

本章通过扩张红黑树构造出两种数据结构:动态顺序统计和区间树。 1、动态顺序统计:查找倒数第i小的数据 复杂度为 lg(n) 为什么是扩张红黑树而不是搜索二叉树或者二叉树? 相对于搜索二叉树,红黑树的平衡性更好,高度在l…

/hgfs下无共享文件夹?/mnt下没有hgfs文件夹?vmhgfs-fuse:找不到命令?

前言:最近在使用linux的过程中,需要在宿主操作系统与客户操作系统间建立共享文件夹,遇到了些许问题,在网上参考了许多文章与各种尝试后,现得以解决,分享如下。1、系统环境:宿主操作系统&#xf…

GraphQL入门有

本文将从GraphQL是什么,为什么要使用GraphQL,使用GraphQL创建简单例子,以及GraphQL实战,四个方面对GraphQL进行阐述。说得不对的地方,希望大家指出斧正。 github项目地址:https://github.com/Charming2015/…

对话庄表伟:开源第一课

庄表伟目前就职于华为的开源管理中心。自2014年开源社成立之初,他便友情参与了开源社的筹办工作。2017年,开源社转型为完全由个人成员组成的组织,庄表伟就以个人身份加入了开源社。作为开源社理事,当被问到“为什么要参选”时&…

【FME实战教程】002:FME完美实现CAD数据转shp案例教程(以三调土地利用现状数据为例)

FME完美实现CAD数据转shp案例教程(以三调土地利用数据为例) 文章目录1. cad数据预览2. 转换过程3. shp数据预览1. cad数据预览 2. 转换过程 (1)打开FME Desktop2020中文软件,点击【新建】。 (2&#xff09…

Linux学习之01_基础命令介绍

初学Linux,还在摸索中,在这个过程中希望能记录下学习到的东西,参考的的书籍为《鸟哥的Linux私房菜》 在这里学到的主要命令有这几个: data cal bc man shutdown sync 1、基础命令操作 data----显示日期与实践的命令 cal----显示日…

穷举算法实例

public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("输入头的个数:");int headsc.nextInt();System.out.println("输入腿的个数:");int footsc.nextInt();for(int i0;i<head;i){//假设兔子的数量为iint jh…

VMware Workstation All Key

官方下载&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 懒人打包&#xff1a;链接:https://pan.baidu.com/s/1kWJRfjL 密码:wzce 注&#xff1a;如果是WinXP或32位系统请用 10.0 版本 VMware 所有版本永久许可证激活密钥&…

【GlobalMapper精品教程】017:KML generator快速将坐标转为KML文件

本文介绍KML generator软件,并快速将坐标转为KML文件的使用方法,并用globalmapper中打开kml文件加以验证。本专栏配套完整的案例数据包,请打开data017.rar获取软件及数据。 文章目录 1. KML文件介绍2. kml generator软件介绍2.1 单点KML制作2.2 Excel数据KML制作2.3 文本文件…

从cpp向qml文件传中文字符串的方法

Qt 使用Unicode编码来存储操作字符串&#xff0c;但很多情况下&#xff0c;我们不得不处理采用其他编码格式的数据&#xff0c;举例来说&#xff0c;中文多采用GBK和Big5编码&#xff0c;而日本则多采用Shift-JIS or ISO2022编码。将其他编码格式的字符串转化成采用Unicode编码…

Codeforces 746 G. New Roads

题目链接&#xff1a;http://codeforces.com/contest/746/problem/G mamaya&#xff0c;不知道YY了一个什么做法就这样过去了啊 2333 首先我显然可以随便构造出一棵树满足他所给出的深度要求。 但是他还对于叶子节点的数目有要求。 考虑首先构造一棵树最大化在满足给出的深度条…

模型验证组件 FluentValidation

FluentValidation 是 .NET 下的模型验证组件&#xff0c;和 ASP.NET MVC 基于Attribute 声明式验证的不同处&#xff0c;其利用表达式语法链式编程&#xff0c;使得验证组件与实体分开。正如 FluentValidation 的 介绍&#xff1a; A small validation library for .NET that u…

第二届中国PWA开发者日

点击蓝字关注我们活动介绍为加速推动渐进式 Web 应用 (PWA) 在中国的发展&#xff0c;微软与英特尔携手举办“第二届中国 PWA 开发者日”。本次活动邀请一众业界大咖围绕 PWA 展开分享&#xff0c;探讨最新技术进展&#xff0c;及 PWA 生态的实践与落地。期待与您线上相聚。活动…

【GlobalMapper精品教程】018:提取影像数据的范围生成矢量图层

文章目录 1. 加载影像数据2. 生成边界3. 导出矢量范围4. 背景影响边界解决办法1. 加载影像数据 以DSM为例,加载如下所示: 2. 生成边界 在影像图层上右键→图层→【边界框/覆盖-创建图层覆盖框/多边形区要素】,如下图所示: 选择【否】。 边界创建完成。 3. 导出矢量范围 …

MPMoviePlayerController属性方法简介

属性说明property (nonatomic, copy) NSURL *contentURL播放媒体URL&#xff0c;这个URL可以是本地路径&#xff0c;也可以是网络路径property (nonatomic, readonly) UIView *view播放器视图&#xff0c;如果要显示视频必须将此视图添加到控制器视图中property (nonatomic, re…

在Leangoo里怎么设置看板周期?

设置看板周期有两种方式&#xff1a; 1&#xff09;点击看板上的看板周期时间直接修改 2&#xff09;通过菜单 设置看板周期 浏览器访问官网链接&#xff1a;www.leangoo.com 转载于:https://www.cnblogs.com/shineshine/p/5663104.html

consul部署多节点和consul-template部署

一.consul的介绍 1.1consul是什么&#xff1f; Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置。 Consul是分布式的、高可用的、可横向扩展的。它具备以下特性 : service discovery:consul通过DNS或者HTTP接口使服务注册和服务发现变的很容易,一些外…

基于ABP实现DDD

什么是DDD呢&#xff1f;领域驱动设计[DDD]是一种针对复杂需求的软件开发方法。将软件实现与不断发展的模型联系起来&#xff0c;专注于核心领域逻辑&#xff0c;而不是基础设施细节。DDD适用于复杂领域和大规模应用&#xff0c;而不是简单的CRUD应用。它有助于建立一个灵活、模…

二、通过工厂方法来配置bean

调用静态工厂方法创建 Bean是将对象创建的过程封装到静态方法中. 当客户端需要对象时, 只需要简单地调用静态方法, 而不同关心创建对象的细节. 要声明通过静态方法创建的 Bean, 需要在 Bean 的 class 属性里指定拥有该工厂的方法的类, 同时在 factory-method 属性里指定工厂方法…