【AngularJs學習筆記二】Yeoman自動構建js項目

時間 2019-11-06

標籤 AngularJs學習筆記二 yeoman 自動構建項目欄目 Google 简体版

原文原文鏈接

#0 系列目錄#javascript

#1 Yeoman介紹# Yeoman是Google的團隊和外部貢獻者團隊合做開發的，他的目標是經過Grunt（一個用於開發任務自動化的命令行工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝爲開發者建立一個易用的工做流。css

Yeoman主要有三部分組成：yo（腳手架工具）、grunt（構建工具）、bower（包管理器）。這三個工具是分別獨立開發的，可是須要配合使用，來實現咱們高效的工做流模式。html

#2 Yeoman工具包yo命令# yo插件都是經過npm, Node.js包管理器安裝和管理的.前端

全局安裝yohtml5

~ D:\workspace\javascript>npm install -g yo

若是你尚未安裝grunt,bower，也須要一塊兒安裝java

~ D:\workspace\javascript>npm install -g grunt-cli bower

經過help查看幫助

~ D:\workspace\javascript>yo --help
Yeoman is a mask worn by the following members of the open-source community:

  Paul Irish, Addy Osmani, Mickael Daniel, Sindre Sorhus, Eric Bidelman,
  Frederick Ros, Brian Ford, Pascal Hartig, Stephen Sawchuk, and countless
  other contributors.

Usage: yo GENERATOR [args] [options]

General options:
  -h, --help     # Print generator's options and usage
  -f, --force    # Overwrite files that already exist

Please choose a generator below.
Angular
  angular:app
  angular:common
  angular:constant
  angular:controller
  angular:decorator
  angular:directive
  angular:factory
  angular:filter
  angular:main
  angular:provider
  angular:route
  angular:service
  angular:value
  angular:view

Karma
  karma:app

Mocha
  mocha:app
  mocha:generator

Webapp
  webapp:app

yo的命令很簡單：yo GENERATOR，例如：yo webapp， yo angular。node

Please choose a generator below: 下面列出了個人系統中，已經安裝的generator的庫，例如：Angular，Karma，Mocha，Webapp。jquery

查詢yo的支持庫

~ D:\workspace\javascript>yo
Yeoman is a mask worn by the following members of the open-source community:

  Paul Irish, Addy Osmani, Mickael Daniel, Sindre Sorhus, Eric Bidelman,
  Frederick Ros, Brian Ford, Pascal Hartig, Stephen Sawchuk, and countless
  other contributors.

[?] What would you like to do? (Use arrow keys)
 > Install a generator
   Find some help
   Get me out of here!

命令行會提示，咱們想要的操做。這裏選擇」Install a generator」git

[?] What would you like to do? Install a generator
[?] Search NPM for generators:web

系統繼續提示，咱們要查找的包，咱們輸入webgithub

安裝generator-webapp庫

[?] Here's what I found. Install one? (Use arrow keys)
 > generator-armadillo
   generator-bones
   generator-btapp
   generator-fe
   generator-flight
   generator-hazdev-webapp
   generator-hbswebapp
   generator-html5-site
   generator-jing
   generator-lessapp
   generator-nodestrap
   generator-sails
   generator-server-configs
   generator-starter
   generator-starttter
   generator-ultimate
   generator-webapp
   generator-webapp-bfytw
   generator-webapp-fintan
   generator-weblog
   generator-website
   Search again
   Return home

yo列出了，全部在官方已經註冊的，web關鍵字相關的包，咱們選擇「generator-webapp」，yo經過npm開始下載generator-webapp安裝包

[?] What would you like to do? Install a generator
[?] Search NPM for generators: web
[?] Here's what I found. Install one? generator-webapp

generator-webapp@0.2.7 D:\toolkit\nodejs\node_modules\generator-webapp
├── cheerio@0.12.1 (entities@0.3.0, underscore@1.4.4, htmlparser2@3.1.4, cheerio-select@0.0.3)
└── yeoman-generator@0.12.3 (dargs@0.1.0, diff@1.0.5, debug@0.7.2, async@0.2.9, mime@1.2.11, mkdirp@0.3.5, isbinaryfi
le@0.1.9, underscore.string@2.3.3, shelljs@0.1.4, iconv-lite@0.2.11, lodash@1.3.1, rimraf@2.1.4, nopt@2.1.2, cli-table@0
.2.0, tar@0.1.18, glob@3.2.6, inquirer@0.2.4, request@2.21.0)

I just installed your generator by running:
    npm install -g generator-webapp

而後，咱們退出yo命令行，選擇「Get me out of here!」

[?] What would you like to do? Get me out of here!

Bye from us! Chat soon.
            Addy Osmani
          Sindre Sorhus
        Brian Ford
     Eric Bidelman
              Paul Irish
     Mickael Daniel
          Pasca1 Hartig
      Stephen S.wchuk
    Frederick R0s

注：上面的過程，也能夠直接用命令

npm install -g generator-webapp

#3 快速構建一個web項目# 當咱們安裝了generator-webapp後，咱們就能夠，以很是優雅的方式來構建工程了。

建立nodejs-yo目錄，並構建webapp工程

