[万字详解，学习案例] 使用 gulp 去进行自动化构建一个项目

[万字详解，学习案例] 使用 gulp 去进行自动化构建一个项目 样式编译 脚本编译页面模板编译创建组合任务图片和字体文件转换 其他文件及文件清除 自动加载插件开发服务器监视变化以及构建优化 文件引用处理文件压缩重新规划构建过程 运行重构项目

关于 gulp 的更细致的讲解，可以参考上文：逐步详解如何使用 gulp 去进行自动化构建。不看问题也不大，都是手把手地实现，也会带注释。

分析需求

做任何项目或者是实现功能的第一步，都是分析需求

已知项目的结构如下：

其中：

，html 文件，存在模板引擎内容，需要被编译

，html 文件，存在模板引擎内容，需要被编译

这样就是一个网页项目打包的需求了，有了需求，接下来就一步步的去实现内容即可。

构建项目 准备工作 下载 gulp

第一步先下载并安装 gulp：

yarn add gulp --dev

新建 .js

在 gulp 安装完成后，在根目录下新建一个 .js，作为 gulp 操作的入口。

所有建立的函数都会做为私有函数的方式进行实现，然后将需要被导出的函数统一通过 . 实现，语法大致如下：

const privateFunc = () => {};const noExport = () => {};// 只有这一个函数会被导出
const exportFunc = () => {};module.exports = { exportFunc };

引入所需要的函数

const { src, dest } = require('gulp');

其中，src 会作为文件的写入流，dest 会作为文件的写出流。

样式编译 样式文件的 io

读取 src// 所有的文件，再写出到 dist 目录下同样的位置。

实现代码如下：

// 样式编译
const style = () => {// base 的作用是为了保留项目结构，不将所有的文件全都写入到 dist 文件夹下return src('src/assets/styles/*.scss', { base: 'src' }).pipe(dest('dist'));
};module.exports = {style,
};

此时在命令行运行样式的编译命令：

gulp-sample> yarn gulp style

写出的结果就生成了：

样式文件的编译

基础的 IO 实现了，现在就开始实现将 scss 转译为 css 的功能，这个功能的视线需要借助插件来完成，所以先安装插件：

gulp-sample> yarn add gulp-sass --dev

介入 gulp-sass 的使用，大部分 gulp-插件 的使用都是通过 pipe 函数，在写入流之前实现。并且大部分的提供的功能是函数，直接调用即可。

