前端工程化之路（一）基於Yeoman：Yo+grunt/gulp+bower 搭建前端工程

轉載請加說明：http://my.oschina.net/panpcui/blog/671921 ，謝謝

引言      

      現今，愈來愈多的前端集成開發工具涌現，我的以爲特別有必要讓前端開發更規範、更系統、更高效。規範：讓前端開發的編碼規範統一，系統：讓從構建、開發、集成到測試等這個開發流程更加完善，高效：讓前端開發團隊效率顯著提高。

本文是基於Yeoman：Yo+grunt/gulp+bower 搭建前端工程(NodeJS環境下)：

(1)簡單瞭解Yeoman：Yo+grunt/gulp+bower

Yeoman

官網：http://yeoman.io  github：https://github.com/yeoman/yeoman

Yeoman 是Google的團隊和外部貢獻者團隊合做開發的，主要由Yo+grunt/gulp+bower三個工具協同開發，Yo（腳手架，自動化工具），grunt/gulp（構建工具，壓縮js/css/圖片等，等你挖掘），bower（包管理工具，你們熟悉的dependencise）

License：BSD License

gulp/grunt

grunt官網：http://www.gruntjs.net  github：https://github.com/gruntjs/grunt

gulp官網：http://www.gulpjs.com.cn   github：https://github.com/gulpjs/gulp

gulp 是基於stream（Unix流的概念）工做的，相比於grunt更加快速，而且安裝簡潔，API更精煉，github上不少項目已經從grunt遷移到grunt上了。

License ：gulp —— MIT License  grunt—— MIT License

bower

bower官網：http://bower.io  github：https://github.com/bower/bower

包管理工具，管理項目dependense依賴，類JAVA後端的Maven。

License：MIT License

(2)搭建一個簡單項目搭建流程

Step1 Install Yeoman

npm install -g yo grunt-cli bower

    靜等安裝完成

Step2 Install generator

npm install -g generator-webapp

    (generator-*是Yeoman提供的快速開發框架，好比generator-webapp，generator-angular，generator-react-fullstack等，generator庫：http://yeoman.io/generators/)

    靜等安裝完成

Step3 new project

mkdir demo

cd demo

yo webapp demo

    (demo是生成項目的名稱，即package.json中的name)

    提示選擇使用的庫：sass：css框架，Bootstrap很少說，Modernizr：檢查瀏覽器CSS三、HTML5

    能力的JavaScript庫

    

    bower會一一下載須要的庫及其依賴，靜等下載完成

    最終項目目錄以下圖：

    

Step4 Run server

gulp serve

    此時網頁會自動在瀏覽器中打開，表示搭建完成。以下圖：

    

OR：使用generator-angular + grunt來建立工程，即替換Step2&Step3，執行以下：

npm install generator-angular

yo angular angular-demo

    

    提示以下選擇項，angular選項全選，加入sass和bootstrap，由於我選擇使用的grunt，生成的項目會有Gruntfile.js，因此step4 需執行 

grunt serve

    來運行項目

    生成項目目錄文件

        

    運行時，瀏覽器中會自動打開以下圖：

    

(3)遇到問題

（1）Error: EACCES: permission denied

    須要root權限，命令前面加上 sudo

（2）最新版generator-webapp建立的項目中沒有Gruntfile.js和Gulpfile.js

    項目中生成的是Gulpfile.babel.js，這裏是由於在0.6.2之後去掉了gruntfile.js文件，如今採用的是gulp+ES6，Babel是一個語法解析轉換工具，能夠將ES6代碼轉爲ES5代碼。因此運行gulp serve便可

（3）Fatal error：Unable to find local grunt

    

    由於grunt須要本地安裝即項目目錄中的node_moudles

npm install grunt --save-dev

    install後加-g即全局安裝，不加即本地安裝。

（4） grunt serve 時報錯：「not found moudle 「***」 」，即未安裝相應的模塊

    安裝相應的moudle，可執行命令

npm install

    或者 命令直接安裝相應的moudle

npm install --save-dev ***

（5）not found ：compass

    

   須要手動安裝compass，由於因爲sass依賴於ruby環境，因此先安裝ruby，再安裝compass

    ruby 安裝：http://www.runoob.com/ruby/ruby-installation-unix.html

gem install compass

（6）安裝compass遇到問題：

ERROR:  While executing gem ... (Gem::Exception)
    Unable to require openssl, install OpenSSL and rebuild ruby (preferred) or use non-HTTPS sources

    我採用的方法(網上有其餘方法，你們能夠試試，我試了沒用)：

gem source -a http://rubygems.org/

感謝你們閱讀，轉載需加上說明，謝謝。