QGWeb, 一个简单的gulp 3模板项目, 可以快速将gulp融入到新项目的工作流, 以构建你的个人网站, 如企业展示网站, 官网, 个人博客等.
项目运作的最简流程:
npm installnpm run dev
gulp 使用项目中的gulpfile.babel.js作打包流程的配置. 项目中将其分割成JS文件存放在gulpfile文件夹中, ./make.js负责将这些task文件按顺序打包成一个文件, 使用方式如下:
node make
// 或者使用下 npm script 也可以
npm run dev
当然, 在 npm scripts 中集成了监听 gulpfile 文件变动, 自动重新执行./make.js文件的指令:
npm run watch_make
所有前端资源文件都集中存放在resources文件夹中, 经由gulp打包到dist目录.
dist目录没有添加到.gitignore文件中, 这意味着项目上线时你可以本地打包生成dist然后由服务端拉取, 或直接由服务器端打包.
此外, 还有.tmp作为中间文件夹, 此目录不会被git跟踪.
普通文件将会打包至dist/css目录, 其中.less文件会先被编译为.css文件.
css/nano文件夹中引入了类Atom CSS写法, 已方便写出 .fl { float: left } .fs20 { font-size: 20px } 等写法.
util/*.js即工具库或类库, 通常下载下来已是混淆压缩后的代码, 所以这些JS不会经由Gulp处理.
view/logic/*.js存放与页面联系紧密的业务代码, 此类JS将会经过Babel编码及代码混淆等操作.
已打开的图片压缩配置选项:
- 隔行扫描gif进行渲染
- 无损压缩jpg图片
- 去除SVG中冗余的ID等信息
项目中, HTML被拆分成为了许多个逻辑碎片, views目录中, 主目录存放着每一个页面的主要构成, 可以从项目自带的@standard文件一览:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 主要用来存放公共的头部文件 -->
@@include('./views/comm/head-withJS.html')
</head>
<body>
<!-- 页眉 -->
@@include('./views/comm/header.html')
<!-- 页脚 -->
@@include('./views/comm/footer.html')
</body>
<!-- 通用逻辑 -->
<script src="./js/comm.js"></script>
</html>
由于官网部分页面走的是SSR, 所以HTML打包需要经过特殊处理.
由于没有搭建前端服务器, 所以页面仍然需要前端写完再交由后端进行模板替换这种低效的操作, 此页面下简称为"模板HTML".
模板HTML在任务中以standardHTMLTemplates变量标出, 打包时将输出至dist/template目录, 由于页面携带header.html\footer.html等对于后端而言的冗余信息, 所以打包时, 同时将一份真实页面逻辑(即views/content文件夹下的HTML文件)存放至dist/template/content.
后端拉去代码之后, 将dist/template/content固存至相应的后端目录, 如果较之前文件有更新, 则重新编写模板文件. 编写模板文件之后, 需要使用正则替换, 将这段模板替换掉dist/template下完整的HTML对应的body-con真实页面逻辑部分.
除了代码以外的东西都应该放在这个task中处理, 比如Robot.txt
在AlloyTeam制作的Eslint规范上做了修改, 以方便针对VSCode做到复制黏贴即用的方便.
去除注释, 修改了一些规则, VSCode会在代码规范的下划线中提示对应的格式要求. 可根据团队或是个人使用再eslint.json有针对性地修改:
此外, 再VSCode中使用ESLint, 推荐将JS,HTML等相关文件后缀加入校验, 在VSCode地设置中可以直接对ESLint.Validate进行修改:
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
]