前端自動化構建工具-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 了。具體要看配置。