由于鄙人才疏學淺美尸，所以只能用最直白的方法來敘述比較簡單的事情冤议。廢話不多，開始步入本文正題吧师坎！
當我們網(wǎng)站項目做完的時候恕酸，會發(fā)現(xiàn)項目出現(xiàn)一堆的js以及css等等。我們?nèi)绾魏侠淼貙⑺鼈冋系揭黄鹂杪紤]到方便易行我選用了gulp蕊温。它所實現(xiàn)的效果就是將所有的js文件整合到一個js文件里面，并且壓縮成一行遏乔。
首先我們要了解义矛，gulp是在node環(huán)境下運行的，有了node盟萨，我們下載一個git用來輸入命令就可以了凉翻。這個大家都可以在相應(yīng)的網(wǎng)站上找到答案，不多介紹nodejs了捻激，加快實現(xiàn)目標的步伐制轰。
第一步：我們打開git的命令行工具前计，去命令行npm install -g gulp（安裝全局gulp）。
安裝一下全局的gulp 等待幾分鐘之后就下載好了垃杖，然后輸入gulp –v來查看一下gulp是否存在以及版本是多少男杈。
（下面是可選步驟，所以用斜體來影響一下閱讀速度调俘，希望用到的同學們仔細看看）：
第1.5步：
如果我們有碼云或者githup線上的項目的話伶棒，我們需要配置一下gulp；（這里我用碼云舉個例子）
輸入npm
init開始配置gulp脉漏，把下面的幾個參數(shù)設(shè)置好苞冯。
name:(碼云)
Sorry,name can only contain URL-friendly characters.
name:(碼云) miaoshu
version:(1.0.0)
description:ceshi gulp
entrypoint: (index.js)
testcommand:
gitrepository:
keywords:
author:zhurui
Is this ok? (yes) y這里的時候輸入yes或者y，確定配置侧巨。此時會出現(xiàn)一個package.json文件里面是剛剛的配置舅锄。
好了，下面讓我們接著說我們第二步需要來做什么：
第二步：在我們項目的文件夾中（根目錄下）打開命令行司忱。輸入命令npm install --save-dev gulp（下載本地gulp）皇忿，等待下載完畢會出現(xiàn)一個本地的文件夾node_modules文件夾。這就說明我們本地的gulp已經(jīng)下載好了坦仍。
第三步：就在上圖這個根目錄中鳍烁，我們新建一個js，名字叫g(shù)ulpfile.js
這里面是用來寫我們gulp運行的一些行為繁扎，比如合并幔荒，壓縮，重命名啊梳玫，等等爹梁。先配置，到后面一看就明白了
到了第四步我們要了解我們需要做什么：
在項目的根目錄中的命令行中提澎，輸入我們要用到的東西姚垃，這些都是局部的：
如果想要壓縮js代碼：$ npm install --save-devgulp-uglify
如果想要壓縮css代碼：$ npm install--save-dev gulp-minify-css
如果想要刪除文件夾和文件的命令：$ npm install--save-dev gulp del
如果想要less轉(zhuǎn)換為css插件：$ npm install--save-dev gulp-less
如果想要合并文件：$ npm install --save-devgulp-concat
如果想要給文件重新命名：$ npm install --save-devgulp-rename
第四步：按需求下載好自己所需要的局部組件，然后下一步就是要去gulpfile.js里面配置我們gulp運行時候的行為了
首先引入剛剛下載好的組件：
//引入gulp
var gulp = require('gulp');
//引入組件（這里面有：重命名盼忌，壓縮js的組件积糯，合并js的組件）
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
組件引入之后，我們開始寫我們gulp的行為了谦纱，也就是我們運行g(shù)ulp的時候他需要怎么做看成。
//舉個例子：這是把js壓縮并且合并的一個行為
其中：task（任務(wù)）：每一個gulp的命令都是一個任務(wù)。
src（引入）：引入需要構(gòu)建的文件路徑跨嘉。
dest（輸入）：輸出文件的路徑绍昂。
watch（監(jiān)聽）：監(jiān)聽文件的變化，可以自動執(zhí)行任務(wù)偿荷。
//我給這個行為起了一個名字為” scripts”窘游，然后緊接著一個回掉函數(shù)記錄他的行為
gulp.task('scripts', function() {
//引入js文件夾下面的所有.js格式的文件，*代表全部跳纳，當然也可以針對到某一個js文件忍饰。
gulp.src('./js/*.js')
//concat就是我們下載好，然后還引進來的那個組件寺庄，合并他們所有的js文件合并玩了名字叫做all.js
.pipe(concat('all.js'))
//合并完之后我將他輸出到根目錄下的一個新的文件夾“dist“里面
.pipe(gulp.dest('./dist'))
//雖然所有js文件合并到了all.js里面艾蓝，但是他們現(xiàn)在格式還是“生前“的樣子，我需要將它們變?yōu)橐恍卸诽粒∵@時候就用到了一個重命名：rename我給all.js起了一個名字叫做all.min.js赢织，緊接著用到了引入的js壓縮組件uglify()，然后那么多行的js文件就變?yōu)榱艘粌尚械?/p>
.pipe(rename('all.min.js'))
.pipe(uglify())
//處理完之后我也將他輸出到根目錄下的文件夾“dist“里面
.pipe(gulp.dest('./dist'));
});
額馍盟，這時候在gulpfile.js文件里面相當于記錄了兩種行為了于置，一種是引入，一種是操作不要以為這時候就大功告成了贞岭，還有最重要的一部：我們需要繼續(xù)寫一個默認的任務(wù)
//默認任務(wù)default八毯，這個名字是必不可少的
gulp.task('default',function(){
//run一下（默認執(zhí)行的是我寫的名字為'scripts'進行js代碼壓縮的行為）
gulp.run('scripts');
//監(jiān)聽文件變化（如果js文件有變化，就會執(zhí)行下面的行為）
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
有人要問瞄桨，如果不寫默認行為可以不话速，回答是當然不可以，如果不寫默認行為會報錯的芯侥〔唇唬看我把他注釋掉
報錯信息竟然是'default'，我js文件中并沒有提到過'default'的柱查。所以說廓俭，這是初學者最容易進入的一個誤區(qū)之一了。我們是必須要寫默認行為的物赶。
好了白指，我們整體來看一下，我們做好的配置長什么樣子：
總共三大步驟酵紫，引入告嘲，任務(wù)，默認任務(wù)奖地。很簡單的橄唬。
最后一步：運行
既然都已經(jīng)配置好了，我們就來運行一下吧参歹，回到項目的根目錄中仰楚，我們打開git的命令行，輸入gulp并且回車，很好僧界，出現(xiàn)這些時間表示我們已經(jīng)成功了侨嘀。然后我們會看到根目錄自己出現(xiàn)了一個名字叫做dist的文件夾，小心翼翼的打開里面捂襟，驚喜的發(fā)現(xiàn)了all.js以及all.min.js兩個文件靜靜的躺在里面咬腕。
開心之際不要忘了一個重要的事情：我們?nèi)グ阉许撁嬷械膕cript指向一個文件夾！
打開頁面：
可以正常運行涨共，完美！
在此還要提到最后一步：運行宠漩。
如果運行：gulp是執(zhí)行g(shù)ulpfile.js里面所有的任務(wù)举反。如果此時有一個壓縮css的任務(wù)，有一個壓縮js的任務(wù)扒吁，分別叫做script和css
我們只想壓縮一下js火鼻，那么就執(zhí)行g(shù)ulp+任務(wù)名稱也就是：$ gulp script完成！Ｊ莩隆Ｄ！！晨逝！只會壓縮js蛾默，不回去動css的代碼。
壓縮的親爸爸都認不出來了~
（本文章適合入門捉貌，sass支鸡，less壓縮，圖片壓縮都是需要以上的步驟趁窃，只不過引入的組件不同而已牧挣，希望我講的大家可以看得懂。）
