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

秒速五厘米 2022-05-10 03:30 178阅读 0赞

在网上观看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';//整个项目的构建都是基于gulp的基础上的
    import gulpif from 'gulp-if';//gulp语句中做if判断的
    import concat from 'gulp-concat';//gulp中处理文件拼接的
    import webpack from 'webpack';//引入webpack工具包
    import gulpWebpack from 'webpack-stream';/*gulp处理的都是些文件流，它是基于stream的，
    											所以引入webpack-stream包结合它来做处理*/
    import named from 'vinyl-named';//对文件重命名做标志的
    import livereload from 'gulp-livereload'; //热更新包，实现文件修改以后浏览器自动刷新等
    import plumber from 'gulp-plumber'; // 处理文件信息流的，防止来自 gulp 插件错误导致中断操作的插件 
    import rename from 'gulp-rename'; // 文件重命名 
    import uglify from 'gulp-uglify'; // 用来处理js，css压缩的包 
    import {log,colors} from 'gulp-util'; //在命令行工具输出的包
    import args from './util/args';//对命令行参数进行解析的一个包（开始自己写的那个）
    
    //创建脚本编译的任务 
    //task、src等是gulp提供的一个标准的API，创建一个任务
    //这里的scripts是 任务的名称
    //ES6的箭头函数
    gulp.task('scripts',()=>{
    	return gulp.src(['app/js/index.js']) //打开这个文件
    		.pipe(plumber({           //处理常规的错误逻辑
    			errorHandle:function(){
    
    			}
    		}))
    		.pipe(named())  //对文件重新命名
    
    		.pipe(gulpWebpack({  /*对文件进行编译，3个参数，第一个参数是编译相应的文件，
    													第二个是null，第三个是对错误进行一个处理*/
    			module:{
    				loaders:[{
    					test:/\.js$/,  //如果遇到.js文件，用babel这个loader去处理
    					loader:'babel-loader'//这里还需要装三个依赖包，babel-loader、babel-core、babel-preset-env
    				}]
    			}
    		}),null,(err,stats)=>{
    			log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
    				chunks:false
    			}))
    		})
    
    		//设置文件编译完后放在哪个地方
    		.pipe(gulp.dest('server/public/js'))  //使用gulp.dest这个命令以后，将编译好的文件写入这个路径中
    		//为什么要写在server目录下，是因为在server中要拿到最新的（就是编译好的）js才能在整个服务器中跑起来
    
    		//处理编译压缩的过程（三步：复制-压缩-存储）
    		.pipe(rename({  //可以理解成把上面生成的文件重新复制了一份
    			basename:'cp',
    			extname:'.min.js'
    		}))
    		//压缩
    		.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    		//存储到这个文件夹下
    		.pipe(gulp.dest('server/public/js'))
    
    		/*截止现在，在server/public/js这个路径下会有两个文件，
    		一个是编译好了未压缩的，一个是编译好的压缩了的（文件名：cp.min.js）*/
    
    		//监听一个文件，当这个文件变化了之后自动刷新
    		.pipe(gulpif(args.watch,livereload()))  
    		/*解释上面：判断args.watch这个参数，如果命令行中有watch这个选项的话，
    			就执行这个livereload()热更新，如果没有，就不会对文件进行监听，也不会刷新*/
    
    		// 注：这里的 watch 只是监听命令参数的 watch，并不是监听文件的变化。
    })

## 3. 处理模板的构建脚本 （tasks/pages.js文件） ##

需要用到的包有`gulp gulp-if gulp-livereload` ，上面已经都安装过了，可以不用再安装

代码：

//处理模板(ejs)的构建脚本
    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import livereload from 'gulp-livereload';  //热更新
    import args from './util/args';  //引入命令行参数那个包
    
    //创建一个任务
    gulp.task('pages',()=>{
    	return gulp.src('app/**/*.ejs')  //打开app这个目录下的所有.ejs文件
    			.pipe(gulp.dest('server'))  //将这些模板文件拷贝到这个server目录下
    			.pipe(gulpif(args.watch,livereload())) //监听热更新  注：这里的 watch 只是监听命令参数的 watch，并不是监听文件的变化。
    })

## 4. 处理css相关脚本 （tasks/css.js文件） ##

需要用到的包有 `gulp gulp-if gulp-livereload` ，上面已经都安装过了，可以不用再安装，下同

代码：

//css相关脚本
    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import livereload from 'gulp-livereload';
    import args from './util/args';
    
    gulp.task('css',()=>{
    	return gulp.src('app/**/*.css')
    		.pipe(gulp.dest('server/public'))
    		.pipe(gulpif(args.watch,livereload()))
    })

## 5. 服务器脚本 （tasks/server.js文件） ##

需要安装 `gulp-live-server` 包

cnpm install gulp-live-server --save-dev

代码：

//服务器脚本
    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import liveserver from 'gulp-live-server';  //引入一个启动服务器的包
    import args from './util/args';
    
    gulp.task('serve',(cb)=>{  //cb是一个回调，serve是任务名 
    	if(!args.watch) return cb();  //如果不是处于监听状态下，直接返回回调函数
    
    	//如果处于监听状态下，就创建一个服务器
    	var server = liveserver.new(['--harmony','server/bin/www']);
    	/*	'--harmony'  在当前命令行下去执行这个harmony脚本
    		'server/bin/www'  //最终启动的服务器脚本（？）*/
    
    	server.start();  //启动服务器
    
    	//监听server这个命令下的所有js，ejs的模板引擎（当发生改变时浏览器自动刷新，实现热更新）
    	gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
    		server.notify.apply(server,[file]); //通知服务器，文件已发生改变，然后做相应的处理
    	})
    	//gulp.watch  //对文件的监听
    	//第一个参数，是传入的一个数组，值的要监听的哪些路径
    	//监听完之后，将改动告诉给服务器，然后做出相应的动作
    
    	// 监听需要重启服务的文件
    	gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    		server.start.bind(server)()  //监听到变化后，让服务重启
    	});
    	//'server/routes/**/*.js' 一些服务器的脚本文件，做接口用的
    	//'server/app.js' 整个服务的启动入口文件
    	//这两个如果发生改变，都要重新启动服务器才能生效
    })

