fis3 php cgi,FIS3 : FIS3 内置插件及配置

FIS3 内置插件及配置

fis3 中内嵌了很多常用的插件。

可以连接到仓库介绍页面查看详情,这里将概要描述这些插件的作用及基本配置。

用于压缩 css,一般用于发布产品库代码。

fis

.media('prod')

.match('*.css', {

optimizer: fis.plugin('clean-css')

});

fis

.media('prod')

.match('*.css', {

optimizer: fis.plugin('clean-css', {

keepBreaks: true,

// 更多其他配置

})

});

用来压缩 png 文件,减少文件体积,详情请见 pngcrush 和 pngquant 说明。

fis

.media('prod')

.match('*.png', {

optimizer: fis.plugin('png-compressor', {

// pngcrush or pngquant

// default is pngcrush

type: 'pngquant'

})

});

用来压缩 js 文件,混淆代码,减少文件体积。

fis

.media('prod')

.match('*.js', {

optimizer: fis.plugin('uglify-js', {

// https://github.com/mishoo/UglifyJS2#compressor-options

})

});

针对 css 规则中的 background-image 做图片优化,将多张零碎小图片合并,并自动修改 css 背景图片位置。

此插件并不会处理所有的 background-image 规则,而只会处理 url 中带 ?__sprite 图片的规则。

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.match('::package', {

spriter: fis.plugin('csssprites')

})

// 对 CSS 进行图片合并

fis.match('*.css', {

// 给匹配到的文件分配属性 `useSprite`

useSprite: true

});

用来支持 fis3 本地部署能力,将 fis3 编译产出到指定目录。

fis.match('*.js', {

deploy: fis.plugin('local-deliver', {

to: '/var/www/myApp'

})

})

用来支持 fis3 远程部署能力,将 fis3 编译通过 http post 方式发送到远程服务端。

fis.match('*.js', {

deploy: fis.plugin('http-push', {

// 如果配置了receiver,fis会把文件逐个post到接收端上

receiver: 'http://www.example.com:8080/receiver.php',

// 这个参数会作为文件路径前缀附加在 $_POST['to'] 里面。

to: '/home/fis/www'

})

})

用来支持 短路径 引用安装到本地的 component。

如: fis3 install bootstrap 后,在页面中可以这么写。

此功能已自动开启。

用来支持 fis 简单的打包,无需额外设置,已自动开启。

fis.match('*.css', {

packTo: '/pkg/all.css'

});

fis.match('*.js', {

packTo: '/pkg/all.js'

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graduation 毕业设计代码,还没完成!但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解: 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示,留言,评论,评论量,访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟,后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget,里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要,一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位 ├── static # 静态资源发布位 ├── plugin # plugin/*.php 发布位 └── config # config/*.json 发布位

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值