~ D:\workspace\javascript>mkdir nodejs-yo
~ D:\workspace\javascript>cd nodejs-yo
~ D:\workspace\javascript\nodejs-yo>yo webapp

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] What more would you like?
  [ ] Twitter Bootstrap for Sass
 >[X] RequireJS
  [X] Autoprefixer for your CSS

對選項的解釋：

Twitter Bootstrap for Sass：SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

RequireJS 能夠幫助用戶異步按需的加載 JavaScript 代碼，並解決 JavaScript 模塊間的依賴關係，提高了前端代碼的總體質量和性能。

Autoprefixer解析CSS文件而且添加瀏覽器前綴到CSS規則裏，使用Can I Use的數據來決定哪些前綴是須要的。

上面3個選擇，因爲Sass是基於Ruby的，我本機沒有安裝ruby，取消Twitter Bootstrap for Sass的勾選。

查看安裝日誌：

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] What more would you like? RequireJS, Autoprefixer for your CSS
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create app/favicon.ico
   create app/404.html
   create app/robots.txt
   create app/.htaccess
   create app/styles/main.css
   create app/scripts/app.js
   create app/scripts/main.js
   create app/index.html
   create app/scripts/hello.coffee
   invoke   mocha:app
   create     test\index.html
   create     test\lib\chai.js
   create     test\lib\expect.js
   create     test\lib\mocha\mocha.css
   create     test\lib\mocha\mocha.js
   create     test\spec\test.js

I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.

項目骨架已經建好了。還包括了不少的配置文件.gitignore,bower.json,Gruntfile.js,favicon.ico, robots.txt, .htaccess。太神奇了，Cool!!

一會兒裝備都齊全了，打仗的事就交給咱們本身吧。

#4 Yeoman工具包bower,grunt的組合用法#

使用bower命令查看項目依賴：

~ D:\workspace\javascript\nodejs-yo>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-yo#0.0.0 D:\workspace\javascript\nodejs-yo
├── jquery#1.9.1 (latest is 2.0.3)
├── modernizr#2.6.2
└── requirejs#2.1.8

咱們發現生成的webapp中，有4個依賴庫，jquery,modernizr,requirejs。

使用grunt命令執行單元測試

D:\workspace\javascript\nodejs-yo>grunt test
Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:test" (concurrent) task

Running "copy:styles" (copy) task

Running "coffee:dist" (coffee) task

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.

Running "connect:test" (connect) task
Starting connect web server on localhost:9000.

Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html

  .

  1 test complete (107 ms)

>> 1 passed! (0.11s)

Done, without errors.

使用grunt命令啓動一個node服務器

~ D:\workspace\javascript\nodejs-yo>grunt server
Running "server" task

Running "clean:server" (clean) task

Running "concurrent:server" (concurrent) task
    Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://g
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue. Use --force to continue.

    Aborted due to warnings.

啓動時，咱們發現報錯了。因爲我沒有裝Ruby的環境，因此compass:dist的命令不能運行。強制啓動grunt：

~ D:\workspace\javascript\nodejs-yo>grunt server --force
D:\workspace\javascript\nodejs-yo>grunt server --force
Running "server" task

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:server" (concurrent) task

Running "coffee:dist" (coffee) task
    Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue. Used --force, continuing.

Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue.

Running "copy:styles" (copy) task

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Waiting...

後臺日誌顯示了「watch」的task，說明代碼文件被監控着，若有修改網頁會自動更新。瀏覽器被自動打開，http://localhost:9000/

修改app/index.html代碼，增長對canvas的檢查

~ vi app/index.html

<script>
    window.onload = function () {
        if (canvasSupported()) {
            alert('canvas supported');
        }
    };

    function canvasSupported() {
        var canvas = document.createElement('canvas');
        return (canvas.getContext && canvas.getContext('2d'));
    }
</script>

瀏覽器顯示：

經過bower增長庫jquery-pjax

~ D:\workspace\javascript\nodejs-yo>bower install jquery-pjax
bower jquery-pjax#*         not-cached git://github.com/defunkt/jquery-pjax.git#*
bower jquery-pjax#*            resolve git://github.com/defunkt/jquery-pjax.git#*
bower jquery-pjax#*           download https://github.com/defunkt/jquery-pjax/archive/v1.7.3.tar.gz
bower jquery-pjax#*            extract archive.tar.gz
bower jquery-pjax#*           resolved git://github.com/defunkt/jquery-pjax.git#1.7.3
bower jquery#>=1.8              cached git://github.com/components/jquery.git#2.0.3
bower jquery#>=1.8            validate 2.0.3 against git://github.com/components/jquery.git#>=1.8
bower jquery-pjax#~1.7.3       install jquery-pjax#1.7.3

jquery-pjax#1.7.3 app\bower_components\jquery-pjax
└── jquery#2.0.3

~ D:\workspace\javascript\nodejs-yo>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-yo#0.0.0 D:\workspace\javascript\nodejs-yo
├── jquery#1.9.1 (latest is 2.0.3)
├─┬ jquery-pjax#1.7.3 extraneous
│ └── jquery#1.9.1 (2.0.3 available)
├── modernizr#2.6.2
└── requirejs#2.1.8

Yeoman已經成功地幫助咱們打造出一個項目的原型了，接下來咱們能夠針對本身的項目，本身熟悉的框架組合，構建一個屬於本身的骨架模板，併發布到Yeoman的generator庫中。