一步一步教你構(gòu)建gulp崎溃，前端大白都能看懂材义。蠕蚜。梢灭。以下是具體步驟：
1.打開終端 mkdir創(chuàng)建一個(gè)項(xiàng)目目錄one (不能叫g(shù)ulp)
mkdir one
2.通過終端cd 命令進(jìn)入 該項(xiàng)目目錄
cd one
3.執(zhí)行npm init命令 初始化該目錄饼灿，并生成package.json文件
（此處需要一直按回車）直到生成package.json
npm init
如圖
以下幾項(xiàng)是安裝幾個(gè)平常所需要的插件
--save-dev 是你開發(fā)時(shí)候依賴的東西幕侠，它會(huì)自動(dòng)把你安裝的插件的版本號(hào)信息寫到你的json文件中,在安裝是如果報(bào)錯(cuò)是權(quán)限不足時(shí)，在命令語句錢加sudo,表示使用管理員身份運(yùn)行就如windows系統(tǒng)里的administrater,命令如下：
4.安裝gulp,生成node_modules文件夾
npm install gulp --save-dev
5.安裝less插件
npm install gulp-less --save-dev
6.?安裝pug插件
npm install gulp-pug --save-dev
7.安裝出錯(cuò)不中斷監(jiān)控插件
npm install gulp-plumber --save-dev
8.安裝css壓縮插件
npm install gulp-clean-css --save-dev
當(dāng)前目錄下會(huì)生成node_moudles 檢查有沒有上面安裝的插件碍彭，并檢查
package.json文件里有沒有這些插件的信息晤硕，保存成功沒有，里面有安裝的插件名稱和對(duì)應(yīng)的版本號(hào)庇忌。
9.通過touch.js命令 生成創(chuàng)建gulpfile.js
touch gulpfile.js
10.通過mkdir 創(chuàng)建pug目錄
mkdir pug
11.通過mkdir 創(chuàng)建less目錄
mkdir
12.編輯 gulpfile.js,注意lass和pug文件的位置寫對(duì)應(yīng)的路徑
部分代碼的語義：
gulp.task("任務(wù)名稱",function(){
要做的事情
})
gulp.src("文件的路徑舞箍，相對(duì)的")
pipe("管道，輸出到下一步")
gulp.dest("文件輸出的路徑皆疹，相對(duì)的")
gulp.watch("你監(jiān)控的文件路徑疏橄，相對(duì)的",["任務(wù)名稱1","任務(wù)名稱2"])
主要任務(wù)的邏輯
以1hao任務(wù)為例：
- 找到pug文件
- 編譯pug文件成html
- 把html放在另外一個(gè)目錄下
// 引入gulp
var gulp = require("gulp");
// 引入pug插件
var pug = require("gulp-pug");
// 引入less插件
var less = require("gulp-less");
// 引入plumber出錯(cuò)不中斷監(jiān)控插件
var plumber = require("gulp-plumber");
// 引入clean-css css壓縮插件
var cleanCss = require("gulp-clean-css");
// gulp.task定義任務(wù)
gulp.task("1hao",function(){
// gulp.src 文件位置
gulp.src("pug/*.pug")
.pipe(plumber())
.pipe(pug())//pug -> html
.pipe(gulp.dest("html/"));
})
gulp.task("2hao",function(){
gulp.src("less/*.less")
.pipe(plumber())
.pipe(less())//less -> css
.pipe(cleanCss())
.pipe(gulp.dest("css/"))
})
gulp.task("3hao",function(){
gulp.watch("pug/*.pug",["1hao"])
gulp.watch("less/*.less",["2hao"])
})
進(jìn)行到這一步，整個(gè)工具已經(jīng)生成略就。
下次你要寫項(xiàng)目時(shí)直接拿來用捎迫，在終端運(yùn)行g(shù)ulp,并調(diào)用對(duì)應(yīng)的任務(wù)便可愉快的編寫代碼了，是不是特別方便呀~~~~
