由于鄙人才疏學(xué)淺，所以只能用最直白的方法來敘述比較簡單的事情。廢話不多，開始步入本文正題吧！
當(dāng)我們網(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)目標(biāo)的步伐。
第一步：我們打開git的命令行工具，去命令行npm install -g gulp（安裝全局gulp）。
安裝一下全局的gulp 等待幾分鐘之后就下載好了，然后輸入gulp –v來查看一下gulp是否存在以及版本是多少。
（下面是可選步驟，所以用斜體來影響一下閱讀速度，希望用到的同學(xué)們仔細(xì)看看）：
第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格式的文件，*代表全部，當(dāng)然也可以針對到某一個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文件里面相當(dāng)于記錄了兩種行為了，一種是引入，一種是操作不要以為這時候就大功告成了，還有最重要的一部：我們需要繼續(xù)寫一個默認(rèn)的任務(wù)
//默認(rèn)任務(wù)default，這個名字是必不可少的
gulp.task('default',function(){
//run一下（默認(rèn)執(zhí)行的是我寫的名字為'scripts'進行js代碼壓縮的行為）
gulp.run('scripts');
//監(jiān)聽文件變化（如果js文件有變化，就會執(zhí)行下面的行為）
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
有人要問，如果不寫默認(rèn)行為可以不，回答是當(dāng)然不可以，如果不寫默認(rèn)行為會報錯的?？次野阉⑨尩?/p>
報錯信息竟然是'default'，我js文件中并沒有提到過'default'的。所以說，這是初學(xué)者最容易進入的一個誤區(qū)之一了。我們是必須要寫默認(rèn)行為的。
好了，我們整體來看一下，我們做好的配置長什么樣子：
總共三大步驟，引入，任務(wù)，默認(rèn)任務(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完成?。。。。≈粫嚎sjs，不回去動css的代碼。
壓縮的親爸爸都認(rèn)不出來了~
（本文章適合入門，sass，less壓縮，圖片壓縮都是需要以上的步驟，只不過引入的組件不同而已，希望我講的大家可以看得懂。）
