思維導(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/')) //將新生成的文件放入新的文件夾中 })