本篇文章承接上一篇文章 <ES6 - gulp 构建运行环境 - 最详细篇章一>
3. 处理 .egs 模板的构建脚本 (tasks/pages.js)
/**
* 处理 .egs 模板的构建脚本:
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpif from 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
import livereload from 'gulp-livereload' // 热更新的一个包 。
import args from './util/args.js' // 对命令行参数解析
// 创建任务
gulp.task('pages', () => {
// gulp 的所有任务创建, 都需要打开一个文件
return gulp.src('app/**/*.ejs') // **/* : 打开 app 文件夹下的所有 .egs 文件 (app 下各个嵌套的 .egs 文件)
// 将 app 下的所有 .egs 模板文件原封不动的拷贝到一个地方
.pipe(gulp.dest('server'))
// 热更新 监听
.pipe(gulpif(args.watch, livereload()))
})
4. 处理 css 的构建脚本 (tasks/css.js)
/**
* 处理 css 的构建脚本:
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpif from 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
// import liveserver from 'gulp-live-server' // 能够启动服务器的包
import livereload from 'gulp-livereload' // 热更新的一个包 。
import args from './util/args.js' // 对命令行参数解析
// 创建任务
gulp.task('css', () => {
// gulp 的所有任务创建, 都需要打开一个文件
return gulp.src('app/**/*.css') // **/* : 打开 app 文件夹下的所有 .egs 文件 (app 下各个嵌套的 .egs 文件)
// 将 app 下的所有 .css 模板文件原封不动的拷贝到一个地方
.pipe(gulp.dest('server/public'))
// // 热更新 监听 (根据项目需求决定是否需要热更新 CSS)
// .pipe(gulpif(args.watch, livereload()))
})
5. 处理 服务器 的构建脚本 (tasks/server.js)
/**
* 处理 服务器 的构建脚本:
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpif from 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
import liveserver from 'gulp-live-server' // 能够启动服务器的包
import args from './util/args.js' // 对命令行参数解析
gulp.task('server', (cb) => { // 箭头函数传入回调 cb
// 如果不是处于监听状态下, 我们就直接返回回调函数 cb
if(!args.watch) return cb()
// 如果是处于监听状态下, 我们就创建一个服务器
var server = liveserver.new(['--harmony', 'server/bin/www']) // --harmony: 表示要在当前命令行下去执行这个脚本; server/bin/www: 这个是一个脚本 。
// 启动服务器
server.start()
// 我们构建脚本的目的不是单纯的只为了启动服务器, 而是包含了服务器下面所有的文件, 包括 CSS 、 JS 、 .egs 模板 发生改变的时候要实现热更新; 所以我们要监听 server 目录下的所有 .JS 、 .egs 模板 。
// 实现 浏览器热更新:
// gulp.watch(): 做文件监听, 监听的是一个数组, 表示需要监听那些路径
gulp.watch(['server/public/**/*.js', 'server/views/**/*.ejs'], function(file) {
// 将文件改动告诉服务器(通知服务器去实现相应的功能)
server.notify.apply(server, [file])
})
// 监听需要重启服务的文件 (当服务器中的某些路由发生改变, 某些接口发生变化, 这个时候刷新浏览器是不行的, 而是需要 server 重启才能生效)
gulp.watch(['server/routes/**/*.js', 'server/app.js'], function() {
server.start.bind(server)()
});
})
6. 清空任务在 (tasks/clean.js)
/**
* 清空任务在
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import del from 'del' // 删除动作的包
import args from './util/args.js' // 对命令行参数解析
// 创建任务: 清空两个目录
gulp.task('clean', () => {
// 清空 server/public 下的 js/css 。
// 清空 server/views 下的 ejs 模板 。
return del(['server/public', 'server/views'])
})
7. 实现文件自动变编译最后一个环节 (tasks/browser.js)
/**
* 实现文件自动变编译最后一个环节
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpif from 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
import gutil from 'gulp-util' // gulp 常用工具包: 函数集合
import liveserver from 'gulp-live-server' // 能够启动服务器的包
import args from './util/args.js' // 对命令行参数解析
// 创建任务
gulp.task('browser', (cb) => {
// 如果没有 watch 监听, 就返回回调 cb
if(!args.watch) {
return cb()
}
// 监听 app 源目录下的 js 发生变化时的操作: 启动 tasks/scripts.js 任务脚本 (意思也就是当 app 目录下的 js 内容发生改变时, 会调用 scripts 任务脚本)
gulp.watch('app/**/*.js', ['scripts'])
// 监听 app 源目录下的 ejs 模板文件发生变化时的操作: 启动 tasks/pages.js 任务脚本
gulp.watch('app/**/*.ejs', ['pages'])
// 监听 app 源目录下的 css 发生变化时的操作: 启动 tasks/css.js 任务脚本
gulp.watch('app/**/*.css', ['css'])
/**
* 截止到上面的代码, 所有和任务相关的内容(单个任务)已经 做完了 。
* 1. 此时我们已经完成了 'browser' 与 'scripts、pages、css' 这个三个任务之间的关联关系;
* 2. 此时我们执行 browser 任务, 其实它只完成了文件的监听, 但是 启动服务 等等 我们要如何实现, 我们也不想再去单独执行一个 serveer 的命令, 然后再去执行 'browser' 这个, 这还是不能实现完全自动化 。
* 3. 我们要实现的就是将这些任务关联起来, 只执行一个命令让这些所有的脚本能够完全运行, 实现自动化 。
*
*
*
* 下面就是实现如何让这些任务自动的跑起来(即各个任务如何关联):
* 1. 在所有的任务进行自动创建的时候, 我们需要一个任务: '清空'
* 1. 清空是指清空指定文件的任务 。
* 1. app 前端原生文件存放的是 ES6 的代码, 最后到 server 目录下也就是在浏览器中运行的代码内容, server 目录下的代码已经是处理过的代码也就是 ES5/ES3 的代码;
* 2. server目录下这里有一个过程: 编译完成的代码有一个拷贝的过程 。
* 3. 当我们每次修改完成 app 目录下的内容时, 我们就需要覆盖 server 目录下对应的文件, 为了安全起见我们在每次生成重新拷贝时候我们需要把 server 目录下对应的文件清空;
* 4. 此时我们需要一个清空指定目录文件的任务 。
* 2. 清空任务在 tasks/clean.js 文件中
*/
})
8. 任务都串联起来 (tasks/build.js)
/**
* 为了把所有的任务都串联起来: 哪个任务在前那个任务在后, 谁依赖谁, 我们需要梳理清楚
*
* 下面再说 build.js 与默认的 default.js 有什么关联
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpSequence from 'gulp-sequence' // 用来处理包的顺序问题
// 创建任务
// 注意: server 一定是放在最后面执行
gulp.task('build', gulpSequence('clean', 'css', 'pages', 'scripts', ['browser', 'server']))
9. 默认入口文件 (tasks/css.js)
/**
* 在执行 gulp 命令时, 如果不是 gulp XXX 文件, 那么它就会默认执行 default.js 文件
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
// 创建任务
gulp.task('default', ['build'])
10. 环境配置成功之后我们运行gulp命令: gulp --watch, 就可以在我们的浏览器中正常解析 ES6 语法了 。
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端ES6基础” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
网友评论