npm生产\测试环境 gulp-insert(闭包)

初始化：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文件
总体架构