FIS官方页面
百度出品,说是能够解决前端开发过程中遇到的很多麻烦的事情,让重复的工作变简单.感觉上是一个整合的开发环境,具体等试了再说
由于本文类似总结笔记 内容趋向言简意赅,方便日后快速翻查,要详细资料请看最上面的官方手册
介绍
FIS3 , 为你定制的前端工程构建工具
解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题
安装
需要有nodejs https://nodejs.org
npm install -g fis3
很僵硬,我的node是最新7.3.0,而官方没有支持,查看支持的地址
命令行的卸载失败了,可能由于我是windows nodejs也是安装包安装的,所以还是老老实实去控制面板卸载吧,然后下了一个长期支持版本6.9.4的nodejs
下了半天没下载下来,最后还是用cnpm下载的
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g fis3
升级
npm update -g fis3
重装
npm install -g fis3
功能点
1.资源定位能力
使用fis3 release -d ./output命令构建的项目会自动生成对应的绝对路径,开发过程中只需要写相对路径
需要注意的是,在网页中的绝对路径是相对于文件根目录对应到网站域名,如果项目不在根目录下 这个发布出来的绝对路径反而会出问题
修改fis-conf.js 文件可以修改对应文件架构后存放的位置,哪怕一开始乱放,最后也会合并到一个文件夹下,保留原目录结构
js如果有用到地址修改,就爆炸了
fis.match('*.{png,js,css}', {
release: '/static/$0'
});
2.css js发布时压缩
// 清除其他配置，只保留如下配置
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')
});
3.文件资源添加指纹,对 js、css、png 图片引用 URL 添加 md5 戳
特别说明,如果js中切换图片 最好不要用这个
fis.match('*.{js,css,png}', {
useHash: true
});
4.雪碧图 CssSprite图片合并
以前雪碧图都是自己ps合并 现在不用了...自动合成图片并修改对应css,不过需要注意 需要处理的图片 后面要加上"?__sprite". 详细配置
如:
li.list-1::before { background-image: url('./img/list-1.png?__sprite');}
// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('*.css', {
// 给匹配到的文件分配属性 `useSprite`
useSprite: true
});
5.整合版本
我们学习了如何用 FIS3 做压缩、文件指纹、图片合并、资源定位，现在把这些功能组合起来，配置文件如下；
// 加 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('debug').match('*.{js,css,png}', {
useHash: false,
useSprite: false,
optimizer: null
})
发布的时候用,不压缩:
fis3 release -d ../output
开发的时候用下面的；
fis3 release debug -d ../output
调试
1.打开www目录
fis3 server open
2.发布
fis3 release debug
3.启动
fis3 server start
4.修改端口号
fis3 server -h
5.文件监听
fis3 release -w
6.常用,修改了文件以后,调试服务器的文件也会相应修改并自动刷新浏览器
fis3 release -wL
7.LESS使用
安装插件,推荐用cnpm
npm install -g fis-parser-less
修改配置js,加入
fis.match('*.less', {
// fis-parser-less 插件进行解析
parser: fis.plugin('less'),
// .less 文件后缀构建后被改成 .css 文件
rExt: '.css'
})
8.html 压缩
安装插件
cnpm install -g fis-optimizer-html-compress
修改配置文件
fis.match('*.html', {
optimizer: fis.plugin('html-compress')
})
问题
1.如果给图片添加md5 戳 那每次发布 旧的文件不会被覆盖 岂不是每次要删除,再发布?
2.同样是md5戳的问题,加了以后 我的js如果切换图片 就失效了
3.为什么有的图片加了md5戳 而有的图片没有?