npm最基本安裝
gulp驗證打包壓縮加密編譯(常用)
也是在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");
//匯入觀察者browser-sync
var browsersync=require("browser-sync").create();


//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");
	//建立觀察者
	browsersync.init({
		//若同級目錄下有index.html baseDir可以寫成例子這樣，也可以自己指定到對應的html
		server:{baseDir:"./"}
	});
	//開始觀察    觀察物件為scss,當scss發生變化時,呼叫編譯SASS方法,做到同步編譯更新到網頁顯示
	gulp.watch("./script/style/one.scss",["compresCss"]);

	
})

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