接触FIS是在2014年11月左右，当时大二，在准备百度实习面试的时候网上迷路了，偶遇了FIS的官网，当时用了一下，觉得是一个基于Node.js的前端自动化解决方案，没太在意...后面在百度遇见了一些前端的小伙伴，才明白FIS的潜能，现在不管是自己的项目，还是以后公司的前端项目，都快离不来TA了，之前听一个学弟说最近他也在使用，并且存在不少问题，所以想写篇博文，给需要的小伙伴们。PS：我自己用的是MacOS系统，博文所述的FIS版本采用最新的FIS3。
【前端】FIS3应用小记
FIS3
FIS3：面向前端的工程构建工具，一套来自度厂的比较完整的前端开发解决方案，类似于grunt。
FIS3安装
FIS3构建项目
资源定位
如下图，切换至项目fis-conf.js所在根目录下，键入fis release -d <path>,构建发布到项目目录的<path>目录下（可以是子目录，也可以是父目录，e.g.：./output_son,../output_father）。
配置文件
默认配置文件为 fis-conf.js，FIS3 编译的整个流程都是通过配置来控制的：
文件指纹
文件指纹：唯一标识一个文件。在开启强缓存的情况下，如果文件的 URL 不发生变化，无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存，一种方式是添加时间戳，每次上线更新文件，给这个资源文件的 URL 添加上时间戳。
<img src="a.png?t=12012121">
而 FIS3 选择的是添加 MD5 戳，直接修改文件的 URL，而不是在其后添加 query。
对 js、css、png 图片引用 URL 添加 md5 戳，配置如下；
//清除其他配置，只剩下如下配置
fis.match('*.{js,css,png}', {
useHash: true
});
压缩资源
为了减少资源网络传输的大小，通过压缩器对 js、css、图片进行压缩是一直以来前端工程优化的选择。在 FIS3 中这个过程非常简单，通过给文件配置压缩器即可。
// 清除其他配置，只保留如下配置
fis.match('*.js', {
// fis-optimizer-uglify-js 插件进行压缩，已内置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件进行压缩，已内置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', {
// fis-optimizer-png-compressor 插件进行压缩，已内置
optimizer: fis.plugin('png-compressor')
});
图片合并
压缩了静态资源，我们还可以对图片进行CssSprite合并，来减少请求数量。
FIS3 提供了比较简易、使用方便的图片合并工具。通过配置即可调用此工具并对资源进行合并。
FIS3 构建会对 CSS 中，路径带 ?__sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。
li.list-1::before {
background-image: url('./img/list-1.png?__sprite');
}
li.list-2::before {
background-image: url('./img/list-2.png?__sprite');
}
启用 fis-spriter-csssprites 插件
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});
功能组合
// 加 md5
// fis.match('*.{js,css,png}', {
// useHash: true
// });
// 启用 fis-spriter-csssprites 插件
// fis.match('::package', {
// spriter: fis.plugin('csssprites')
// })
// 对 CSS 进行图片合并
// fis.match('*.css', {
// // 给匹配到的文件分配属性 `useSprite`
// useSprite: true
// });
// fis.match('*.js', {
// // fis-optimizer-uglify-js 插件进行压缩，已内置
// optimizer: fis.plugin('uglify-js')
// });
// fis.match('*.css', {
// // fis-optimizer-clean-css 插件进行压缩，已内置
// optimizer: fis.plugin('clean-css')
// });
// fis.match('*.png', {
// // fis-optimizer-png-compressor 插件进行压缩，已内置
// optimizer: fis.plugin('png-compressor')
// });
//
// fis.media() 接口提供多种状态功能，比如有些配置是仅供开发环境下使用，有些则是仅供生产环境使用的。
// fis.media() 可以使配置文件变为多份（多个状态，一个状态一份配置）。
// fis3 release rd push 到 RD 的远端机器上
// fis3 release qa push 到 QA 的远端机器上
// fis.media('rd').match('*', {
// deploy: fis.plugin('http-push', {
// receiver: 'http://remote-rd-host/receiver.php'
// })
// });
// fis.media('qa').match('*', {
// deploy: fis.plugin('http-push', {
// receiver: 'http://remote-qa-host/receiver.php'
// })
// });
//
//启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
});
fis.match('*.js',{
useHash:false,
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css',{
useHash:false,
optimizer: fis.plugin('clean-css'),
// 对 CSS 进行图片合并
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});
fis.match('*.png',{
useHash:false,
optimizer: fis.plugin('png-compressor')
});
// 可能有时候开发的时候不需要压缩、合并图片、也不需要 hash。那么给上面配置追加如下配置；
// fis release debug 启用 media debug 的配置，覆盖上面的配置，把诸多功能关掉。
fis.media('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
})
FIS3调试
FIS3 构建后，默认情况下会对资源的 URL 进行修改，改成绝对路径。这时候本地双击打开文件是无法正常工作的。这给开发调试带来了绝大的困惑。
FIS3 内置一个简易 Web Server，可以方便调试构建结果。
构建时不指定输出目录，即不指定 -d 参数时，构建结果被发送到内置Web Server的根目录下，此目录可以通过执行以下命令打开。（和hexo的debug server同理）
开启目录
构建时不指定输出目录，即不指定 -d 参数时，构建结果被发送到内置 Web Server 的根目录下。此目录可以通过执行以下命令打开。
fis server open
发布项目
不加 -d 参数默认被发布到内置 Web Server的根目录下，当启动服务时访问此目录下的资源。
fis release
启动测试
fis server start
来启动本地 Web Server，当此 Server 启动后，会自动浏览器打开 http://127.0.0.1:8080，默认监听端口 8080，通过执行以下命令得到更多启动参数，可以设置不同的端口号（当 8080 占用时）
fis server -h
PS:
启动 Web Server 以后，会自动打开浏览器，访问 http://127.0.0.1:8080 URL，这时即可查看到页面渲染结果。正如所有其他 Web Server，FIS3 内置的 Server 是常驻的，如果不重启计算机或者调用命令关闭是不会关闭的。所以后续只需访问对应链接即可，而不需要每次 release 就启动一次 server。
文件监听
为了方便开发，FIS3 支持文件监听，当启动文件监听时，修改文件会构建发布。而且其编译是增量的，编译花费时间少。
FIS3 通过对 release 命令添加 -w 或者 --watch 参数启动文件监听功能。
fis3 release -w
添加 -w 参数时，程序不会执行终止；停止程序用快捷键 CTRL+C
浏览器自动刷新
文件修改自动构建发布后，如果浏览器能自动刷新，这是一个非常好的开发体验。FIS3 支持浏览器自动刷新功能，只需要给 release 命令添加 -L 参数，通常 -w 和 -L 一起使用。
fis3 release -wL
程序停止用快捷键 CTRL+C
发布到远端机器
开发项目后，需要发布到测试机（联调机），一般可以通过如 SMB、FTP 等上传代码。FIS3 默认支持使用 HTTP 上传代码，首先需要在测试机部署上传接收脚本（或者服务），这个脚本非常简单，下面的receiver.php给出了 php 的实现版本，可以把它放到测试机上某个 Web 服务根目录，并且配置一个 url 能访问到即可。
示例脚本是 php 脚本，测试机 Web 需要支持 PHP 的解析，如果需要其他语言实现，请参考这个 php 脚本实现。（假定这个 URL 是：http://cq.01.p.p.baidu.com:8888/receiver.php）
那么我们只需要在配置文件配置：
fis.match('*', {
deploy: fis.plugin('http-push', {
receiver: 'http://cq.01.p.p.baidu.com:8888/receiver.php',
to: '/home/work/htdocs' // 注意这个是指的是测试机器的路径，而非本地机器
})
})
receiver.php:
<?php
@error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING);
function mkdirs($path, $mod = 0777) {
if (is_dir($path)) {
return chmod($path, $mod);
} else {
$old = umask(0);
if(mkdir($path, $mod, true) && is_dir($path)){
umask($old);
return true;
} else {
umask($old);
}
}
return false;
}
if($_POST['to']){
$to = urldecode($_POST['to']);
if(is_dir($to) || $_FILES["file"]["error"] > 0){
header("Status: 500 Internal Server Error");
} else {
if(file_exists($to)){
unlink($to);
} else {
$dir = dirname($to);
if(!file_exists($dir)){
mkdirs($dir);
}
}
echo move_uploaded_file($_FILES["file"]["tmp_name"], $to) ? 0 : 1;
}
} else {
echo 'I\'m ready for that, you know.';
}
替代内置Server
FIS3 内置了一个 Web Server 提供给构建后的代码进行调试。如果你自己启动了你自己的 Web Server 依然可以使用它们。
假设你的 Web Server 的根目录是 /Users/my-name/work/htdocs，那么发布时只需要设置产出目录到这个目录即可。
fis3 release -d /Users/my-name/work/htdocs
如果想执行 fis3 release 直接发布到此目录下，可在配置文件配置；
fis.match('*', {
deploy: fis.plugin('local-deliver', {
to: '/Users/my-name/work/htdocs'
})
})
FIS内置语法
FIS3使用
FIS3使用心得+图文实例
持续更新中...
Comments | NOTHING