目錄

佈置專案

2.1基本使用(task)

2.2方法呼叫

打包專案

驗證JS

js檔案壓縮

編譯(LESS或SASS)成CSS

驗證css

省略初始化npm以及安裝gulp步驟

佈置專案

1.在專案下新建gulpfile.js檔案
2.開始編輯gulpfile.js

2.1基本使用(task)

//頭部引用
var gulp=require("gulp");



//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口)
gulp.task("default",function(){
	console.log("this is default.js")
})

//如java類似,只會走default方法
gulp.task("compresJS",function(){
	console.log("this is compresJS.js")
})
 

2.2方法呼叫

//頭部引用
var gulp=require("gulp");

//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
//會先走陣列引數中的任務後再走default任務如下:
//先會列印 
//console.log("this is compresJS.js")
//再列印
//console.log("this is compresCss.js")
//後列印
//console.log("this is default.js")

//這樣寫的順序也跟上面描述的一樣,不會走完compresJS後再走compresCss的
gulp.task("default",["compresJS","compresCss"],function(){
	console.log("this is default.js")
})


gulp.task("compresJS",["compresCss"],function(){
	console.log("this is compresJS.js")
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})
 

打包專案

1.先安裝外掛:npm install gulp-concat --save-dev
2.編輯gulpfile.js

//頭部引用: require裡輸入的是你指令安裝外掛的名字,可在node_modules裡看到
var gulp=require("gulp");
//引入打包外掛
var concat=require("gulp-concat");

//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//合併js方法
gulp.task("compresJS",["compresCss"],function(){
	//scr：需要合併js的檔案                 合平後的檔名           合平後的檔案存放位置
	gulp.src(["./script/**/*.js"]).pipe(concat("sumjs.js")).pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})
 

驗證JS

1.也要先安裝外掛:npm install jshint gulp-jshint --save-dev
2.還是編輯gulpfile.js
 

//頭部引用: require裡輸入的是你指令安裝外掛的名字,可在node_modules裡看到
var gulp=require("gulp");
//引入打包外掛
var concat=require("gulp-concat");
//匯入驗證js外掛
var hint=require("gulp-jshint");

//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//合併js方法,思路：需要在合併前先驗證，驗證成功沒語法錯誤之後再合併
gulp.task("compresJS",["compresCss"],function(){
	//scr：需要合併js的檔案
	gulp.src(["./script/**/*.js"]).
	//先驗證
	pipe(hint()).
	//錯誤顯示風格
	pipe(hint.reporter("default")).
	//若出現錯誤時終止
	pipe(hint.reporter("fail")).
	//合平後的檔名
	pipe(concat("sumjs.js")).
	//合平後的檔案存放位置
	pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

js檔案壓縮

1.繼續安裝外掛:npm install --save-dev gulp-uglify
2.還是編輯gulpfile.js

//頭部引用: require裡輸入的是你指令安裝外掛的名字,可在node_modules裡看到
var gulp=require("gulp");
//引入打包外掛
var concat=require("gulp-concat");
//匯入驗證js外掛
var hint=require("gulp-jshint");
//匯入js壓縮外掛
var uglify=require("gulp-uglify");

//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//合併js方法,思路：
//1.先驗證
//2.壓縮
//3.合併
gulp.task("compresJS",["compresCss"],function(){
	//scr：需要合併js的檔案
	gulp.src(["./script/**/*.js"]).
	//先驗證
	pipe(hint()).
	//錯誤顯示風格
	pipe(hint.reporter("default")).
	//若出現錯誤時終止
	pipe(hint.reporter("fail")).
	//壓縮
	pipe(uglify()).
	//合平後的檔名
	pipe(concat("sumjs.js")).
	//合平後的檔案存放位置
	pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

編譯(LESS或SASS)成CSS

SASS版
1.繼續安裝外掛 npm install --save-dev gulp-sass
2.編輯gulpfile.js
 

//頭部引用: require裡輸入的是你指令安裝外掛的名字,可在node_modules裡看到
var gulp=require("gulp");
//引入打包外掛
var concat=require("gulp-concat");
//匯入編譯sass外掛
var sass=require("gulp-sass");


//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
gulp.task("default",["compresCss"],function(){
	console.log("先走compressCss再走Default哦")
	console.log("this is default.js")
})

//編譯SASS方法
gulp.task("compresCss",function(){
	//需要編譯哪個檔案下的scss檔案
	return gulp.src("./script/**/*.scss").
	//開始編譯
	pipe(sass()).
	//編譯後的檔名
	pipe(concat("bianyicss.css")).
	//編譯後文件放在哪個資料夾下(位置)
	pipe(gulp.dest("./script"))
})

驗證css

1.繼續安裝外掛:npm install --save-dev gulp-minify-css
2.繼續修改gulpfile.js
 

//頭部引用: require裡輸入的是你指令安裝外掛的名字,可在node_modules裡看到
var gulp=require("gulp");
//引入打包外掛
var concat=require("gulp-concat");
//匯入編譯sass外掛
var sass=require("gulp-sass");
//匯入驗證css外掛
var minify=require("gulp-minify-css");


//gulp.task方法用來定義任務，內部使用的是Orchestrator，其語法為：
//gulp.task(name[, deps], fn)
//name: 為任務名
//deps: 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個引數
//fn: 為任務函式，我們把任務要執行的程式碼都寫在裡面，是當前任務的實際處理邏輯。該引數也是可選的。

//類似於java裡的main方法(主程式入口),在deps[]中新增引用任務的任務名
gulp.task("default",["compresCss"],function(){
	console.log("先走compressCss再走Default哦")
	console.log("this is default.js")
})

//編譯SASS方法
gulp.task("compresCss",function(){
	//需要編譯哪個檔案下的scss檔案
	return gulp.src("./script/**/*.scss").
	//先驗證
	pipe(minify()).
	//開始編譯
	pipe(sass()).
	//編譯後的檔名
	pipe(concat("bianyicss.css")).
	//編譯後文件放在哪個資料夾下(位置)
	pipe(gulp.dest("./script"))
})