构建一个基本的ES6项目（二） ---命令行的处理、创建JS编译任务、创建模板、服务任务脚本、监听测试

在网上观看ES6的学习视频，了解如何创建一个基础的ES6工程，包括命令行的处理、创建JS编译任务、创建模板、服务任务脚本、监听测试等
记录一下，供以后自己参考

下面出现的文件，如果没有自己创建，cmd下创建命令是cd.>文件名.js ，其它像git之类的是touch 文件名.js

所有的构建脚本一定是放在tasks目录下的，即上面创建的js文件一定是在tasks目录下的

一些文件需要引入一些包，所以要安装所需要的包，命令cnpm install 包名 --save-dev npm也行，可以一次性安装多个包，把所需要安装的包名全写在install后面即可

包安装完成后，在根目录下的package.json文件里的devDependencies参数中就能看到所安装的包的信息

1. 命令行的处理 （tasks/util/args.js文件）

需要安装 yargs 包

cnpm install yargs --save-dev

代码：

import yargs from 'yargs'; //引入这个npm包来处理命令行参数
//通过使用 yargs 这个模块来处理命令行的参数，主要是方便处理命令行参数的捕获和过滤

//引入后，定义一些基本的参数
const args = yargs

	//区分线上环境还是开发环境
	//通过option来提取命令行的参数，来区分命令行输入的是否有这个参数，进而来区分它是线上还是开发环境

	.option('production',{
		boolean: true,	//表示是一个Boolean类型
		default: false, /*如果在命令行中没有输入production这个项，那么参数就默认false，
											就是开发环境，有的话则为线上环境*/
		describe: 'min all scripts' //描述  不会被解析
	})

	//设置watch参数，来控制监听开发环境中修改的这些文件要不要自动编译，也通过命令行来控制
	.option('watch',{
		boolean: true,
		default: false,
		describe: 'watch all files' 
	})

	//要不要详细地输出命令行执行的日志
	.option('verbose',{
		boolean: true,
		default: false,
		describe: 'log' 
	})

	//处理压缩的
	.option('sourcemaps',{
		describe: 'force the creation of sroucemaps' 
	})

	//设置服务器端口，来启动服务器
	.option('port',{
		string: true,
		default: 8080,
		describe: 'server port'
	})

	.argv  //表示对输入的命令行的内容以字符串作为解析

	export default args;

2. 处理js的构建脚本 （tasks/scripts.js文件）

需要安装gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util 这些包

cnpm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named 
	gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util --save-dev

同时，还需要安装 `babel-loader、babel-core、babel-preset-env` 这三个包

cnpm install babel-loader babel-core babel-preset-env webpack --save-dev

这里安装的babel-loader包版本号高了有可能会报错，如果报错提示是版本号高了的话，输入 cnpm install babel-loader@7.1.5 降低版本号

代码：

/*
	处理js的构建脚本
	所有的构建脚本一定是放在tasks目录下的
*/
//引入这个脚本所依赖的包
import gulp from 'gulp