# gulper

**Repository Path**: tmpl666/gulper

## Basic Information

- **Project Name**: gulper
- **Description**: 基于gulp的多页面应用模块化构建工具
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://lishaoqun.gitee.io/gulper/view/home/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2018-10-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 开发环境
- nodejs：[https://nodejs.org/en/](https://nodejs.org/en/) （nodejs推荐安装`Recommended For Most Users`版本）
- cnpm：[https://npm.taobao.org/](https://npm.taobao.org/) （淘宝NPM镜像）

## 安装全局依赖
`cnpm install rimraf yarn gulp gulp-cli npm-check -g`

## cnpm设置成全局下载镜像站点
- 命令行设置：`npm config set registry https://registry.npm.taobao.org`
- 检测是否成功：`npm config get registry`

## 如何运行
- 初始化工程：`yarn` 或 `cnpm i`（i = install 推荐，确保依赖包最新）
- 开发启动：`yarn start` 或 `npm run start`
- 编译产品：`yarn build` 或 `npm run build`

## yarn安装模块
```
yarn add <package> --dev
```

## 功能一览
- html模块化开发
- html、ejs 编译
- less 编译
- CSS合并压缩
- CSS prefix，px转rem
- JS合并压缩
- JS支持ES6语法
- JS语法检查jshint
- 文件内联，自定义图片转base64
- 图片压缩
- 字体压缩
- 文件MD5戳
- 根据打包环境构建代码
- 多端同步调试
- 支持雪碧图生成
- 支持zip一键备份
- 支持ftp代码发布

## 工具技术
- JS类库：[jQuery](http://jquery.com/)
- 网络请求：[Fetch API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)
- 构建工具：[gulp](http://www.gulpjs.com.cn/)
- 包管理工具：[yarn](https://yarnpkg.com/zh-Hans/) 或 [cnpm](https://npm.taobao.org/)
- CSS预处理器：[less](http://lesscss.cn/)
- 字体图标：[iconfont](http://www.iconfont.cn/)
- 模版工具：[art-template](https://aui.github.io/art-template/zh-cn/index.html)
- CDN加速服务：[BootCDN](http://www.bootcdn.cn/)
- JS加密算法库：[Crypto-JS](https://www.npmjs.com/package/crypto-js)
- 服务器：[Nginx](http://nginx.org/en/)
- 命令行工具：[Cmder](http://cmder.net/)
- 浏览器同步测试工具：[Browsersync](http://www.browsersync.cn/)
- 页面性能检测工具：[Lighthouse](https://github.com/GoogleChrome/lighthouse)

## Gitee Pages
[https://lishaoqun.gitee.io/gulper/view/home/index.html](https://lishaoqun.gitee.io/gulper/view/home/index.html)

## 前端代码规范
- [Auto.io](https://guide.aotu.io/)

## 技术方案
- jquery.js + ajax
- jquery.slim.js + fetch （Slim：瘦身版本，移除了ajax、effects等功能）

## 移动端调试
- [vConsole](https://github.com/Tencent/vConsole)
```
<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>
```
- [Eruda](https://github.com/liriliri/eruda)
```
<script src="http://eruda.liriliri.io/eruda.min.js"></script>
<script>eruda.init();</script>
```

## ES6重写gulpfile
- [http://www.tuicool.com/articles/QvIfa2Y](http://www.tuicool.com/articles/QvIfa2Y)
- [https://github.com/wangchi/using-es6-with-gulp](https://github.com/wangchi/using-es6-with-gulp)

## vh、vw、vmin、vmax单位
```
vw：是Viewport’s width的简写，1vw等于window.innerWidth的1%
浏览器的视口的宽、高被分为100分，1vh相当于浏览器高度的百分之一，即浏览器的高度为800px，则1vh=8px。vm宽度同理。

vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。
如果浏览器设置为1100px宽、700px高，1vmin会是7px，1vmax为11px。
如果浏览器设置为800px宽、1080px高，1vmin会是8px，1vmax为10.8px。
```

## CSS命名空间规范
- 布局：以 `g` 为命名空间，例如：g-wrap、g-header、g-content
- 状态：以 `s` 为命名空间，表示动态的、具有交互性质的状态，例如：s-current、s-selected
- 工具：以 `u` 为命名空间，表示不耦合业务逻辑的、可复用的工具，例如：u-clearfix、u-ellipsis
- 组件：以 `m` 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-swipe
- 钩子：以 `j` 为命名空间，表示特定给js调用的类名，例如：j-request、j-open

## 相关链接
- [npm包黑名单](https://github.com/gulpjs/plugins/blob/master/src/blackList.json)
- [你不需要jQuery](http://www.webhek.com/post/you-do-not-need-jquery.html)
- [gulp task任务分离](http://macr.ae/article/splitting-gulpfile-multiple-files.html)
- [常用插件介绍及使用](https://blog.csdn.net/qq_27626333/article/details/78006271)

## 多页面模块化开发
在2.0.0版本之前，由于html和css放在不同文件夹下进行开发，导致文件过于分散不易查找，开发的时候经常需要在不同文件夹下来回切换，给开发和维护造成极大麻烦。由于深受react模块化开发模式的影响，因此将该模式运用在该项目中，改进之后，层次更加清晰，文件更加容易查找，一定程度上也提升了项目开发规范性。

## [更新日志](CHANGELOG.md)