guld創(chuàng)建任務(wù)清單
[圖片上傳失敗...(image-173c1d-1535602385504)]
- Gulp是一個工具演训。用于項目構(gòu)建弟孟。
一.Gulp簡介：
多個開發(fā)者共同開發(fā)一個項目，每位開發(fā)者負(fù)責(zé)不同的模塊样悟，這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的拂募；
使用less、sass等一些預(yù)處理程序窟她，降低CSS的維護(hù)成本陈症，最終需要將這些預(yù)處理程序進(jìn)行解析；
合并css震糖、javascript录肯，壓縮html、css吊说、javascript论咏、images可以加速網(wǎng)頁打開速度，提升性能颁井；
這一系列的任務(wù)完全靠手動完成幾乎是不可能的厅贪，借助構(gòu)建工具可以輕松實現(xiàn)。
所謂構(gòu)建工具 是指通過簡單配置就可以幫我們實現(xiàn)合并雅宾、壓縮养涮、校驗、預(yù)處理等一系列任務(wù)的軟件工具秀又。
常見的構(gòu)建工具包括：Grunt单寂、Gulp贬芥、F.I.S（百度出品）吐辙、webpack
Gulp是基于Nodejs開發(fā)的一個構(gòu)建工具，借助gulp插件可以實現(xiàn)不同的構(gòu)建任務(wù)蘸劈，以其簡潔的配置和卓越的性能成為目前主流的構(gòu)建工具昏苏。
[圖片上傳失敗...(image-f0d5a2-1535602385504)]
二.安裝：
1.先要全局安裝, 讓電腦支持gulp
只需要執(zhí)行一次，如果已經(jīng)執(zhí)行過了，就不需要再去執(zhí)行贤惯。Gulp -v 有版本號洼专，代表已經(jīng)執(zhí)行過了
$ npm install -g gulp --registry=https://registry.npm.taobao.org
[圖片上傳失敗...(image-7ba04b-1535602385504)]
- 2.切換到項目目錄，在本地安裝孵构。(讓你的項目支持gulp)
$ npm install gulp --registry=https://registry.npm.taobao.org
安裝完成會生成一個node_modules文件夾屁商。
3.創(chuàng)建一個package.json文件(記錄npm安裝那些插件)
當(dāng)執(zhí)行npm install時, 會自動把package.json 文件中依賴的插件下載下來
//-f: 安裝時跳過緩存直接從遠(yuǎn)程下載
npm init -f
//作為項目的開發(fā)依賴（devDependencies）安裝
npm install --save-dev gulp
[圖片上傳失敗...(image-139e84-1535602385504)]
- 4.創(chuàng)建一個文件gulpfile.js
[圖片上傳失敗...(image-5cc4a9-1535602385504)]
三.任務(wù)清單
1.創(chuàng)建任務(wù)清單。
清單名稱是固定死的gulpfile.js2.在gulpfile.js當(dāng)中定義任務(wù)颈墅。
gulp是一個對象蜡镶，此對象可以實現(xiàn)任務(wù)清單的定制。
通過一系列的方法來實現(xiàn)
//引入本地安裝的gulp
var gulp = require(‘gulp’)
- 3.定義任務(wù)
gulp.task(‘任務(wù)名稱’恤筛，function(){
要執(zhí)行的任務(wù)官还。
});
想要任務(wù)執(zhí)行。在命令行毒坛，輸入 gulp 任務(wù)名稱
4.指定任務(wù)文件位置 （把less轉(zhuǎn)成css）
gulp.task(‘任務(wù)名稱’望伦，function(){
//借助gulp.src來指定任務(wù)文件位置。
gulp.src(‘./src/style/**/*.less’) //所有的.less文件煎殷。
直接使用命令： npm install gulp-less
});
四.原理
- 學(xué)習(xí)gulp就是學(xué)習(xí)它的方法和它的插件屯伞。
[圖片上傳失敗...(image-9ff5c-1535602385504)]
- gulp是指揮別的插件做任務(wù)的運行器。它是一個管理者豪直。
這樣做的目的是為了方便擴(kuò)展愕掏。 小霸王 插卡。
學(xué)習(xí)gulp就是學(xué)習(xí)gulp的插件顶伞。
- 0.全局安裝gulp npm install gulp -g (只需要執(zhí)行一次饵撑，如果已經(jīng)執(zhí)行過了，就不需要再去執(zhí)行唆貌。Gulp -v 有版本號滑潘，代表已經(jīng)執(zhí)行過了)
- 1.創(chuàng)建項目目錄 （webApp）
- 2.npm init -f 創(chuàng)建一個package.json 記錄當(dāng)前項目當(dāng)中依賴其它插件
- 3.創(chuàng)建src目錄 -> 進(jìn)入src創(chuàng)建js/style/view文件夾
- 4.把gulpfile拷貝到項目根目錄當(dāng)中
- 5.下載gulp所需要的插件
- 6.執(zhí)行g(shù)ulp
