ES6 - gulp 构建运行环境 - 最详细篇章一
2021-12-28 本文已影响0人
黑木令
这篇文章主要讲解--构建脚本编码:
由于简书不能发布篇幅特别长的文章, 所以这里分为两部分来发布, 大家见谅。
首先我们下来看下配置文件的整体目录: 配置文件一共是 9 个。 各个文件所对应的功能下面有具体且详细的解释 。
如下图所示:
02-02.png
1. 定义参数: 对命令行参数解析
1.1 配置文件在 tasks/util/args.js 文件中
1. 引入 'yargs'
1. 处理命令行参数 npm 包: import yargs from 'yargs'
2. 为了识别在命令行输入的 命令。
2. 定义基本参数:
1. 区分开发环境与线上环境
1. option: 用来配置参数, 用来区分命令行输入的是否有这个参数, 进而用来区分线上与开发环境 。
1.2 代码如下:
/**
定义参数: 对命令行参数解析
1. 区分开发环境和线上环境
*/
import yargs from 'yargs';
const args = yargs
// option: 用来配置参数, 用来区分命令行输入的是否有这个参数, 进而用来区分线上环境与开发环境 。
.option('production', {
boolean: true, // 说明这个 production 选项是 bool 类型
default: false, // 设置 production 选项的默认值 (也就是命令行中没有输入 production 这个选项, 默认为 false, 开发环境 。 )
describe: '信息描述' // 描述信息, 机器一般不会去识别
}) // 我们敲命令行时, 会有选项部分: gulp -production -> -production 就是他的选项部分 。
// 输入的参数, 是否用来监听开发环境中文件的修改, 并自动编译。
.option('watch', {
boolean: true,
default: false,
describe: '信息描述'
})
// 是否要详细的输出命令行执行的日志
.option('verbos', {
boolean: true,
default: false,
describe: '信息描述: 日志输出'
})
// 关于映射的内容
.option('sourcemaps', {
describe: '信息描述: 强制生成 sourcemaps'
})
// 启动服务器的端口号设置
.option('port', {
string: true, // 默认是字符串类型
default: 8080, // 默认端口号
describe: '信息描述: 设置端口号'
})
.argv // 标识对输入的命令行内容以字符串的形式解析
export default args
2. 对 .JS 做处理 (tasks/scripts.js)
1. 需要引入的包:
1. 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
2. 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
3. 'gulp-concat' // 在 gulp 语句中处理文件拼接的 。
4. 'webpack' // 项目打包的过程是用的是 webpack 。
5. "webpack-stream"; // webpack 的处理是结合 webpack-stream 一起来做处理的 。
6. 'vinyl-named' // 对文件重命名的做标志的
7. gulp-livereload // 热更新包
8. gulp-plumber // 处理文件信息流的包
9. gulp-rename // 文件重命名的包
9. gulp-uglify // 处理 JS / CSS 压缩的一个包
10. gulp-util // 在命令行工具输出的包
11. args.js // 上面写好的对命令行参数解析
2. 安装上面所需的包 <如果自己配置时, 注意插件版本>
1. cnpm install gulp@3.9.1 gulp-if@2.0.2 gulp-concat@2.6.1 webpack@2.2.1 webpack-stream@3.2.0 vinyl-named@1.1.0 gulp-livereload@3.8.1 gulp-plumber@1.1.0 gulp-rename@1.1.0 gulp-uglify@2.1.0 gulp-util@3.0.8 yargs@7.0.2 --save-dev
1. --save-dev: 表示除了需要将这些包安装以外, 还要在 package.json 这个文件中创建一个安装包依赖的一些字段 。
代码如下:
// 创建构建脚本: 对 JS 做处理 。
/**
1. 引入 npm 包
1. gulp
*/
import gulp from 'gulp' // gulp 处理的都是文件流, 它是基于 stream 的 。
import gulpif from 'gulp-if' // gulpif 是在 gulp 的语句做 if 判断的 。
import concat from 'gulp-concat' // 在 gulp 语句中处理文件拼接的 。
import webpack from 'webpack' // 项目打包的过程是用的是 webpack 。
import gulpwebpack from "webpack-stream"; // webpack 的处理是结合 webpack-stream 一起来做处理的 。
import named from 'vinyl-named' // 对文件重命名的做标志的
/**
2. 浏览器在文件修改之后自动刷新的功能: 我们需要热更新的一个包
*/
import livereload from 'gulp-livereload'
/**
3. 处理文件信息流的包:
*/
import plumber from 'gulp-plumber'
/**
4. 对文件重命名的一个包
*/
import rename from 'gulp-rename'
/**
5. 压缩 JS 使用的包: 用来处理 JS / CSS 压缩的一个包
*/
import uglify from 'gulp-uglify'
/**
6. 在命令行工具输出的包:
*/
import {logo, colors} from 'gulp-util'
/**
7.
对命令行参数解析
*/
import args from './util/args.js'
/**
--save-dev: 标识文件除了安装以外, 还要在 package.json 文件中创建一个安装包依赖的一些字段
*/
/**
1. 创建 gulp 脚本编译任务
1. task 是 gulp 的一个 API , 用来创建任务
2. scripts 是 创建任务的名称
*/
gulp.task('scripts', () => {
// 任务执行的主题
return gulp.src(['app/js/index.js']) // app/js/index.js 打开当前目录
// 改变默认处理错误的机制, 集中处理脚本编译过程中出现的错误 。
.pipe(plumber({
errorHandler:function() {
}
}))
// 对文件重新命名
.pipe(named())
// 对 JS 进行编译 (这个时候借用 webpack 的功能)
.pipe(gulpwebpack({
// webpack-module: 模块
module:{
loaders: [{
// 遇到 js 文件, 使用 babel 去处理
test: /\.js$/,
loader: 'babel'
}]
}
}), null, (err, stats) => {
log(`finihed '${colors.cyan('scripts')}'`, stats.toString({
chunks: false
}))
})
// 文件存放位置的设置 (将文件放入指定的路径) (问什么将文件放在 server 文件中: 因为 server 需要拿到最新的编译好的 js 文件才能够跑起来)
.pipe(gulp.dest('server/public/js'))
// 编译压缩的功能
.pipe(rename({
// 相当于将之前的文件复制了一份, 名字为: cp.min.js
basename: 'cp',
extname: '.min.js'
}))
.pipe(uglify({
// 配置如何压缩
compress: {
properties: false
},
output: {
'quote_keys': true
}
}))
// 将文件真正的存储到某个地方去
.pipe(gulp.dest('server/public/js'))
// 监听文件: 使用 gulpif 去判断, 然后在执行 livereload
.pipe(gulpif(args.watch, livereload()))
})
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端ES6基础” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
