gulp初體驗

標籤：

項目流程

安裝nodejs -> 全域安裝gulp -> 項目安裝gulp以及gulp外掛程式 -> 配置gulpfile.js -> 運行任務

常用命令簡介：

node -v 查看node版本
npm -v 查看npm版本
cd 定位到目錄，用法：cd + 路徑 ；
dir 列出檔案清單；
cls 清空命令提示字元視窗內容

安裝包
npm install <name> [-g] [--save-dev]
-g：全域安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，並且寫入系統內容變數；  非全域安裝：將會安裝在當前定位目錄；  全域安裝可以通過命令列在任何地方調用它，本地安裝將安裝在定位目錄的node_modules檔案夾下，通過require()調用；
--save：將儲存配置資訊至package.json（package.json是nodejs項目設定檔）；
-dev：儲存至package.json的devDependencies節點，不指定-dev將儲存至dependencies節點；
為什麼要儲存至package.json？因為node外掛程式包相對來說非常龐大，所以不加入版本管理，將配置資訊寫入package.json並將其加入版本管理，其他開發人員對應下載即可（命令提示字元執行npm install，則會根據package.json下載所有需要的包）。

安裝指定版本包
npm install -g [email protected]

更新外掛程式
npm update <name> [-g] [--save-dev]

刪除外掛程式
npm uninstall <name> [-g] [--save-dev]

產生package.json
npm init

安裝本地外掛程式
npm install [name] --save-dev

 

以下為測試“gulp-livereload”瀏覽器自動重新整理代碼：

Google瀏覽器或Firefox安裝livereload外掛程式(必須此外掛程式方能生效)
安裝方法：Google瀏覽器安裝crx外掛程式方法、Firefox瀏覽器直接將xpi檔案拖進瀏覽器即可安裝。點擊下載（Google為.crx檔案，Firefox為.xpi檔案）

註：安裝方法在chrome測試通過，firefox安裝時提示未通過驗證，不支援IE。

package.json

 1 { 2   "name": "myapp", 3   "version": "1.0.0", 4   "description": "", 5   "main": "index.js", 6   "scripts": { 7     "test": "echo \"Error: no test specified\" && exit 1" 8   }, 9   "author": "",10   "license": "ISC",11   "devDependencies": {12     "gulp": "^3.9.1",13     "gulp-livereload": "^3.8.1"14   }15 }

gulpfile.js

 1 // 監聽all變化 2 var gulp = require(‘gulp‘), //本地安裝gulp所用到的地方 3     livereload = require(‘gulp-livereload‘); 4 gulp.task(‘All‘, function() { 5     gulp.src(‘src/**‘) 6         .pipe(livereload()); 7 }); 8 gulp.task(‘watchAll‘, function() { 9     livereload.listen();10     gulp.watch(‘src/**‘, [‘All‘]);11 });12 //gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回呼函數13 //gulp.src(globs[, options]) 執行任務處理的檔案  globs：處理的檔案路徑(字串或者字串數組) 14 //gulp.dest(path[, options]) 處理完後檔案產生路徑

cd到目前的目錄，執行命令“gunp watchAll”。

運行項目http://localhost/....，注意，必須使用http[s]協議，file協議不生效。

當修改src目錄裡面檔案時，瀏覽器會自動重新整理。

gulp初體驗