前端自动化构建工具-yoman浅谈

时间 2019-11-08

原文原文链接

现在随着前端技术的飞速发展，前端项目也变得愈来愈复杂。
快速的搭建一个集成多种工具和框架的复杂前端项目也愈来愈成为一种需求。
固然若是你要本身从0开始彻底本身diy，绝对能够，只不过须要耗费一些很多的时间。
既然如此要是有自动化的项目构建工具，帮你生成各类必须的配置项，你只需愉快的写代码该多方便呀。
嗯，是的这样的工具或者说脚手架确实是有的，就是下面要提到的eoman。来吧，一块儿看一下如何使用这个工具让你的项目秒建吧。javascript

初识yeoman

yeoman是什么

yeoman是Google领头开发的一个前端构建工具，它的目的是为了给新项目创建一个完整的工做流，让开发人员能够专一于解决问题而不是担忧那些没必要要的小事情。前端

yeoman的构成

首先yeoman由三部分构成:脚手架工具yo、构建工具gulp/grunt、包管理工具npm／bower。在yeoman的基础上还须要配置对应的项目生成器(generators)才能愉快的生成一个项目。
形象来讲，yeoman及三部分组成是印钞机，但具体要印出来是什么样是美刀仍是日元，仍是要本身输入指令的吧，这些指令之类的配置信息就是生成器。下面分别来讲一下工具和generatorjava

yo
yo是生成项目的脚手架，作了如下工做：
生成项目相关文件
生成编译配置文件(例如gulpfile)
引入相关的编译任务和包管理器等一系列build相关的东西
一句话总结：负责根据generator的配置信息生成相关你文件，而且把相关的相关的build任务和用到的包管理器加入项目里。
gulp
上文提到build工具主要是gulp和grunt，这里就以gulp为例来介绍。做为构建工具，主要是用来执行一些自动化的任务，例如copy图片，编译less等。关于gulp的详细介绍请转向gulp中文网查看详细的介绍。这里简单提一下gulp的安装步骤以及如何使用。
- 安装gulp
  这里就不得不提早面说到的npm了，直接npm全局安装便可:
```
sudo npm install gulp -gnode
```
  gulp -v 
```
```
- 使用gulp
  须要在项目根目录下建立一个名为 gulpfile.js 的文件，内容类下：react
  
```
var gulp = require('gulp');jquery
```
  gulp.task('default',function(){ //默认的任务 })
```
```webpack
  
  而后运行gulp便可：nginx
  gulp
  默认的名为 default 的任务（task）将会被运行，固然这个任务并未作任何事情。
npm 这里就再也不多说了，前面提到过的，前端开发必备。git

generator
generator能够叫构造器，简单来讲就是可使用yo的命令来生成完整项目的基础插件。yeoman官方提供了一些基础的构造器供咱们选择，若是不知足需求能够本身开发构造器。
这里介绍一下咱们团队的构造器项目generator-future-static至于如何开发构造器，你们能够下来本身研究一下这里就不在详细介绍。
关于generator-future-static
为了知足当前对react、react、webpack配置的须要，generator-future-static提供了四种项目模板，下面在详细介绍。不管是否是咱们公司内部人员均可以借助它愉快的进行搭建项目。
#### 安装并使用yeoman构建项目
下面将一步步介绍一下如何使用从0开始使用yeoman搭建一个项目：
安装yo和generator-future-static
仍是经过咱们的npm来安装，ps：generator-future-static做为一个插件固然也是要单独安装的es6
```
sudo npm install yo -g sudo npm install generator-future-static -g 
```
这里须要加上sudo，毕竟是全局安装，避免出现权限问题。
新建工程目录
新建本身的工程目录，能够在git或者本身公司内部的仓库新建一个空项目，拉到本地就好了。或者就是一个本地新建的文件夹也是能够的。这样就是给脚手架
一个安装路径。
生成工程目录
目录已经建好，下面就是让工具去忙活了，上面提到过你能够不担忧它随便乱建的保证在于generator里已经配置了指令。
在执行指令以前仍是先说一句，前面也提到过，由于npm服务器是境外的，因此npm安装以来会慢的飞起，针对这种状况有两种解决方法:
1. 更改npm的源地址，建议指向cnpm。方式以下：
```
//指向cnpm
```
npm config set registry="http://r.cnpmjs.org"
```
```
1. 后面会提到，等到安装的步骤时。手动使用cnpm或者其余镜像来安装。
  而后只需执行下面的命令:
```
yo future-static
```
选择对应的项目模板
为了知足多种需求咱们的构造器里面包含了四种不一样的项目类型，足以知足react+redux,jquery,开发组件，typescript等需求。固然既然种类多，就需
要你选择了，我这里就不上图了，从上到下依次对应的项目种类以下:
1. react＋redux+es6项目适用
2. es6+jquery项目适用
3. 开发组件适用(jq,react都可)
4. typescript 适用
ps：舒适提示，若是提示自动更新失败，而后报错的话，请手动更新一下generator-future-static,这个更新失败的锅请扔给yo及npm。
```
sudo npm install generator-future-static -g
```
另：公司外的同窗若是要使用的话，请直接把cortex相关内容忽略掉或者删除
选择项目信息
当你选择某种模板以后，就是愉快的生成过程了。会进行一下npm的init，提示你输入相关信息，若是你感受不用更改就一路enter下去吧，若是要修改直接输入便可。
而后你会看到一系列的create和install命令，过程稍微有点慢，由于是用的npm来install，等不了的同窗control+c关掉，而后用cnpm来install依赖便可以下:
```
cnpm install
```
预览示例
安装完成以后，能够看到实例的：
1. 若是你是安安静静等它本身装完的小伙伴，什么也不用作就会看到浏览器上locahost:8081端口的demo页面
2. 若是你本身用cnpm来instal的，仍是要本身来输入一下的:
  npm run demo
  对于npm的指令，若是不对的话，请去项目根目录下查看package.json中scripts的对象，看里面都定义了什么就run什么：
```
"scripts": {
```
  "build": "node_modules/.bin/gulp && node_modules/.bin/gulp min", "test": "karma start", "dev": "node_modules/.bin/gulp demo", "doc": "smartDoc ||node_modules/.bin/smartDoc" }
```
```例如这里就应该是 npm run dev 了。具体要看配置。