README
slice-cli
生成日常切图所需项目目录,构建产出交付页面 本机安装环境依赖: node git
生成项目的基本结构:
── LICENSE
├── README.md
├── assets
│ ├── files
│ ├── fonts
│ ├── images
│ │ └── slice
│ ├── js
│ └── sass
│ ├── base
│ │ ├── _class.scss
│ │ ├── _config.scss
│ │ ├── _function.scss
│ │ ├── _icon.scss
│ │ ├── _media.query.scss
│ │ ├── _mixin.scss
│ │ ├── _reset.inc.pc.scss
│ │ ├── _var.scss
│ │ └── _z-index.scss
│ ├── base.inc.scss
│ ├── components
│ ├── layout
│ ├── pages
│ └── vendors
├── config.json
├── pages
│ ├── _meta.html
│ └── example.html
└── templates
├── _meta.tpl
├── components
│ └── README.md
├── example.tpl
└── partial
└── README.md
说明:
sass目录 存放scss样式文件,自动生成平级的css目录
templates目录 存放html视图模板文件,在这个目录下面,编写html模板
pages目录 对应html目录自动生成的.html文件,执行 slice run,可在浏览器里预览
功能:
自动添加浏览器私有前缀
代码热更新,浏览器自动刷新
支持base64,只需在资源引用处加上'?base64'
自动生成css sprite, 例:slice build -s images/slice 将自动合并images目录下的slice目录下的所有图片
支持smarty
使用方法
npm install slice-cli -g
1.初始化项目
slice init
slice init
之后,会出现一个输入项:选择一个项目模板
2.执行 目前只有针对两种不同客户端的模板(手机移动端和传统pc端)
- touch
- pc
3.选择了项目模板之后,又会出现一个输入项:项目名称,也就是项目的目录名称 这个目录将是项目的根目录。
进入刚才已经初始化的项目目录
cd your Project_Name
项目根目录下的说明:
templates //html模板文件夹目录,页面的添加修改都在此文件夹
pages //浏览器中预览的html
slice-cli 所使用的模板引擎(gulp-file-include、smarty、pug(原jade)),默认使用的是smarty.可以通过项目根目录下的config.json配置文件进行修改
1.gulp-file-include
html可以包含html代码片断(gulp-file-inlcude)
@@include("common.html") //包含相对于当前html文件的目录下common.html文件
2.smarty
支持大部分smarty模板语法和基本的php函数
{{include file="common.tpl"}} //包含相对于当前html文件的目录下common.tpl文件
3.pug
原jade模板引擎
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
在浏览器里预览
slice run [Project-Name] //Poject-Name是可选的,若在项目的根目录下,直接运行 slice run 即可
指定 slice 配置文件
slice config //显示配置文件路径
slice config -l //显示最新的配置文件内容
slice config -d <file> //重新指定配置文件路径
构建产出项目(交付给小伙伴) Project-Name 可选
slice build [Project-Name]
构建zip包 Project-Name 可选
slice build [Project-Name] -z
构建css雪碧图,需指定匹配的图片目录
slice build -s images/slice/
说明:
[Project-Name] 项目目录路径是可选的,若在项目的根目录下,可省略
构建雪碧图的目录,必须指定在image/slice目录下
slice run -i 此条命令,URL将以本机局域网IP的方式,运行slice环境
images、html、sass,三个目录下的文件名若以"__"(注意:两条下划线)开头,则执行slice build后,不会编译生成对应的实体文件