前端工程化系列[05] Yeoman脚手架使用入门
Yeoman
是一款流行的前端的脚手架工具。
脚手架工具可以用来快速的自动生成项目的必要文件和基础文件结构。Yeoman使用的内建命令为yo,同时它自己也是一个包管理工具和自动化任务工具,它基于特定的模板来初始化项目。
考虑这样的开发场景:现在我们需要开始一个全新的前端项目,通常需要先处理项目的文件结构,创建包括img、JavaScript、CSS 等静态资源的文件夹,如果团队开发,可能还需要添加 .gitignore忽略文件以及.editorconfig
、.eslintrc
、package.json
、Gruntfile.js
以及README.md等配置文件。
如果你进行的多个前端项目,它们的技术选型差不多(比如都是:jQuery + grunt + Vue + Bootstrap),你会发现这些项目的整体文件结构是相同的。我们在初始化项目的时候,当然可以从0开始搭建,也可以直接把旧项目的结构和相关文件拷贝过来,这其实都是些重复性没有技术含量的工作,而Yeoman 的作用就是减少这些重复性的工作,通过调用 Yeoman 生态圈中的现成的生成器(generator
)即可自动生成项目初始化所需要的文件结构、配置文件等。所以简单来说,Yeoman 是一个用于初始化项目的模版工具,用完就可以扔在一边了
。
关于Yeoman的更多信息可以参考Yeoman官网和Github托管仓库。
Yeoman的安装和使用
用于初始化项目的模板被称为生成器(generator
), 在开源社区中已经有众多现成的generator可以供我们使用(可以在生成器列表页使用关键字搜索)。在开始项目的时候,我们可以先搜寻是否有匹配当前项目技术栈的生成器,如果有的话直接用就好了,如果找不到合适的generator,那么可以考虑自己来写一个Yeoman生成器,甚至通过很简单的方式我们就可以把自己写的生成器发布出来造福社区。
环境准备
安装yeoman之前,你需要先安装以下环境
- Node.js 6或更高版本
- npm 3或更高版本(通常安装Node的时候默认安装)
- Git版本控制工具
点击NodeJS官网选择对应系统和版本根据提示完成NodeJS的安装,我们可以通过在终端输入下面的命令来检查Node和npm的安装是否成功。
$ node --version && npm --version
有些 Node 版本可能安装的是旧版本的 npm,你可以通过以下命令来更新npm
$ npm install -g npm@latest
Git的安装过程请自行百度(OSX 默认安装),您可以通过以下命名来检查Git
$ git --version
安装Yeoman
通过下面的命令来安装Yeoman并检查是否安装成功,当前最新版本为2.0.1
,-g
表示全局安装。
$ npm install -g yo
$ yo --version
generator-typeScript初始化项目示例
接下来我们将选择一个生成器(这里以typescript为例
)来演示初始化项目的操作,Yeoman将会根据对应的生成器替我们创建好package.json和bower.json等文件,然后自动安装依赖。
① 新建 mytodo 文件夹,生成器生成的脚手架文件会放在这个文件夹中。
$ mkdir mytodo && cd mytodo
② 根据项目技术栈需求到官网列表搜索合适的生成器。
③ 通过npm来安装指定的generator。
$ npm install -g generator-typescript
④ typescript生成器安装完成后,使用yo命令来开始。
$ yo typescript
下面给出终端处理的具体细节:
wendingding:Blog wendingding$ mkdir mytodo && cd mytodo
wendingding:mytodo wendingding$ npm install -g generator-typescript
npm WARN deprecated npmconf@2.1.: this package has been reintegrated into npm and is now out of date with respect to npm > spawn-sync@1.0. postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/spawn-sync
> node postinstall > yo@1.8. postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/yo
> yodoctor Yeoman Doctor
Running sanity checks on your system ✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version Everything looks all right!
+ generator-typescript@0.3.
added packages in .302s
wendingding:mytodo wendingding$ yo typescript _-----_
| | ╭──────────────────────────╮
|--(o)--| │ Let's make some awesome │
`---------´ │ typescript project! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y ` I will include JSHint and Editorconfig by default.
? First off, how would you like to name this project? wendingdingDemo
? Where should it be compiled to? app/build
? Where should your typescript go? app/src
create package.json
create app/src/index.ts
create app/src/app.ts
create tslint.json
create gulpfile.js
create test/test-greeting.js
create test/test-load.js
create README.md
create .editorconfig
create .jshintrc I'm all done. Running npm install && bower install for you to install the required dependencies. If this fails, try running the command yourself.
按上面的步骤在终端中执行对应命令,我们就可以得到一个基于基于typescript模板生成的初始化项目了,下面列出该项目的目录结构:
wendingding:mytodo wendingding$ tree
.
├── README.md
├── app
│ ├── build
│ └── src
│ ├── app.ts
│ └── index.ts
├── gulpfile.js
├── package.json
├── test
│ ├── test-greeting.js
│ └── test-load.js
└── tslint.json directories, files
最后,根据Yeoman终端中的提示通过$ npm install && bower install
命令来安装必要的依赖即可。
前端工程化系列[05] Yeoman脚手架使用入门的更多相关文章
- 前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- 前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...
- 前端工程化系列[02]-Grunt构建工具的基本使用
本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...
- kubernetes系列05—kubectl应用快速入门
本文收录在容器技术学习系列文章总目录 1.使用kubectl 1.1 介绍 kubectl用于运行Kubernetes集群命令的管理工具. 1.2 语法 kubectl [command] [TYPE ...
- 前端工程化系列[01]-Bower包管理工具的使用
本文主要介绍前端开发中常用的包管理工具Bower,具体包括Bower的基本情况.安装.使用和常见命令等内容,最后还介绍了依赖树管理的常见方式以及Bower采用的策略并进行了比较. 1.1 关于Bowe ...
- 开发属于自己的yeoman脚手架(generator-reactpackage)
自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...
- 前端项目构建之yeoman
各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发 ...
随机推荐
- mySql中SUBSTRING_INDEX函数用法
SUBSTRING_INDEX(str,delim,count) 返回字符串 str 中在第 count 个出现的分隔符 delim 之前的子串.如果 count 是一个正数,返回从最后的(从左边开始 ...
- plink命令
用plink远程登陆link主机执行脚本,但是无法执行sudo命令 完成后自己关闭 plink -l root 192.168.1.21 df -h plink.exe -ssh -p ...
- liunx系统虚拟机下安装tomcat9以及访问tomcat案例
在liunx系统虚拟机下安装tomcat9 首先下载好压缩包 liunx系统环境的安装包 将其解压到虚拟机自己创建的目录下 解压命令 tar -zxvf 文件名 解压好如图所示 然后修改配置文 ...
- 数据处理:2.异常值处理 & 数据归一化 & 数据连续属性离散化
1.异常值分析 异常值是指样本中的个别值,其数值明显偏离其余的观测值.异常值也称离群点,异常值的分析也称为离群点的分析. 异常值分析 → 3σ原则 / 箱型图分析异常值处理方法 → 删除 / 修正填补 ...
- 052 kafka对topic的增删改查操作
一:create 1.开始使用命令 2.创建 bin/kafka-topics.sh --create --topic beifeng --zookeeper linux-hadoop01.ibeif ...
- Http和RPC区别
本文转自:https://blog.csdn.net/mou_it/article/details/79873612 RPC(即Remote Procedure Call,远程过程调用)和HTTP(H ...
- 20165235 祁瑛 2018-4 《Java程序设计》第七周学习总结
20165235 祁瑛 2018-4 <Java程序设计>第七周学习总结 教材学习内容总结 MySQL数据管理系统 MySQL数据管理系统,简称MySQL,是世界上流行的数据管理系统. M ...
- day12 函数的使用方法:初识迭代器和生成器
生成器和迭代器比装饰器简单多了... 这是老师的博客地址: http://www.cnblogs.com/Eva-J/articles/7213953.html 前情回顾: #装饰器: # 在不修改一 ...
- 安卓编程资源文件string中对占位符的使用详解
这里将为你详细介绍占位符的使用,将其学以致用,可以达到简化布局文件,减少字符串资源量. 1.在资源文件中的使用. 打开资源文件中的strings.xml文件,进行编辑.如下图所示: 图 1.0 2. ...
- android studio打可执行jar包
android studio可以通过library工程打出jar包 解压会看到META-INF/MANIFEST.MF文件的打开如下: Manifest-Version: 1.0 增加一行,注意冒号后 ...