思維導(dǎo)圖
一妇智、簡(jiǎn)介
1. nodeJS
nodeJS的出現(xiàn)拙友，可以算是前端里程碑式的一個(gè)事件，它讓前端攻城獅們擺脫了瀏覽器的束縛背苦，踏上了一個(gè)更加寬廣的舞臺(tái)挨厚。前端的可能性堡僻，從此更加具有想象空間糠惫。
隨著一系列基于nodes的應(yīng)用/工具的出現(xiàn)疫剃，工作中與nodeJS打交道的機(jī)會(huì)越來越多。無論在node應(yīng)用的開發(fā)硼讽，還是使用中巢价，包管理都扮演著一個(gè)很重要的作用。NPM（node package manager）固阁，作為node的包管理工具壤躲，極大地便利了我們的開發(fā)工作，很有必要了解一下备燃。
2. NPM
NPM（node package manager）碉克，通常稱為node包管理器。顧名思義并齐，它的主要功能就是管理node包漏麦，包括：安裝、卸載况褪、更新撕贞、查看、搜索测垛、發(fā)布等捏膨。
NPM的背后，是基于couchdb的一個(gè)數(shù)據(jù)庫(kù)食侮，詳細(xì)記錄了每個(gè)包的信息号涯，包括作者、版本锯七、依賴链快、授權(quán)信息等。它的一個(gè)很重要的作用就是：將開發(fā)者從繁瑣的包管理工作（版本起胰、依賴等）中解放出來久又，更加專注于功能的開發(fā)。
3. gulp
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器效五， 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試地消、檢查、合并畏妖、壓縮脉执、格式化、瀏覽器自動(dòng)刷新戒劫、部署文件生成半夷，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟婆廊。在實(shí)現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想巫橄，前一級(jí)的輸出淘邻，直接變成后一級(jí)的輸入，使得在操作上非常簡(jiǎn)單湘换。通過本文宾舅，我們將學(xué)習(xí)如何使用Gulp來改變開發(fā)流程，從而使開發(fā)更加快速高效彩倚。
gulp 和 grunt 非常類似筹我，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作帆离，能更快地更便捷地完成構(gòu)建工作蔬蕊。
二、安裝gulp
1. nodeJS（上官網(wǎng)直接安裝 nodeJS官網(wǎng)）
2. gulp
1）全局安裝gulp
$ sudo npm install -g gulp
2）在項(xiàng)目文件夾下進(jìn)行npm初始化哥谷，生成package.json
$ npm init
//初始化安裝過程中岸夯，會(huì)提示設(shè)置package文件的參數(shù)，只要設(shè)置name就行了（不要叫g(shù)ulp）呼巷，不然開發(fā)依賴好像安裝會(huì)報(bào)錯(cuò)
//其他的如果沒有需要設(shè)定的囱修，一路回車就行了
3）開發(fā)依賴安裝
$ npm install gulp-name --save-dev
//安裝成功后會(huì)在package.json文件中看到安裝版本記錄
三、gulp使用
1. 新建gulpfile.js
2. 調(diào)用gulp
var gulp = require('gulp')
var name = require('gulp-name') //插件調(diào)用
3. gulp使用方法
1）基本語法
-
創(chuàng)建目標(biāo)
gulp.task('',[],function(){})//例子1（默認(rèn)）： gulp.task('default',function() { console.log('我是default') }); //運(yùn)行結(jié)果： $ gulp //終端運(yùn)行命令王悍，后面不跟東西破镰，默認(rèn)執(zhí)行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') }) //運(yùn)行結(jié)果： $ gulp task1 //后面跟上自定義的任務(wù)名稱 [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（復(fù)合） gulp.task('default',['task1'],function() { console.log('我是default') }); //運(yùn)行結(jié)果： $ gulp //先執(zhí)行自定義，后執(zhí)行默認(rèn) [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 目標(biāo)文件（舉例看后面插件舉例）
gulp.src('')目標(biāo)輸出（舉例看后面插件舉例）
gulp.dest('')管道（上文的輸出是下文的輸入）（舉例看后面插件舉例）
.pipe()
2）gulp插件使用（插件網(wǎng)站）
插件安裝
$ npm install gulp-name1 gulp-name2 --save-dev插件調(diào)用
var name = require('gulp-name')-
插件語法
.pipe(name())//舉例 gulp.task('min',function () { gulp.src('js/*.js') //外部引用 .pipe(concat('new.js')) //合并多個(gè)js文件压储，并生成一個(gè)新的文件 .pipe(jsmin()) //壓縮這個(gè)新生成的js文件 .pipe(gulp.dest('newJS/')) //將新生成的文件放入新的文件夾中 })
