generator smarty pages
npm install 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$3
* 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
$3
slice init
$3
目前只有针对两种不同客户端的模板(手机移动端和传统pc端)
* touch
* pc$3
进入刚才已经初始化的项目目录
cd your Project_Name
$3
templates //html模板文件夹目录,页面的添加修改都在此文件夹
pages //浏览器中预览的html
$3
#### 1.gulp-file-include
> html可以包含html代码片断(gulp-file-inlcude)
javascript
@@include("common.html") //包含相对于当前html文件的目录下common.html文件
` #### 2.smarty
> 支持大部分smarty模板语法和基本的php函数
`javascript
{{include file="common.tpl"}} //包含相对于当前html文件的目录下common.tpl文件
` #### 3.pug
> 原jade模板引擎
`html
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
`$3
slice run [Project-Name] //Poject-Name是可选的,若在项目的根目录下，直接运行 slice run 即可
$3
slice config //显示配置文件路径slice config -l //显示最新的配置文件内容
slice config -d //重新指定配置文件路径
$3
slice build [Project-Name]$3
slice build [Project-Name] -z
$3
slice build -s images/slice/
* 构建雪碧图的目录，必须指定在image/slice目录下
* slice run -i 此条命令，URL将以本机局域网IP的方式，运行slice环境
* images、html、sass,三个目录下的文件名若以"__"(注意：两条下划线)开头，则执行slice build后，不会编译生成对应的实体文件