一.介绍 1. karma是单元测试运行框架,可以集成jasmine断言库,也支持babel. 2.fis是百度前端团队开源推出的前端工程化管理工具. 二.karma的基础应用 1.karma的基础api: server:创建一个测试服务器 [可以是远程计算机] runner.run:运行完单元测试后,立即停止服务 stopper.stop:停止下在运行的测试服务器 在运行run或stop时,必须要让服务器处于start状态才行 2.示例代码: var karma = require('karm…

这不是很好的处理方式,但是能够解决问题,希望有大神推荐更好的方式. 前端模块使用angularjs + fis +modJS 开发前端应用有两个月了.总结了以下的优点: fis 自动构建,自动发布,功能非常方便 modJS 的require方式 类似写 nodejs ,写起来方便(后面才知道坑就在这里) 因为angular在模块化中做了很多事情,所以基于amd 的模块化其实很清淡,大部分是用来加载一些别人写的类库. 问题1: 解决PhotoSwipe 支持 1:导入PhotoSwipe就是放入l…

学习官网 http://fis.baidu.com/docs/beginning/getting-started.html   1. fis release: 编译并发布     fis release -m: md5加密     fis release -o : 内容压缩     fis release -p : 文件打包合并          可连写:fis release -mop   2.fis release -w 文件监听     3.fis-conf.js:   // 设置图片合并…

gulp是最近火起来的前端构建工具,大有赶超grunt之势,它和grunt这种构建工具比较像. grunt是写一个Gruntfile.js来写配置代码,gulp则是写一个gulpfile.js来写配置代码.然后通过命令grunt或者gulp来构建项目, 前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis是用起来最简单的.都不用自己写什么配置文件.直接执行几个命令就能把所有东西给你嗖嗖嗖的弄好.难易程度一颗星. grunt相对来说是最复杂…

1.fis捕获组 $1.$2.$3……是正则表达式替换中对捕获组的引用 $0或$&是对整个匹配字符串的引用 2.fis命令 fis3 release -d ../output prod -wL fis3 server --root ../output start --port 80 fis3 release //发布到默认目录 fis3 release -d ./output //发布到指定目录 fis3 release -c //清除编译缓存 fis3 release -L //启动liver…

https://github.com/fex-team/fis FIS入门: http://fis.baidu.com/docs/beginning/getting-started.html FIS 与 Grunt 的区别  http://fex.baidu.com/blog/2014/03/fis-and-grunt/…

“启动fis的调试服务器(注意添加 --no-rewrite 参数),如果报错 没有php-cgi环境,请 安装 它,并把php-cgi命令加到系统的环境变量” 对官网这句话的解释: 下载php-5.2.17-nts-Win32-VC6-x86,添加环境变量..解压放到c盘(随便放一个目录)并改名为php,然后设置系统变量,添加path值为;c:\php...注销一下使其生效. 进入cmd:输入php-cgi -v,出现版本信息就是正确.如:(每次运行一下php-cgi) 最后fis serve…

1.fis作为nodejs的模块来管理的,所以首先得安装nodejs,看我前面的安装nodejs的文章. 2.官方的案例下载包https://github.com/hefangshi/fis-quickstart-demo 3.cmd命令,进入,然后看图 安装的时候普遍可能报错,什么什么镜像问题,导致安装失败,解决方法: 我选择第二种,如图: 设置完了之后就等待安装了,安装完成. 4.打开fis测试用的客户端:fis server start --type node,地址是127.0.0.1:8…

1,自动部署到远程服务器 (1),参考:https://github.com/fex-team/receiver (2),接收服务代码目录:/var/www/html/fis/receiver-master (3),在服务代码目录执行命令:node server.js 开启服务 (3),在本地执行打包压缩命令:fis3 release net 即可部署到服务器 //fis3远程服务器自动部署fis.media('net').match('*', { deploy: fis.plugin('htt…

前端构建工具 面对日益复杂的前端环境以及前端技术.node技术的高速发展,前端的开发也越来越工程化,体系化,也就是出现了前端自动化构建工具.他们完成的任务目标基本是: js,css,图片的自动压缩合并(图片也即是是自动sprite) js,css,图片自动添加域名 js,css,图片自动添加md5或版本号 自动监听文件变化 sass/less/coffee等的自动编译 支持amd/cmd的模块开发,可自动文件依赖 可以部署文件 网页自动刷新 实时编译 成熟的前端构建工具也有很多,比如:Gulp.…

fis3 1.添加 fis-conf.js 到项目根目录中 fis-conf.js 内容如下 : //配置MD5版本控制 fis.match('*.{js,css,png,jpg}', { useHash: true }); fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩,已内置 // 压缩JS optimizer: fis.plugin('uglify-js') }); fis.match('*.css', { // fis-opti…

Fis代码压缩步骤 1,安装fis(http://fis.baidu.com/fis3/docs/beginning/install.html) fis安装支持的node版本:0.8x,0.10x,0.12x,4x,6x 2,安装fis :cnpm install -g fis3(-g安装到全局目录) 3,安装完成后检测安装是否成功:$ fis3 -v 4,fis-config 放在resources同级目录下 5,resources下命令行 fis3 release -d ../resourc…

FIS(Front-end Integrated Solution ),是百度的前端集成解决方案.最近几天在研究前端构建的东西,就顺便了解了下,果断各种高大上,可以到FIS官网围观感受一下.如果对fis还不熟悉的童鞋,可以跑下官网的小demo体验一下. 好了,这篇文章不是fis的科普文,官方文档已经挺详细了.这里主要讲下FIS单文件编译的优化(optimize)环节. FIS单文件编译-optimize FIS详细运行原理这里不展开,有兴趣的可以看下官方文档.我们只是简单地看下单文件编译的其中一…

FIS前端集成解决方案-文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 FIS开发实例 --附件下载-- 什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构,这能帮助工程师提高开发效率,沟通协作效率,快速实现需求并达到代码的最优化. 部署FIS 1.配置代理文件,在html页加上这样的语句 F._fileMap({ '/static/js/Test.js': ['/static/js/Test1.j…

文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构,这能帮助工程师提高开发效率,沟通协作效率,快速实现需求并达到代码的最优化. 二.部署FIS 三.FIS基本使用 在FIS中,所有JavaScript文件都应该用模块的形式来书写,并且一个文件只包含一个模块. F.module: 使用F.module来定义模块: F.module(name, fun…

<target name="help"> <exec executable="cmd"> <arg value="/c"/> <arg value="fis"/> <arg value="release"/> <arg value="--help"/> </exec> </target> 前提…

FIS是专为解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题的工具框架,相比gulp和grunt更傻瓜化,上手更容易,最近抽空学习了一下,分享一下心得. FIS官网: http://fis.baidu.com/ FIS开发文档API:http://fis.baidu.com/docs/beginning/getting-started.html 慕课网FIS教程: http://www.imooc.com/learn/220 一.fis安装 npm instal…

模块化开发-pure: http://hefangshi.github.io/fis-site/docs/advance/modjs-solution.html 三种语言能力(资源定位,内容嵌入,依赖管理): http://hefangshi.github.io/fis-site/docs/more/fis-standard.html 背景图片合并: https://github.com/fex-team/fis-spriter-csssprites roadmap.path: http://h…

一.FIS是什么 在做项目的时候,用到部门内部前端人员开发的fiskit构建工具,经过这次项目基本把它的配置弄清楚了,fiskit构建工具是基于FIS的,所以自己也准备学习FIS,以便更好的理解. 后来在网上查阅了相关文件,才发现FIS是百度开发的,网上人说FIS适用于团队开发.FIS是类似于Grunt,Gulp,Webpack的一种前端构建工具,FIS3是面向前端的工程构建工具, 用于解决前端性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范…

命令 用途 简写 fis --version 查看版本 fis -v fis install 安装   fis release 发布项目   fis server start 启动一个服务器用于预览项目   fis server clean 清空www发布目录的文件   fis server open 打开路径   fis release --help 帮助 fis release -h fis release --watch --live 监听文件修改,自动刷新页面 fis release -…

1.http://fis.baidu.com/ (前端构建工具)…

为什么fis没有freemarker的解决方案啊?_前端吧_百度贴吧 fis-plus:适用于PHP+Smarty后端选型jello:适用于Java+Velocity后端选型goiz:适用于go+martini后端选型fis-php-md:适用于纯PHP后端选型…

fis server start后 资源压缩,只需要使用命令,不需要添加任何配置 fis release --optimize 或: fis release -o 在浏览器访问按F12,观看压缩前后文件大小对比:…

静态资源后缀加上md5参数,有效解决缓存更新问题 fis release --optimize --md5 使用前后对比:…

这节讲资源合并,实战目录如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fis test</title> <script src="/js/a.js"></script> <script src="/js/b.js">&l…

FIS是专为解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题的前端工程化构建工具. 最重要的是,它是国产的!还是百度产的~~~亲切吧~~官网:http://fis.baidu.com/ 全局安装,此操作前需要先安装Node.js npm install -g fis 查看版本显示安装成功了喲! =================================================================== 启动看看 fis server s…

之前用 FIS 的时候,发现配置 roadmap 的时候出现了非常诡异的现象:命令行使用 -o 参数,配置文件里对 html 不使用优化,导致 uglify 了 js 文件后,不会修改 html 中对 js 的引用,依旧引用以前的 js,没有引用 uglify 后改变了 MD5 的js. 尝试修改了无数次,反复验证实验,最小化项目代码后重新跑,结果还是一样.百思不得其解,然后联系了 FIS 的开发人员,才了解到,FIS 内置了一些逻辑,如果使用 fis.config.merge 会造成一些诡异的…

对于前端工程师来说,浏览器缓存优化是个永远的话题.前几天看了知乎上的一个问答:<大公司里怎样开发和部署前端代码?>,深以为然,所以决心使用 FIS 来优化自身的前端文件. 我们的项目使用了 go 语言的 revel 做 web 框架.这个框架的目录结构混合了前后端的文件,没法做到前后端开发的完全分离.所以我们要做的第一步,就是分离前后端的文件. 分离前后端 因为已经决定使用 FIS 来优化前端,所以特别利用了 FIS 的编译文件这个功能.既然没法做到完全的前后端分离,至少也要分离一部分吧. 首…

1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 配置文件(默认fis-conf.js)所在的目录为项目根目录. 3 sprite的配置文件(fis-config.js)如下: fis.match('::packager', { spriter : fis.plugin('csssprites') }); fis.match('*.css', {…

FIS 插件机制 author: @TiffanysBear 当我们使用 FIS 插件的时候,有没有想过自己也开发一个基于 FIS 的插件,参与 FIS 打包编译的整个流程:那么问题就来了: FIS 的编译过程运行原理是怎样的呢? FIS 编译打包的过程有哪些? 怎么参与FIS 的打包编译过程? 怎么实现一个基于FIS的插件? FIS 是怎么引入自定义插件的? 基于以下的问题,从原理再进行慢慢分析,了解 FIS 编译的基本流程和原理,以及如何自己自定义一个 FIS 插件. 编译过程运行原理 fi…