cjf

#前端自动化构建工具，基于fis3

• less预编译
• css prefix
• 静态资源压缩（css、js、png）

##目录结构-test

####源码：

	 workspace // 工作目录
	 ├ components // 模块，暂时只放html。TODO：把css、js、html、图片都放一起
	 ├ fonts // 文字
	 ├ images // 图片
	 ├ js // js文件
	 ├ less // less文件
	 ├ third // 第三方文件
	 ├ index.html // 首页

####编译后：

	 output
	 ├ static // 静态资源
	 | ├ fonts // 文字
	 | ├ images // 图片
	 | ├ js // js文件
	 | ├ css // less文件
	 | ├ third // 第三方文件
	 ├ index.html // 首页

##快速入门

####编译

cjf release -d ./output

编译输出到项目文件 '/output' 目录

cjf release

编译到本地服务器，不压缩

cjf release prod

编译到本地服务器，压缩

####文件监听 + 浏览器自动刷新

cjf release -wL

监听本地文件变动，自动编译到本地服务器，刷新浏览器

##Web Server

内置 Web Server，方便调试构建页面

cjf server start

开启本地服务器

cjf server stop

关闭本地服务器

cjf server open

打开本地服务器文件

cjf server clean

删除本地服务器文件

##在html中嵌入资源

• 嵌入图片(转base64 图片)

	<img title="logo" src="images/logo.gif?__inline"/>

• 嵌入样式

	<link rel="stylesheet" type="text/css" href="demo.css?__inline">

• 嵌入html

	<link rel="import" href="demo.html?__inline">

• 嵌入js

	<script type="text/javascript" src="demo.js?__inline"></script>

##在css中嵌入资源

• 嵌入图片

	.style {
	      background: url(images/logo.gif?__inline);
	  }

• 嵌入css

	@import url('demo.css?__inline');

##less

• 过滤下划线开头命名的less文件
• html中内联less执行编译

	<style type="text/x-less">
	body{
		a{
			color:red;
		}
	}
	</style>

• 外链less

	<link rel="stylesheet" href="less/lifehacker.less">

##cssautoprefixer

• 编译默认开启autoprefixer