https://github.com/zanseven007/generator-zyy-h5

A lovely H5 template
https://github.com/zanseven007/generator-zyy-h5

css3 gulp html5 js webpack

Last synced: 7 days ago
JSON representation

A lovely H5 template

• Host: GitHub
• URL: https://github.com/zanseven007/generator-zyy-h5
• Owner: zanseven007
• Created: 2016-09-10T07:52:30.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-26T13:31:58.000Z (over 6 years ago)
• Last Synced: 2024-10-31T23:31:43.181Z (14 days ago)
• Topics: css3, gulp, html5, js, webpack
• Language: JavaScript
• Homepage: https://github.com/zanseven007/generator-zyy-h5
• Size: 891 KB
• Stars: 23
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 基于webpack和gulp的H5小项目生成器

[English docs](https://github.com/zanseven007/generator-zyy-h5/blob/master/README_en.md)

> - H5 日益普及，为了方便日后开发的方便，特此写一个模板生成器为日后使用

> - 在HTML中支持使用 @@include 引入一个 .inc 文件

> - 在CSS文件中可以使用 scss 进行开发，发布时将小图片转换为base64格式

> - 预置了一些动画库和常用的动画逻辑代码，方便写出丝滑的动画

> - 在JS当中利用webpack合并了公共模块，可以有任意个入口文件,并区分生产和开发环境（开发环境不进行代码压缩，极大提高打包速度）

> - 开发时可自动启动 Chrome 浏览器，并且打开本地3000端口来调试

## 使用yoeman创建模板

安装 yo

```

[sudo] npm install -g yo

```

安装H5模板生成器

```

[sudo] npm install -g generator-zyy-h5

```

新建一个项目目录并进入

```

mkdir my-new-h5 && cd $_

```

使用H5模板，这个命令会自动安装依赖(npm install)，建议终止掉，然后使用 `cnpm` 或 `yarn` 来安装，因为速度飞快。

```

yo zyy-h5

```

## 使用模板

开发

```

gulp dev

```

发布(会压缩css和js，并增加md5)

```

gulp dist

```

## 可选参数

- `--html` 压缩 html 文件，发布线上需要时可以加上 `gulp dist --html`

## ISSUE

**node-sass安装失败解决办法**：因为在安装`node-sass`的时候它把github Releases里的文件都托管在`s3.amazonaws.com`上面，而这个网址在国内总是网络不稳定，所以推荐使用`cnpm`,`yarn`来安装我们的依赖，也可以通过淘宝镜像去下载这个文件。

直接运行下面的命令即可

```

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass  && npm install gulp-sass

```

## License

MIT © [zanseven007](https://github.com/zanseven007)