# gulp使用常用的7个场景

gulp.task('webserver',function(){
	gulp.src('build/').pipe(
		webserver({
			host:'localhost',
			port:'8000',
			directoryListing:{
				enable:true,
				path:'build'
			},
			livereload:true,
			middleware:[
				//配置发现代理
				proxy('/mock',{
					//看见地址中有mock，就直接转向target这个地址，如果mock后边还有字符串，就直接拼接到target地址的后边
					target:'http://localhost:3000',
					//是否切换域名
					changeOrigin:true,
					//遇到/mock就把这个字符串干掉，置为空
					pathRewrite:{
						'^/mock':''
					}
				}),
				proxy('/api',{
					//看见地址中有mock，就直接转向target这个地址，如果mock后边还有字符串，就直接拼接到target地址的后边
					target:'https://m.lagou.com',
					//是否切换域名
					changeOrigin:true,
					//遇到/mock就把这个字符串干掉，置为空
					pathRewrite:{
						'^/api':''
					}
				})
			]
		})
	)
})

gulp.task('packcss',function(){
	gulp.src('./src/style/usage/app.scss')
	.pipe(sass().on('error',sass.logError))
 //$.minifyCss()是利用的（gulp-load-plugins）插件做包管理，但是同时也需要安装gulp-minify-css插件
	.pipe($.minifyCSS())
	.pipe(gulp.dest('./build/style/'))
})

gulp.task('packjs',function(){
	gulp.src('./src/script/app.js')
//这是一个提取文件名的插件，安装（vinyl-named）插件，使用webpack做模块处理之后的文件会默认一个文件名（main.js），所以我们需要
	.pipe(named())
	.pipe(webpack({
		output:{
			filename:'[name].js'
		},
		module:{
			loaders:[
				{
					test:/\.js$/,
					loader:'imports-loader',
					exclude:'./node_modules'
				},
				{
					test:/\.string$/,
					loader:'string-loader',
					exclude:'./node_modules'
				}
			]
		}
	}))
.pipe(gulp.dest('./build/script/'))
})

//	.pipe(rev())
//	.pipe(gulp.dest('./build/script/'))//生成的js文件放置目录，经过md5编码过后的，形如app-hf7868ghfg.js
//	.pipe(rev.manifest())
//	.pipe(gulp.dest('./build/rev/script/'))//生成的rev.manifest.json文件放置目录

gulp.task('packhtml',function(){
	gulp.src(['./build/rev/**/*.json','./build/*.html'])
//$.minifyHtml()这个是压缩html文件的插件
	.pipe($.minifyHtml())
	.pipe(revCollector())
	.pipe(gulp.dest('./build'))
})

var $ = require('gulp-load-plugins')();

var minimist = require('minimist');
var gulpif = require('gulp-if');
var knownOptions={
	string:'env',
	default:{env:process.env.NODE_ENV || 'production'}
}
var options = minimist(process.argv.slice(2),knownOptions)

gulpif(options.env!=='production',gulp.dest('./dev/script/')) // 不是生产环境等等

gulp.task('packjs',function(){
	gulp.src('./src/script/app.js')
	.pipe(named())
	.pipe(webpack({
		output:{
			filename:'[name].js'
		},
		module:{
			loaders:[
				{
					test:/\.js$/,
					loader:'imports-loader',
					exclude:'./node_modules'
				},
				{
					test:/\.string$/,
					loader:'string-loader',
					exclude:'./node_modules'
				}
			]
		}
	}))
//	.pipe($.uglify())
//	//根据文件内容做编码，使用md5编码，每次都生成不同的文件名，使用rev生成映射json文件
//	.pipe(rev())
//	.pipe(gulp.dest('./build/script/'))//生成的js文件放置目录
//	.pipe(rev.manifest())
//	.pipe(gulp.dest('./build/rev/script/'))//生成的rev.manifest.json文件放置目录

	.pipe(gulpif(options.env==='production',$.uglify()))
	//根据文件内容做编码，使用md5编码，每次都生成不同的文件名，使用rev生成映射json文件
	.pipe(gulpif(options.env==='production',rev()))
	.pipe(gulpif(options.env==='production',gulp.dest('./build/script/')))
	.pipe(gulpif(options.env!=='production',gulp.dest('./dev/script/')))
	.pipe(gulpif(options.env==='production',rev.manifest()))
	.pipe(gulpif(options.env==='production',gulp.dest('./build/rev/script/')))
})

gulp.task('clean',del.bind(null,['./build/**/*'],{
	force:true//强制删除
}))