思維導圖
一、簡介
1. nodeJS
nodeJS的出現，可以算是前端里程碑式的一個事件，它讓前端攻城獅們擺脫了瀏覽器的束縛，踏上了一個更加寬廣的舞臺。前端的可能性，從此更加具有想象空間。
隨著一系列基于nodes的應用/工具的出現，工作中與nodeJS打交道的機會越來越多。無論在node應用的開發，還是使用中，包管理都扮演著一個很重要的作用。NPM（node package manager），作為node的包管理工具，極大地便利了我們的開發工作，很有必要了解一下。
2. NPM
NPM（node package manager），通常稱為node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發布等。
NPM的背后，是基于couchdb的一個數據庫，詳細記錄了每個包的信息，包括作者、版本、依賴、授權信息等。它的一個很重要的作用就是：將開發者從繁瑣的包管理工作（版本、依賴等）中解放出來，更加專注于功能的開發。
3. gulp
gulp是基于Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。
gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
二、安裝gulp
1. nodeJS（上官網直接安裝 nodeJS官網）
2. gulp
1）全局安裝gulp
$ sudo npm install -g gulp
2）在項目文件夾下進行npm初始化，生成package.json
$ npm init
//初始化安裝過程中，會提示設置package文件的參數，只要設置name就行了（不要叫gulp），不然開發依賴好像安裝會報錯
//其他的如果沒有需要設定的，一路回車就行了
3）開發依賴安裝
$ npm install gulp-name --save-dev
//安裝成功后會在package.json文件中看到安裝版本記錄
三、gulp使用
1. 新建gulpfile.js
2. 調用gulp
var gulp = require('gulp')
var name = require('gulp-name') //插件調用
3. gulp使用方法
1）基本語法
-
創建目標
gulp.task('',[],function(){})//例子1（默認）： gulp.task('default',function() { console.log('我是default') }); //運行結果： $ gulp //終端運行命令，后面不跟東西，默認執行default [21:54:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [21:54:33] Starting 'default'... 我是default [21:54:33] Finished 'default' after 120 μs //例子2（自定義） gulp.task('task1',function () { console.log('我是task1') }) //運行結果： $ gulp task1 //后面跟上自定義的任務名稱 [21:58:00] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [21:58:00] Starting 'task1'... 我是task1 [21:58:00] Finished 'task1' after 121 μs //例子3（復合） gulp.task('default',['task1'],function() { console.log('我是default') }); //運行結果： $ gulp //先執行自定義，后執行默認 [22:01:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [22:01:33] Starting 'task1'... 我是task1 [22:01:33] Finished 'task1' after 99 μs [22:01:33] Starting 'default'... 我是default [22:01:33] Finished 'default' after 38 μs 目標文件（舉例看后面插件舉例）
gulp.src('')目標輸出（舉例看后面插件舉例）
gulp.dest('')管道（上文的輸出是下文的輸入）（舉例看后面插件舉例）
.pipe()
2）gulp插件使用（插件網站）
插件安裝
$ npm install gulp-name1 gulp-name2 --save-dev插件調用
var name = require('gulp-name')-
插件語法
.pipe(name())//舉例 gulp.task('min',function () { gulp.src('js/*.js') //外部引用 .pipe(concat('new.js')) //合并多個js文件，并生成一個新的文件 .pipe(jsmin()) //壓縮這個新生成的js文件 .pipe(gulp.dest('newJS/')) //將新生成的文件放入新的文件夾中 })
