初始化：npm init
下載外掛：npm install --save-dev gulp gulp-sourcemaps gulp-insert gulp-concat gulp-sass gulp-minify-css browser-sync 
npm install --save-dev jshint gulp-jshint gulp-uglify

var gulpinsert =require("gulp-insert");
//合併外掛
var concat=require("gulp-concat");
//檔案壓縮後不利於檢視與除錯，但是有了sourcemap，出錯的時候，除錯工具將直接顯示原始程式碼，而不是轉換後的程式碼
var sourcemaps=require("gulp-sourcemaps");
var sass=require("gulp-sass");
var minify=require("gulp-minify-css");
var browsersync=require("browser-sync").create();
var gulp=require("gulp");

//生產環境
gulp.task("compresCss",function(){
	//需要合併的css檔案
	return gulp.src("./script/**/*.scss")
	.pipe(minify())
	.pipe(sass())
	.pipe(concat("index.css"))
	.pipe(gulp.dest("script/css"))
})

//測試環境
gulp.task("compresCss:dev",function(){
	//需要合併的css檔案
	return gulp.src("./script/**/*.scss")
	//先驗證
	.pipe(minify())
	//解析scss檔案
	.pipe(sass())
	//啟動sourcemaps功能
	.pipe(sourcemaps.init())	
	//生成記錄位置資訊的sourcemaps檔案
	.pipe(sourcemaps.write())
	//解析後的檔名
	.pipe(concat("index.css"))
	.pipe(gulp.dest("script/css"))
	//是否同步更新
	.pipe(browsersync.stream())
})

//生產環境預設入口
gulp.task("default",["compresCss"],function(){
    browsersync.init({
    	server:{
    		baseDir:"./"
    	}
    })
})

//測試環境預設入口
gulp.task("default:dev",["compresCss:dev"],function(){
    browsersync.init({
    	server:{
    		baseDir:"./"
    	}
    })
    gulp.watch("script/sass/*.scss",["compresCss:dev"])
})
 

gulp-insert作用:可以防止合併js時若有同名的變數,變數覆蓋等問題(閉包)
修改gulpfile.js
 

//閉包js外掛,為了方式js中多個變數名重複而引發的問題
var gulpinsert =require("gulp-insert");
//合併外掛
var concat=require("gulp-concat");
//檔案壓縮後不利於檢視與除錯，但是有了sourcemap，出錯的時候，除錯工具將直接顯示原始程式碼，而不是轉換後的程式碼
var sourcemaps=require("gulp-sourcemaps");
var sass=require("gulp-sass");
var minify=require("gulp-minify-css");
var browsersync=require("browser-sync").create();
var gulp=require("gulp");

//驗證js外掛
var hint=require("gulp-jshint");
//合併js外掛
var uglify=require("gulp-uglify");


//生產環境css
gulp.task("compresCss",function(){
	//需要合併的css檔案
	return gulp.src("./script/**/*.scss")
	.pipe(minify())
	.pipe(sass())
	.pipe(concat("index.css"))
	.pipe(gulp.dest("script/css"))
})

//測試環境css
gulp.task("compresCss:dev",function(){
	//需要合併的css檔案
	return gulp.src("./script/**/*.scss")
	//先驗證
	.pipe(minify())
	//解析scss檔案
	.pipe(sass())
	//啟動sourcemaps功能
	.pipe(sourcemaps.init())	
	//生成記錄位置資訊的sourcemaps檔案
	.pipe(sourcemaps.write())
	//解析後的檔名
	.pipe(concat("index.css"))
	.pipe(gulp.dest("script/css"))
	//是否同步更新
	.pipe(browsersync.stream())
})

//js生產
gulp.task("compresJS",function(){
	return gulp.src("./script/**/*.js")
	//閉包
	.pipe(gulpinsert.transform(function(contents, file){
			var path = file.relative;
			if(path != "index.js"){
				var prepend = 'registJS.add("' + path.replace("\\","/") + '", function(){\n';
			  	var append = '\n});';
			  	return prepend + contents + append;
			}
			return contents
	}))
	//驗證
	.pipe(hint())
	.pipe(hint.reporter("default"))
	.pipe(hint.reporter("fail"))
	.pipe(concat("index.js"))
	//合併
	.pipe(uglify())
	.pipe(gulp.dest("script/jss"))
})

//js測試(不合並)
gulp.task("compresJS:dev",function(){
	return gulp.src("./script/**/*.js")
	//閉包
	.pipe(gulpinsert.transform(function(contents, file){
			var path = file.relative;
			if(path != "index.js"){
				var prepend = 'registJS.add("' + path.replace("\\","/") + '", function(){\n';
			  	var append = '\n});';
			  	return prepend + contents + append;
			}
			return contents
	}))
	//驗證
	.pipe(hint())
	.pipe(hint.reporter("default"))
	.pipe(hint.reporter("fail"))
	.pipe(concat("index.js"))
	.pipe(gulp.dest("script/jss"))
	.pipe(browsersync.stream())
})

//生產環境預設入口
gulp.task("default",["compresCss,compresJS"],function(){
    browsersync.init({
    	server:{
    		baseDir:"./"
    	}
    })
})

//測試環境預設入口
gulp.task("default:dev",["compresCss:dev","compresJS:dev"],function(){
    browsersync.init({
    	server:{
    		baseDir:"./"
    	}
    })
    gulp.watch("script/sass/*.scss",["compresCss:dev"])
    gulp.watch("script/js/*.js",["compresJS:dev"])
})
 

還需要在目錄中新增index.js檔案
總體架構