使用gulp、yeoman、bower建站

前端建站工具

標籤 : 工具
***

腳手架：yeoman

1. 用途
   • 快速搭建新項目
   • 爲項目增長新部分
   • 建立模塊或者包
   • 引導新服務
   • ...
2. 開始

   • 安裝yo和generator

     npm i -g yo
       npm i -g generator-webapp

   • 運行安裝

     yo webapp

   • 查看已安裝generator

     yo -- generators

詳細使用查看網址：yeoman.io

bower

1. 用途
   • 管理前端渲染文件
2. 使用
   • npm i -g bower
   • bower init
   • bower i [--save|--dev-save]

3. 配置.bowerrc

   {
        "directory": "app/components/",
        "timeout": 120000,
        "registry": {
        "search": [
        "http://localhost:8000",
        "https://bower.herokuapp.com"
            ]
        }
    }

詳細使用查看網址：bower.io

gulp

1. 特色
   • 易於使用
     經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。
   • 構建快速
     利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。
   • 插件高質
     Gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。
   • 易於學習
     經過最少的 API，掌握 Gulp絕不費力，構建工做盡在掌握：如同一系列流管道。

2. 安裝

   npm i -g global

3. 基本使用
   + 建立gulpfile.js文件

   var gulp = require('gulp');
   
      gulp.task('default', function() {
      // 將你的默認的任務代碼放在這
      });
   + 運行gulp
   
      gulp

4. 經常使用API
   • gulp.src(globs[, options])
     輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。 將返回一個 Vinyl files 的 stream 它能夠被 piped 到別的插件中。
   • gulp.dest(path[, options])
     能被 pipe 進來，而且將會寫文件。而且從新輸出（emits）全部數據，所以你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立它。
   • gulp.task(name[, deps], fn)
     定義一個使用 Orchestrator 實現的任務（task）。
   • gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
     監視文件，而且能夠在文件發生改動時候作一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。
5. CLI的使用
   1. -v 或 --version 會顯示全局和項目本地所安裝的 gulp 版本號
   2. --require 將會在執行以前 reqiure 一個模塊。這對於一些語言編譯器或者須要其餘應用的狀況來講來講頗有用。你可使用多個--require
   3. --gulpfile 手動指定一個 gulpfile 的路徑，這在你有不少個 gulpfile 的時候頗有用。這也會將 CWD 設置到該 gulpfile 所在目錄
   4. --cwd 手動指定 CWD。定義 gulpfile 查找的位置，此外，全部的相應的依賴（require）會從這裏開始計算相對路徑
   5. -T 或 --tasks 會顯示所指定 gulpfile 的 task 依賴樹
   6. --tasks-simple 會以純文本的方式顯示所載入的 gulpfile 中的 task 列表
   7. --color 強制 gulp 和 gulp 插件顯示顏色，即使沒有顏色支持
   8. --no-color 強制不顯示顏色，即使檢測到有顏色支持
   9. --silent 禁止全部的 gulp 日誌
      詳細使用查看網址：gulp.io