JSPM

  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q41710F
  • License MIT

基于Webpack的H5项目目录快速生成器

Package Exports

  • generator-zyy-h5

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (generator-zyy-h5) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

English docs

  • 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),建议终止掉,然后使用 cnpmyarn 来安装,因为速度飞快。

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