yeoman前端腳手架整合

工做到月底，整整滿一年了 ，公司項目全都是傳統企業網站，天天重複性的切頁面，根本跟應用掛不上鉤，發現這麼幹下去對於職業前途不太好。本小白開自學前端，修正不足。大神歡迎指導，誤拍。

 

1.面對複雜的前端應用。如何可以遊刃有餘，這是做爲新時代的有爲青年的一個巨大挑戰？

學習自動化工具和正規的流程這事，做爲有爲青年必須提上日程來了。

目光狹隘的我今天才發現yeoman框架：

一個流行的工具集，集合了grunt,bower,yo等工具，建立高質量可維護的應用。

在開發初期要對技術選型，在大多數web應用中，都須要第三方庫的支持。有些應用會使用jq,boostrap,有的還會用到angular,甚至有些都要引用，在咱們肯定了技術選型之後，咱們經過yeoman的生成器插件,生成器插件"generator-XXX庫",全部的generator-生成器都採用npm包來安裝庫，安裝完成後，經過「yo XX」庫命令生成應用的腳手架。

 

下面介紹其餘三個主要集合工具

yo工具：

讓初始化文件目錄變簡單，仍是那話做爲新時代的有爲青年，咱們要擺脫早期前端的刀耕火種，讓自動化的小機器人舞起來。經過ye webapp命令構建基礎web應用目錄。 基礎應用包含了:HTML5 Boilerplate、jQuery、Modernizr 和 Twitter Bootstrap 等。在基礎應用不能知足咱們的基本需求時，咱們在經過yeoman的"gennerator-xxx庫，而後yo xxx加入骨架。

 

bower工具：

在Web應用中，咱們可能會引入不少第三方的庫，傳統的作法是從這些網站上下載這些庫，而後放到項目目錄下的某個文件夾下去，以後在html中引用進去。這個作法無形中加大了有爲青年們的工做量。尤爲是在不一樣js庫中，咱們要保證依賴庫之間的版本兼容問題。採用bower search XX庫，搜索xx庫，只有xx庫在bower中註冊事後，咱們纔可以使用。當下載事後的bower庫保存在bower_componentes文件夾中。經過「bower update」命令來進行更新。當不須要一個庫時，經過「bower uninstall」命令來刪除。使用「bower list」命令能夠列出來當前應用中已經安裝的庫的信息。

注意：擺脫刀耕火種，找到bower.json文件，相似於package.json包依賴管理文件

{
  "name": "yeoman-sample",
  "version": "0.1.0",
  "dependencies": {  //生產環境
    "sass-bootstrap": "~3.0.0",
    "requirejs": "~2.1.8",
    "modernizr": "~2.6.2",
    "jquery": "~1.10.2"
  },
  "devDependencies": {} //開發環境
}

http://www.t2th.cn/news/show-388.html

http://blog.bingo929.com/yeoman-grunt-bower-polymer-web-components-javascript-create-web-app.html

http://www.ibm.com/developerworks/cn/web/1402_chengfu_yeoman/