F.I.S初探(前端工程化)
npm install some-npm-module -g --registry=国内镜像 --disturl=https://npm.taobao.org/dist
这些东西官方网站都有提到,就不多说啦。出门左转去这里:https://github.com/fex-team/fis/issues/65
// 设置图片合并的最小间隔
fis.config.set('settings.spriter.csssprites.margin', 20);
// 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
fis.config.set('modules.postpackager', 'simple');
// 取消下面的注释设置打包规则
fis.config.set('pack', {
'/pkg/lib.js': [
'js/lib/jquery.js',
'js/lib/underscore.js',
'js/lib/backbone.js',
'js/lib/backbone.localStorage.js',
],
// 取消下面的注释设置CSS打包规则,CSS打包的同时会进行图片合并
'/pkg/aio.css': '**.css'
});
// 取消下面的注释可以开启simple对零散资源的自动合并
fis.config.set('settings.postpackager.simple.autoCombine', true);
|
fis.config.merge({
roadmap : {
path : [
{
//所有widget目录下的js文件
reg : 'widget/**.js',
//是模块化的js文件(标记为这种值的文件,会进行amd或者闭包包装)
isMod : true,
//默认依赖lib.js
requires : [ 'lib.js' ],
//向产出的map.json文件里附加一些信息
extras : { say : '123' },
//编译后产出到 /static/widget/xxx 目录下
release : '/static$&'
},
{
//所有的js文件
reg : '**.js',
//发布到/static/js/xxx目录下
release : '/static/js$&'
},
{
//所有的ico文件
reg : '**.ico',
//发布的时候即使加了--md5参数也不要生成带md5戳的文件
useHash : false,
//发布到/static/xxx目录下
release : '/static$&'
},
{
//所有image目录下的.png,.gif文件
reg : /^\/images\/(.*\.(?:png|gif))/i,
//访问这些图片的url是 '/m/xxxx?log_id=123'
url : '/m/$1?log_id=123',
//发布到/static/pic/xxx目录下
release : '/static/pic/$1'
},
{
//所有template目录下的.php文件
reg : /^\/template\/(.*\.php)/i,
//是类html文件,会进行html语言能力扩展
isHtmlLike : true,
//发布为gbk编码文件
charset : 'gbk',
//发布到/php/template/xxx目录下
release : '/php/template/$1'
},
{
//前面规则未匹配到的其他文件
reg : /.*/,
//编译的时候不要产出了
release : false
}
]
}
});
|
这里面我目前用的最多的是roadmap,感觉这是个核心设置。
这样每次发布都是自动完成了资源更新,有点小爽。。只不过问题来了。。。FIS目前替换后的URI是绝对路径。这句话什么意思?
- useHash:false,表示不添加md5戳
- useCompile:false,表示不对资源进行编绎处理
F.I.S初探(前端工程化)的更多相关文章
- 前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- 前端工程化(三)---Vue的开发模式
从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...
- gulp前端工程化教程
gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...
- 前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- 页面仔初窥"前端工程化"
今天看了几篇前端界的一位大牛--张云龙的文章,其中一篇在自己的理解范围内看得懂一些,有所收获,说的是前端工程化的事,看完算是对前端工程形成了一个模糊的概念. 现在我所接触到的前端开发,还是张云龙大神所 ...
随机推荐
- 各类坐标系相互之间的转换(84互转GC02,GC02互转BD09)
在遥感行业我们经常会用到各类的坐标系相互之间的转换,常见的度分秒转化为度很简单,直接上代码: //经纬度 ////118度48分54.152秒=118+(48/60)+(54.152/3600)=11 ...
- ASP.Net Core 里是如何把一个普通的 Action 返回类型转换为某种 IActionResult 的
秘密在于这个类型: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker 在它的 CreateActionResult 方法里会将相关类型 ...
- Spring MVC初次相见
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
- eclipse调试
http://blog.csdn.net/u012176591/article/details/23297889
- linux线程
线程:轻量级进程,在资源.数据方面不需要进行复制 不间断地跟踪指令执行的路径被称为执行路线 进程的结构:task_struck:地址空间 线程:轻量级的进程 在同一个进程中创建的线程,在共享进程的地址 ...
- Hibernate jpa 在实体类中对于时间的注解
在时间类型DATE 属性上添加一个 @Temporal(TemporalType.DATE)(精确到年月日)@Temporal(TemporalType.TIME)(精确到时分秒)@Temporal( ...
- echarts之tooltip
tooltip:提示框,鼠标悬浮交互时的信息提示. 当trigger为'item'时 tooltip : { trigger: 'item' }, 当trigger为'axis'时 tooltip : ...
- 什么是Angularjs
AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为 ...
- redis——学习之路五(简单的C#使用redis)
redis官方推荐使用的客户端程序 打星星表示推荐使用的客户端程序,一个笑脸表示最近6个月内有过正式活动的.http://redis.io/clients/#c 从这里我们可以判断官方推荐我们使用Se ...
- [翻译] ORMLite document -- Getting Started
前言 此文档翻译于第一次学习 ORMLite 框架,如果发现当中有什么不对的地方,请指正.若翻译与原文档出现任何的不相符,请以原文档为准.原则上建议学习原英文文档. ----------------- ...