## 6. 当app这个原文件发生改变时，自动编译，并生成到server目录下 （tasks/browser.js文件） ##

需要安装 `gulp-util` 包

cnpm install gulp-util --save-dev

代码：

//app这个目录，是作为前端资源的原始文件的目录
    //server.js自动更新的时候，处理的是server/public下的文件
    
    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import gutil from 'gulp-util';
    import args from './util/args';
    
    gulp.task('browser',(cb)=>{
    	if(!args.watch) return cb();  //如果没有监听，返回回调
    
    	//监听app里js变化时调用scripts构建脚本（scripts.js），完成后es6转成es5或3,写到server目录下的文件里
    	gulp.watch('app/**/*.js',['scripts']);
    	//同理，监听app目录下的模板文件变化
    	gulp.watch('app/**/*.ejs',['pages']);
    	//同理，监听css
    	gulp.watch('app/**/*.css',['css']);
    });

## 7. 清空指定目录的文件（tasks/clean.js文件） ##

需要安装 `del` 包

cnpm install del --save-dev

代码：

//清空指定目录下的文件
    //app里的原文件是ES6的，但在server中（浏览器中）去运行，它就转换成ES5或ES3了，在这里，编译完后会有一个拷贝的过程，每次改变原文件，都会拷贝并去覆盖server里面的文件，为了安全起见，先清空目录，在拷贝进去
    import gulp from 'gulp';
    import del from 'del';//引入做删除动作的包
    import args from './util/args';
    
    gulp.task('clean',()=>{
    	return del(['server/public','server/views'])//清空这两个目录，这样每次重新拷贝过来就不会出现覆盖现象
    })

## 8. 处理顺序问题（tasks/build.js文件） ##

需要安装 `gulp-sequence` 包

cnpm install gulp-sequence --save-dev

代码：

//作用：将所有的任务都关联起来
    import gulp from 'gulp';
    import gulpSequence from 'gulp-sequence';//处理包之间的顺序问题
    
    gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
    //先是clean，清除server两个相关的目录（见clean.js），一定是放在最前面的
    //紧着着，将css拷过去（css），编译模板（pages），执行脚本（scripts）
    //['browser','serve'] 理解：这个数组一定是在最后的，而在数组里，browser一定是在serve前面的，serve一定是在最后面执行

## 9. tasks/default.js文件 ##

在命令行中，如果输入`gulp 脚本名` ，它就会去执行这个脚本，eg：`gulp scripts.js` 执行scripts.js  
但是，当只在命令行中输入`gulp` 时，它就会去找default.js文件并执行default任务

注：文件名可以不是default.js，但是，必须要有default这个任务！  
代码：

/*
    	在命令行中，如果只输入gulp后面不带任何参数，就会默认去找一个default的任务
    */
    
    import gulp from 'gulp';
    
    gulp.task('default',['build']); 
    //注：文件名可以不是default.js，但是，必须要有default这个任务！

## 10. 根目录下的gulpfile.babel.js文件 ##

需要安装 `require-dir` 包

cnpm install require-dev --save-dev

执行gulp命令，第一个去找的就是gulpfile.babel.js这个文件，通过这个文件去加载所有的脚本文件

代码：

//将所有的文件加载进来，运行，这里需要用到require-dir这个包 
    import requireDir from 'require-dir';
    
    requireDir('./tasks');//将tasks这个目录加载进来运行（所有的构建脚本都是放在tasks目录下的）

## 11.根目录下的 .babelrc文件 ##

需要安装 `babel-preset-es2015` 包

cnpm install babel-preset-es2015 --save-dev

这里只设置presets转换成es2015，如果项目要求要支持es3等，也是在这里设置

代码：

{
    	"presets": [
    		"es2015"
    	]
    }

到此为止，脚本文件已经编写完成，通过输入`gulp` 来测试还有没有遗漏的包没安装，或者其它什么问题

## 12. 编写app/views/index.ejs文件 ##

当html文件随便写点就行

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>es6</title>
    </head>
    <body>
    	<h1>the first ES6 project！</h1>
    </body>
    </html>

## 13. 输入`gulp --watch` 进行监听 ##

如果不加`--watch` ，那么所有的脚本就只会执行一次

在浏览器中输入 进行访问

解释：  
localhost：主机名，即本机，127.0.0.1  
3000： 服务器端口，因为前面服务器是用的express搭建的，而它默认的端口就是3000

出现以下画面，说明已将成功了  
![在这里插入图片描述][20180925171633753]

1.  实现热更新 （server/app.js文件）  
    在上面的基础上，如果改变app/views/index.ejs里的内容，在浏览器里面只有手动刷新以下才会改变，那么，怎么做到修改文件，保存之后浏览器立即自动刷新显示新的改变后的内容

解决：添加一行代码 `app.use(require('connect-livereload')());`  
![在这里插入图片描述][20180925155132369]  
注：必须写在箭头所指的第20行那排代码的后面  
另外：需要安装 `connect-livereload` 包

cnpm install connect-livereload --save-dev

[20180925171633753]: /images/20220510/216ffef6f6b74bfc99eb433424cfaf84.png
[20180925155132369]: /images/20220510/a79404cb5f3c4951bce573f0ac582bdf.png