// 新增引用
const sass = require('gulp-sass');// 样式编译
const style = () => {return (src('src/assets/styles/*.scss', { base: 'src' })// 通过 pipe 使用 sass 功能// outputStyle 用于展开花括号，使得编写更加流程化.pipe(sass({ outputStyle: 'expanded' })).pipe(dest('dist')));
};

再次运行编译后得出的项目结构如下：

可以注意到有以下 2 个问题：

多余的 scss 文件没有被清理掉

这是因为目前还没有完成清理部分的代码，这个在后面会实现，先暂时手动删除掉多余的文件

只有一个 main.css 文件被编译了

这并不是什么错误，根据 Stack 有个提问：

Why put in front of the file name “” or “” in scss/css?

其中的答复说到：

The _ () is a for scss. That means the its going to be (@) to a main i.e. .scss. The on using is that you can use many files to your code and will be on a file.

大概意思是说，_.scss 文件是部分内容，用于分开处理不同的逻辑，使用时通过 @ 导入。最终会被编译进一个 css 文件。

所以暂时先将多余的 scss 文件删除掉，编译后获得一个干净的目录：

脚本编译

脚本的任务也需要新增一个函数去执行，这样可以比较好的拆分组件功能。文件的 io 上一步在 样式编译 部分已经实现了，这里就直接先下载所需的插件，然后进行功能的实现。

目前来说对于 babel 的配置都是非常简单的，比较复杂的业务需求建议还是通过新建一个 . 文件，然后在配置文件中实现

页面模板编译

为了能够实现页面最大的可复用程度，在 HTML 文件中使用了一些模板引擎，如：

单独打开这个页面是无法获得正确被渲染，因此在 gulp 中也要处理一下模板引擎的内容。

至此，主体内容就已经编译完成了

创建组合任务

日常来说，, CSS 和 HTML 的编译都是放在一起的，因此可以新建一个组合子任务去将三个任务组合在一起。

实现：

const { src, dest, parallel } = require('gulp');const compile = parallel(style, script, page);module.exports = {compile,
};

这样就可以直接通过运行 去完成组合任务了：

gulp-sample> yarn gulp compile
[03:33:59] Using gulpfile C:\assignment\front\lagoufed-e-task\part2\fed-e-task-02-01\code\gulp-sample\gulpfile.js
[03:33:59] Starting 'compile'...
[03:33:59] Starting 'style'...
[03:33:59] Starting 'script'...
[03:33:59] Starting 'page'...
[03:34:01] Finished 'script' after 1.78 s
[03:34:01] Finished 'page' after 1.79 s
[03:34:01] Finished 'style' after 1.79 s
[03:34:01] Finished 'compile' after 1.8 s
Done in 4.24s.

可以看到，在调用了 任务之后， 分别调用了 style, 和 page 去分别进行编译任务

图片和字体文件转换

老规矩，安装插件，实现功能，和运行结果

图片的压缩 字体的压缩

字体压缩的函数和图片压缩是一样的，这里主要是针对 SVG 进行压缩。

最终结果：

可以看到 fonts 和 都被拷贝到了 dist 目录中去

这时候只需要做一下最后的清理，将 image 和 font 任务加到 中去即可：

const compile = parallel(style, script, page, image, font);module.exports = {compile,
};

其他文件及文件清除 添加其他文件

其他文件指的是将 中的文件复制黏贴到 dist 目录下中，并且结合一下 ，生成一个新的组合任务。

最终结果：

可以看到这是后多出了一个 .ico，这是从 文件夹下复制进来的。

文件清除

这里也会用到一个额外的依赖包：del，所以依旧老步骤走起。

自动加载插件

伴随着功能的实现，现在使用的插件也越来越多。如果都是通过 去进行调用的话，那么无疑对后期的管理会有一定的难度。

这里又有一个插件，可以提供对插件引入的管理：gulp-load-

这时候在终端运行一下，效果和之前的是一样的

开发服务器

也就是很多的脚手架会封装的热更新功能，这里依旧会用到另外的插件——-sync。

至此，热更新的功能就实现了，下一步要实现的就是一旦 src 目录下的文件被修改了，那么就会自动部署，即，热部署。

监视变化以及构建优化 监视变化，热部署

这里会使用 gulp 自带的函数，watch 去实现

对文件的修改会触发对应的任务，从而完成从热更新到热部署的实现。

注：一定要确认 swig 中的 cache 是否设置为 false，如果文件被 swig 缓存了，出于性能的考虑，并不会即时的进行热部署

构建优化

日常开发中对于图片、字体和静态文件的压缩处理需求不是很大，这些更多的是在部署的时候能够减少网页大小而进行的优化作用。对此，可以进行以下的优化：

减少图片、字体压缩引起的编译

// 会调用写好的函数，因此要放在函数声明的后面
const serve = () => {// 监听所有的文件变化，都是之前写过的函数watch('src/assets/styles/*.scss', style);watch('src/assets/scripts/*.js', script);watch('src/*.html', page);// 图片，字体和 public 的更新不会引起重新编译，只会重新加载页面watch(["src/assets/images/**", "src/assets/fonts/**", "public/**"],bs.reload);bs.init({server: {// baseDir会接受一个数组，具体作用就是在，当文件在较先的index中找不到，会向后顺延，寻找指定的文件// 这就代表，在开发阶段中，图片和字体可以不需要在dist中打包，可以在src中直接寻找，可以借此提高构建效率baseDir: ['dist', 'src', 'public'],routes: {'/node_modules': 'node_modules',},},...});
};

再构筑一个任务，组合 和 serve

这是因为对于没有打包过的项目，直接运行寻找 dist 下的文件，即使不会报错(dist 不起作用)，所获得的文件也是未编译的(跳过 dist 直接到 src 中寻找)。

因此这种情况下可以重新组合一个开发用的命令，按序执行 和 serve 即可

// 开发用的任务
const develop = series(compile, serve);module.exports = {build,develop,
};

重构一下 build 任务

之前的 build 任务只用 和 extra，现在可以把 image 及 font 也加上去

// 上线用的任务
// 三次组合，先用 series 进行对 dist 的删除，再调用 parallel 去分别执行任务
// parallel 拆分的任务是为了分离 compile 和 其他的 的业务逻辑
const build = series(clean, parallel(compile, image, font, extra));

文件引用处理

也是一个插件，可以处理针对 的引用问题。

这是源文件中写入的注释：

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" />


<link rel="stylesheet" href="assets/styles/main.css" />



<script src="/node_modules/jquery/dist/jquery.js">script>
<script src="/node_modules/popper.js/dist/umd/popper.js">script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js">script>


<script src="assets/scripts/main.js">script>

重点是就是开闭标签中标记的 build:css 和 build:js 的内容，这可以使用 去动态地读取引用到的文件，并且以指定的名称，如：.css，写入指定的文件夹中，如 /。

文件压缩

现在就需要压缩 html, css 和 了，这也需要分别使用不同的依赖包去完成

重新规划构建过程

此时的文件结构就产生了一些问题，因为 dist 中应当保存的是上线的文件，但是现在压缩过应该上线的文件，却保存在了 temp 文件夹中。

针对这个问题，应该将 dist 的存储和 temp 的存储进行调换——即将编译好的文件保存在 temp 文件夹中，压缩之后再存入 dist 中。

重构项目步骤

这一步需要改写的函数包括：

运行重构项目

gulp-sample> yarn gulp build
[11:48:47] Starting 'build'...
[11:48:47] Starting 'clean'...
[11:48:47] Finished 'clean' after 11 ms
[11:48:47] Starting 'image'...
[11:48:47] Starting 'font'...
[11:48:47] Starting 'extra'...
[11:48:47] Starting 'style'...
[11:48:47] Starting 'script'...
[11:48:47] Starting 'page'...
[11:48:47] Starting 'image'...
[11:48:47] Starting 'font'...
[11:48:51] Finished 'extra' after 4.33 s
[11:48:51] Finished 'script' after 4.02 s
[11:48:51] Finished 'page' after 4.02 s
[11:48:51] Finished 'style' after 4.03 s
[11:48:51] gulp-imagemin: Minified 1 image (saved 693 B - 6%)
[11:48:51] gulp-imagemin: Minified 1 image (saved 693 B - 6%)
[11:48:51] Finished 'font' after 4.04 s
[11:48:51] Finished 'font' after 4.39 s
[11:48:51] gulp-imagemin: Minified 2 images (saved 23.1 kB - 26.7%)
[11:48:51] Finished 'image' after 4.27 s
[11:48:51] Starting 'useref'...
[11:48:52] gulp-imagemin: Minified 2 images (saved 23.1 kB - 26.7%)
[11:48:53] Finished 'image' after 5.93 s
[11:49:01] Finished 'useref' after 9.9 s
[11:49:01] Finished 'build' after 15 s
Done in 16.93s.

这里跟着[]和[]逻辑走一遍的话，也能发现运行过程是这样一个流程：

文件夹结构的对比：

这里也能够比较明显的看到，temp 文件夹中只有需要编译的文件，而 dist 的文件夹下是一个完整的、可以直接运行的项目结构

至此，一个完整的构建过程就完成了