Gulp 前端自动化工作流

发表于 更新于 分类于 阅读次数：
本文字数： 1.5k 阅读时长 ≈ 1 分钟

初识 Gulp 是因为公司项目逐渐需要进行前后端分离，既然脱离了世界上最好的语言 PHP 后，也就没了 include 函数的支持，面临最大的问题就是页面 header 、 footer 等一些公用部分的代码要怎么在每个页面上引用，手动复制肯定不行。

在网上搜寻一番后，发现了 gulp-file-include 这个插件，后面的故事，就像每个热恋中的人一样，恨不得每天都和 Gulp 腻在一起。

经过半年的相处，也大概摸透了 Gulp 的一些习性，并根据工作上的流程，整理了一套公司内部的前端自动化部署的开发环境。

该项目有较大更新，建议结合《gulp-automation 升级小记》阅读

本文不是 Gulp 的使用介绍，关于 Gulp 入门，请自行学习。

gulp-automation

少罗嗦，先看东西

如何使用

准备工作

  1. 安装 Node.js
  2. 安装 Yarn
  3. 安装 Gulp
  4. 安装 Ruby
  5. 安装 Compass

安装

首先将 gulp-automation 下载到本地，下载好后推荐使用 Yarn 安装

1
$ yarn install

运行

1
$ gulp

成功运行后，会自动打开浏览器并访问 http://localhost:3000 页面

编写代码

原始页面全部在 page 目录下编写。打开 page 目录会看到有一个 index.html 页面

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引用公用页面采用以下方式 -->
    @@include('include/head.html')
</head>
<body>
    <h1>Test Page !</h1>
    <div class="test-img"></div>
    <script src="@@webRoot/static/js/main.js" charset="utf-8"></script>
</body>
</html>

可以看到，和正常写 HTML 代码没什么区别。对于公用代码的引用，通过这样语法进行引用

1
@@include('<页面地址>')

这里其实就是用到了 gulp-file-include ，更多语法参数点 这里 查看！

通过上面可得知，page/include/ 是用来存放公用部分的代码的。

这时候可能又会遇到一个问题，不是所有网站的页面都存放在根目录下的，可能会按照功能模块的不同，划分出不同的文件夹来存放不同的页面，比如我们经常会看到这样的链接：

网站首页存放在根目录，新闻相关页面存放在 news 文件夹下，产品相关页面存放在 product 文件夹下。

这里我的做法是把所有模块都放到 page/module/ 目录下，打开目录就可以看到一个 banner 文件夹，你可以在这个目录下随意创建其它模块文件夹。

发布/打包

发布

1
$ gulp build

发布并打包

1
$ gulp build --z
  • 修改 package.json 里的 name 参数，可改变打包出来压缩包文件的命名
  • 打包时使用了 gulp-tinypng-nokey 插件进行图片压缩，需要将图片上传到服务器压缩后再下载，请确保打包时网络畅通

参考