gulp前端自動化構建工具

gulp前端自動化構建工具入門：http://www.jianshu.com/p/d003e12e2f55

gulp是基於node.js的一個構建工具（自動任務運行器），開發者可使用它自動化工做流程。
一些常見的、重複的任務，例如：網頁自動刷新、css預處理、代碼檢測、壓縮圖片、等，只須要簡單的命令就能所有完成。使用它能夠簡化工做，提升開發效率。

gulp優勢：

簡潔：gulp側重「代碼優於配置」，最直觀的感覺，更爲簡單和清晰，不須要grunt同樣寫一堆龐大的配置文件。
高效：gulp基於node streams（流）來構建任務，避免磁盤反覆讀取/寫入。每一個任務都是單獨執行，這使得它速度更快、更爲純粹。
易學：gulp核心API只有4個，簡潔的API易於上手，學習過程平滑。

4個API：

• gulp.src(globs,[options]) 指明源文件路徑globs：路徑模式匹配； option是：可選參數；
• gulp.dest(path,[options]); 指明處理後的文件輸出路徑path：路徑（一個任務能夠有多個輸出路徑）；
• gulp.task(name,[deps],fn); 註冊任務 name：任務名稱（經過gulp name 來執行這個任務）；
• deps： 可選的數組，在本任務運行中所須要依賴的其餘任務（當前任務在依賴任務執行完畢後纔會執行）； fn：任務函數（function 方法）；

安裝

• 安裝nodejs http://nodejs.org

• 建立目錄 mkdir mygulp

• 建立配置信息（package.json）： npm init -y

• 安裝： 全局安裝： npm install gulp -g

  本地安裝： npm install gulp --save-dev

注： package.json(此文件在node_modules\gulp 目錄下)；-Dev：將它做爲你的項目依賴添加到中devDependencies內。

插件安裝

• 靜態服務器（gulp-webserver）
• 網頁自動刷新（gulp-livereload）
• 安裝命令： npm install gulp-livereload gulp-webserver --save-dev

gulp任務配置

• 在項目目錄中建立 gulpfile.js文件，用來配置和定義任務（task）

• 編輯gulpfile.js

// 引入gulp
var gulp = require('gulp');

// 引入gulp插件
// 網頁自動刷新
var livereload = require('gulp-livereload');
// 本地服務器
var webserver = require('gulp-webserver');

// 註冊任務
gulp.task('webserver',function () {
  gulp.src('./' )  // 服務器根目錄
  .pipe(webserver({   // 運行webserver
    livereload: true,    // 啓用livereload
    open: true  // 服務器啓動時自動打開網頁
  }));
});

// 監放任務
gulp.task('watch',function() {
  gulp.watch('*.html',['html'])  //監聽根目錄下全部HTML文件
})；

// 默認任務
gulp.task('default',['webserver','watch']);

終端命令 ： gulp 自動執行

注：一、gulp插件能夠經過gulp官網、npm官網或browsenpm上找到你所要 的插件。二、不要在node_modules文件夾內手動刪除插件，請使用命令卸載。由於手動刪除的只是下載插件包，但package.json中配置信息並無清除。三、不要直接移動gulp插件，不然優於系統層級限制，出現錯誤提示"文件夾名對目標文件夾可能過長，您能夠縮短文件夾名並重試，或者嘗試路徑較短的位置"，此時把文件夾打包成RAR後在操做即可。四、npm經常使用命令：

• 安裝插件： npm [-g] [--save-dev]
• 更新插件：npm update [-g] [--save-dev]
• 卸載插件： npm uninstall [-g] [--save-dev]
• 指定版本： npm install @VERSION [--save-dev] (其中VERSION就是你所須要的版本號)