gulp 構建工具

1. gulp 的簡介

　　gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統 的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發 更加快速高效。

　　在學習前，先談談大體使用gulp的步驟，給讀者以初步的認識。首先固然是安裝nodejs，經過nodejs的npm全局安裝和項目安裝gulp，其次 在項目裏安裝所須要的gulp插件，而後新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最後經過命令提示符運行 gulp任務便可。

　　安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務。

2.  關於gulp以前的 介紹

　　首先是nodejs的安裝 使用版本管理器 git。 經過 git bush 來進行版本管理操做。

　　能夠經過查看版本號來檢測是否安裝成功

　　node -v (node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）)

　　npm -v

　　gulp --version

　　使用 npm 安裝插件： npm install <name> [-g] [--save-dev]

　　　　　　　　　　　　npm install gulp-less --save-dev

　　-g 全局安裝

　　　　配置package.json的配置信息 經過npm init命令。

　　--save  將保存配置信息至package.json （package.json 是 nodejs項目配置文件）

　　-dev  保存至package.json 的 devDependencies節點  不指定-dev 將保存至depengdencies節點。

　選裝 cnpm

　　由於主要是由於npm是從國外的服務器下載 受網絡影響。 因此 使用淘寶鏡像。

　　安裝 cnpm  npm install cnpm -g --registry=https://registry.npm.taobao.org

　　使用方法跟npm 徹底同樣。

3. 正式進入 gulp的學習

　　 全局安裝 gulp　　

　　　　cnpm install gulp -g

　　查看版本號 gulp --version

　　新建package.json文件 package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；

　　　$ npm init

　　　package.json 是相似這樣的一個json文件(注意 在json內部是不能寫註釋的)

　　　

4. 本地安裝 gulp 插件

　　本地安裝 cnpm install gulp --save-dev

　　以示例 gulp-less爲例(編譯 less文件) 命令提示符執行 cnpm install gulp-less --save-dev

　　將會安裝在node_modules的 gulp-less 目錄下。 改目錄下有一個gulp-less的使用幫助文檔 README.md

　　PS: 全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能

　　

5. 新建gulpfile.js 文件（重要）

　　　　gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其餘文件夾下亦可）。

　　　　

　　//導入工具包 require('node_modules裏對應模塊')

　　var gulp = require('gulp'), //本地安裝gulp所用到的地方

  　　  less = require('gulp-less');

 

　　//定義一個testLess任務（自定義任務名稱）

　　gulp.task('testLess', function () {

    　　gulp.src('src/less/index.less') //該任務針對的文件

        　　.pipe(less()) //該任務調用的模塊

        　　.pipe(gulp.dest('src/css')); //將會在src/css下生成index.css

　　});

 

　　gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask爲其餘任務，該示例沒有定義elseTask任務

 

　　//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數

　　//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組)

　　//gulp.dest(path[, options]) 處理完後文件生成路徑

　　

6.  運行 gulp

　　命令提示符 gulp任務名稱

　　編譯less 命令提示符 執行 gulp testless

　　var gulp = require('gulp');

 

　　　　gulp.task('default', function () {

　 });

　　

 

　　 gulp.js 的 API 很是簡單，咱們只須要了解四個就足以應對絕大多數的腳本編寫了

　　

　　

　　gulp.task(name[,deps ], fn):註冊任務

　　　　

　　name 是任務名稱; deps是可選的數組 其中列出須要在本任務運行要執行的任務；fn 是任務體。這是gulp.js的核心了。須要花時間來吃　　透。詳情見此

　　

 　　 gulp.src( globs[,options]) 指明源文件路徑

　　

　　gulp.dest(path) 指明任務處理後的目標輸出路徑

　　

　　gulp.watch（glob[,options],tasks）監視文件的變化並運行相應的任務。你沒看錯，watch 做爲核心 API 出如今 gulp.js 裏了，

 

 

  插件

　　

　　A) 語法檢查 (gulp-jshint)

　　

　　B) 合併文件 (gulp-concat)

　　

　　C) 壓縮代碼 (gulp-uglify)

　　

　　D) 文件重命名 (gulp-rename)

 

 

$ cnpm install <plugin_name> --save-dev

 

最後的代碼完成以下

　　

　　

　　

 

 

　　 能夠看出，基本上全部的任務體都是這麼個模式：

 

 　　

 

 　　 很是容易理解！獲取要處理的文件，傳遞給下一個環節處理，而後把返回的結果繼續傳遞給下一個環節……直到全部環節完成。

 

　　pipe 就是 stream 模塊裏負責傳遞流數據的方法而已，

　　　　

　　至於最開始的 return 則是把整個任務的 stream 對象返回出去，以便任務和任務能夠依次傳遞執行。

 

 

 　　寫成下面的方式 更爲直觀