slice-cli
html static page template command line
Last updated 2 months ago by laoono .
ISC · Repository · Bugs · Original npm · Tarball
$ cnpm install slice-cli 
SYNC missed versions from official npm registry.

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

2.执行 slice init 之后,会出现一个输入项:选择一个项目模板

目前只有针对两种不同客户端的模板(手机移动端和传统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后,不会编译生成对应的实体文件

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (38)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |