fis php,FIS – 前端工程构建工具

一,

安装Nodejs 和 Npm;

二,

启动并编译项目;

fis

server start 启动8080端口；

fis

server stop 关闭项目

fis

server open 打开8080端口所在目录；

cd

到本地项目目录 执行 fis release

命令会将编译项目并发布至本地调试服务器。

npm

server -h 查看帮助；

fis

release -m 加MD5并发布至本地调试服务器；

fis

release -o 压缩静态资源并发布至本地调试服务器；

fis

release -omd ./pkg 压缩、加MD5并发送到pkg文件夹内；

fis

release -p 资源合并并发布至本地调试服务器；

fis

release -pd ./pkg 资源合并并发送到pkg文件夹内

三,

Fis 静态资源MD5版本

FIS能够根据静态资源的内容自动生成文件版本，自动更新资源引用路径，解决缓存更新问题，告别手动更新时间戳。

我们通过开启 --md5 参数，为项目中的静态资源添加md5版本号.

刷新页面，我们可以看到所有资源均加上了md5版本号

四,

Fis 静态资源压缩

资源压缩一直是前端项目优化中非常重要的一环，使用FIS我们无需任何配置，只需要一个命令就可以完成压缩工作。

FIS构建并不会修改源代码目录中的内容，而是拥有独立的产出的目录，FIS默认的产出目构录可以通过 fis

server open 打开，你也可以通过 fis

release -d 指定你希望的输出目录:

查看网站的静态资源,我们会发现脚本、样式、图片资源都已经压缩完成。无需额外的插件和配置编写，一条命令就完成了压缩工作。

五,

静态资源合并

1，设置打包

FIS可以通过pack来进行资源文件的合并，比如我们需要将DEMO中的公共库文件打包在一起，可以修改

fis-conf.js 配置，加入pack配置

设置完pack后，FIS默认只会进行文件打包，不会对页面中的静态资源引用进行替换，我们可以通过引入后端静态资源管理来加载打包模块。不过也可以利用fis-postpackager-simple插件，可以自动将页面中独立的资源引用替换为打包资源。

2，安装插件

然后

配置fis-conf.js ：

3，应用打包

发布到调试目录下运行，可以看到已经引用了打包后的资源文件；

注：为了开发调试时更加方便 fis

release默认不会合并资源，在fis

release -p后，FIS才会进行打包合并处理。

4，自动打包

利用simple插件，我们还可以按页面进行自动合并，将没有通过pack设置打包的零散资源自动合并起来。

再次运行FIS构建项目

我们会发现剩余的零散资源已经被自动合并.

六,FIS

的构建(编译)即是发布当前项目到其他文件夹

任意目录

fis

release -h 获取更多参数

1.构建发布到项目目录的

output 目录下

2.构建发布到项目父级目录的

dist 子目录下

3.发布到其他盘

(Windows)

七,8080端口被占用

8080端口被占用的话

可以指定一个新端口启用；

八,辅助开发

语言扩展

使用FIS可以方便的将各种异构语言转换为前端语言，比如说可以将CoffeeScript编译为JavaScript、Less编译为CSS、前端模板预编译等等，并且可以做到各种异构语言无缝混用。

1,Less插件安装:

开启插件

快速使用

在fis-conf.js同目录编写一个LESS文件

使用发布到output目录中

可以看到在output目录中，原有的less文件已经被编译为了css文件

由于我们添加了

-w 参数，你还可以随意修改LESS文件，FIS将会自动监听文件修改，自动编译发布CSS文件

2,Sass插件安装:

fis2开启插件:

3,自动化文件监视

通过文件监视功能，我们可以要求FIS在项目文件出现修改时，自动增量构建项目文件。并且增量构建是考虑了各种嵌入关系的，比如a.css文件内嵌了b.css文件，那么当b.css文件修改时，FIS会自动重新构建a.css和b.css两个文件。

随意修改项目内容，返回页面刷新即可查看到相应的变化。

4,自动刷新

我们只需要在文件监视的参数基础上添加

–live 或 -L 参数即可实现在项目文件发生修改后，自动刷新页面的功能，大幅提高页面制作效率。

随意修改项目内容，页面将会应用修改并自动刷新。

九,资源定位

Html资源定位

添加配置，调整文件发布路径：

编译得到：

我们甚至可以让

url和发布目录不一致。比如：

再次编译得到:

JS资源定位

js语言中，可以使用编译函数 __uri(path) 来定位资源，fis分析js文件或 html中的script标签内内容

时会替换该函数所指向文件的线上url路径。

在Css中定位资源

fis编译工具会识别css文件或

html的style标签内容 中 url(path) 以及 src=path 字段，并将其替换成对应资源的编译后url路径

资源定位结果可以被fis的配置文件控制，比如添加配置，调整文件发布路径：

再次编译得到：

10,

内容嵌入

在Html中嵌入资源

在html中可以嵌入其他文件内容或者base64编码值，可以在资源定位的基础上，给资源加 ?__inline 参数来标记资源嵌入需求。

html中嵌入图片base64 :

html中嵌入样式文件 :

html中嵌入脚本资源 :

html中嵌入页面文件:

在Js中嵌入资源

在js中，使用编译函数 __inline() 来提供内容嵌入能力。可以利用这个函数嵌入图片的base64编码、嵌入其他js或者前端模板文件的编译内容，

这些处理对html中script标签里的内容同样有效。

在js中嵌入js文件

在js中嵌入图片base64

在js中嵌入其他文本文件

在Css中嵌入资源

与html类似，凡是命中了资源定位能力的编译标记，

除了src="xxx"之外，都可以通过添加 `?__inline` 编译标记都可以把文件内容嵌入进来。src="xxx"

被用在ie浏览器支持的filter内，该属性不支持base64字符串，因此未做处理。

在css文件中嵌入其他css文件

在css中嵌入图片的base64