前端h5脚手架 🚌
安装
需要 Npm 和 Node 环境
npm install xmly -g
使用
// 生成h5脚手架xmly init
案例
├── dev
│ ├── css
│ │ ├── public.css
│ │ ├── reset.css
│ │ └── style.css
│ ├── js
│ │ ├── lib
│ │ │ ├── jquery.min.js
│ │ │ └── jquerySuperSlide.js
│ │ ├── page.js
│ │ └── index.js
│ ├── scss
│ │ ├── icon.scss
│ │ ├── public.scss
│ │ └── style.scss
│ └── images
├── release
│ ├── css
│ | └── style.min.css
│ ├── js
│ | └── page.min.js
│ └── images
│ └── ...
├── tool
│ ├── gulpfile.js
│ ├── package.json
│ └── scss.handlebars
├── index.html
└── xmly.config.js
解析
dev 和 release
区分为两个环境:
- dev 环境
- css文件夹不管,包含reset.css
- scss文件主要是开发时候用的(style为自定义,public为公共,icon为图标)
- js文件(lib下为默认的jquery和superslide插件,page为默认的计算rem,可以根据设计稿自定义,index为自定义交互文件)
- release 环境
- 构建为3个文件 (css,js,images)
tool
基于gulp打包构建的文件
cd toolnpm installnpm run start
执行以上即可开启3000端口服务器,修改dev相关文件会触发热加载
index.html
初始化的页面,引入release打包压缩的文件(直接生产目录获取)
xmly.config.js
gulp的配置文件
imagemin
image图片压缩处理任务
sass
sass编译
jsconcat
js压缩合并
spritesmith
自动化雪碧图任务
cssmin
css压缩任务处理
browserSync
同步测试助手
License
MIT
写在后面
找个时间重构... 😂