fex-team / fis3 Goto Github PK
View Code? Open in Web Editor NEWFIS3
Home Page: http://fis.baidu.com
License: BSD 2-Clause "Simplified" License
FIS3
Home Page: http://fis.baidu.com
License: BSD 2-Clause "Simplified" License
1 deploy 的问题,还是很奇怪哦。
fis
.media('dev')
.match('{css/*.css,less/g.less,js/*.js,html/*.html,img/**}', {
deploy: fis.plugin('local-deliver', {
to: './publish'
})
})
fis
.media('test')
.match('publish/**', {
deploy: fis.plugin('http-push', {
receiver: 'xx/receiver2.php',
to: '/data/wapstatic/monkeytao/now'
})
})
这样就是正常的 如果去掉 .media('dev')就不一样了
我的理解是默认也就是dev是忽略 test下的规则的
test的时候读取了 dev的规则,但是我的test规则是所有文件呀,好象没有覆盖
2 还有如何设置为相对路径呢?我用的是 match('*')
domain:'..'
的方法,还有更靠谱的吗?
3 为啥我的 design
slice
等文件夹默认是忽略的不会被 deploy到 ./publish
中,但是神奇的是
publish 文件夹和 一个叫 save
的文件夹却被发布到 ./publish中了。。。!!!这太神奇了
现在的解决方法是
fis.set('project.ignore', [
// 'node_modules/**/*',
// 'ignore/**/*',
'publish/**/*',
'save/**/*',
// '.git/**/*',
// '**/prepros.cfg',
'fis-conf.js'
])
这里为啥又可以只写 save/**
而不是 save/**/*
在fis中release的时候会自动生成一个map.json,fis3需要在一个文件(我命名的是manifest.json)中写个RESOURCE_MAP才能生成清单。
如果我不想在项目下建manifest.json文件,但是想让产出的时候在项目下生成manifest.json文件,应该怎么写插件可以实现?
defineLikes
set: (function(prop) { return function(val) { if (val === false) { this._likes[v] = false; // v应该为prop return; } var that = this; likes.forEach(function(v) { if (prop === v) { that._likes[v] = true } else { that._likes[v] = false; } }); } })(v)
test/config.js
,会抛出TypeError: Cannot read property '0' of null
,问题定位在defineLiks()
中fis.match('!**/js.js', { release: '/static/$&', useHash: true, useDomain: true }); path = __dirname+'/file/ext/modular/js.less?__inline'; var f = _.wrap(path); var url = f.getUrl(); expect(url).to.equal('www.baidu.com/static/file/ext/modular/js_'+ f.getHash() +'.less?__inline');
使用 fis-parser-sass 编译CSS文件,配置如下:
fis.match('*.scss', {
optimizer: fis.plugin('fis-parser-sass')
});
打包输出时报错:
[ERROR] unable to load plugin [fis3-optimizer-fis-parser-sass] or [fis-optimizer-fis-parser-sass]
请问怎么去掉默认追加的 FIS3-optimizer 前缀?是配置方式不对?还是说其他什么原因呢?
at Function._.query (/Users/apple/.nvm/versions/node/v0.12.0/lib/node_modules/fis3/lib/util.js:870:16);
pos = rest.indexOf('#'); // 这
额,还是我。。。- -
之前用 grunt 我们所有 img 和 slice 分别放了 普通图片和雪碧图,
fis.match('less/(*.less)', {
parser: fis.plugin('less-2.x'),
rExt: '.css',
release: 'css/$1',
})
fis.match('publish/css/*.css', {
optimizer: fis.plugin('clean-css', {}),
useSprite: true,
})
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// publish/css/x.css 正常包含了:
background-image: url("../slice/x.png?__sprite");
但是图不知道在哪里,
直接手写 /css/g.css/ 生成 /publish/css/g.css
做的小测试里面是在css/x.css
下有个x_z.png
x_z.png
路径或者名字不能配置?好奇怪的名字啊。。。
这可能又是一个 先 less 转换,再生成雪碧图的问题。
1 为何 publish 多出了 asset[雪碧图源文件] 目录的问题:
fis.set('project.ignore', [
// 'node_modules/**',
// '.git/**',
'asset/**',
// 。。。
])
设置忽略是没用的
// fis.match('*', {
fis.match('{less/**,html/**,img/**,js/**,map.json}', {
或者
fis.match('!/asset/**', {
deploy: ...
})
成功屏蔽 asset 文件夹
2 基于以上情况,执行 fis3 release -wL
报错,根据提示加入了 fis.config.set("project.watch.usePolling", true)
结果一直运行下去没有停下来
尝试过注释很多功能都不行。
3 对于 根据 **@2x.png 生成2倍图的问题,好像只能生成一个雪碧图。。。还是要自己尝试去写插件
我在a.scss文件中 import _iconfont.css,_iconfont 文件中包含字体url,生成的a.css文件中的字体url错误。
a.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
@import "font/_iconfont.css";
body {
font: 100% $font-stack;
color: $primary-color;
}
.inline-demo {
background: url('./a.png?__inline');
}
font/_iconfont.css
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
编译后
a.css
@font-face {
font-family: "iconfont";
src: url(0); <----- 错误
/* IE9*/
src: url(0) format('embedded-opentype'), url(0) format('woff'), url(0) format('truetype'), url(0) format('svg');
/* iOS 4.1- */ }
body {
font: 100% Helvetica, sans-serif;
color: #333; }
.inline-demo {
background: url('data:image/png;base64,isfsdgsdfsdh'); }
_iconfont.css
@font-face {font-family: "iconfont";
src: url('/font/iconfont.eot'); /* IE9*/
src: url('/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font/iconfont.woff') format('woff'), /* chrome、firefox */
url('/font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('/font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
mod模式下,怎么设置生成的mod文件是相对路径?
因为media会更改NODE_ENV的值 😂
之前release之后会有一个map.json,fis3怎么配置才会产出那个清单文件?
抱歉又遇到新的问题:
fis.media('test')
.match('{css/*.css,less/g.less,js/*.js,html/*html,img/**}', {
deploy: fis.plugin('http-push', {
receiver: 'somedomain.com/receiver/receiver.php',
to: '/path/to/project'
})
})
服务器端的 receiver.php
好像是不是 fis3 的,而是fis之前的版本里用的,这个我没法拿到代码
出现的问题是 html目录下的 index.html
变成了 index.html/
文件夹
还出现了 index2.htmlindex3.html
这种文件名 ...
fis.util.glob('*.JS', 'a/b.js')这类匹配失败
fis3如何修改html中的src 、 href的路径值
我不想模板文件*.tpl输出到output目录中,结果报下面的错误
[ERROR] unreleasable file
我的相关配置:
fis.match('**.tpl', {
parser: fis.plugin('utc'), // invoke `fis-parser-utc`,
isJsLike: true,
isMod:false //避免被当作组件包装
});
比如我html里面有10个script标签,每个一行,当我release过后,这10个script标签成了10个空行,然后下面才是script标签,虽然空行并不会有太大影响,但是强迫症……,哈哈
我已在#73
pattern = pattern.substring(1);
后添加ret = glob.sync('**', opts);
解决问题,请知晓~,可能造成性能浪费,若有时间可处理这块,请知晓~
exports.getSourceByPatterns = function(patterns, opts) {
patterns = patterns || fis.env().get('project.files');
if (!Array.isArray(patterns)) {
patterns = [patterns];
}
opts = _.assign({
cwd: exports.getProjectPath(),
matchBase: true,
ignore: fis.env().get('project.ignore')
}, opts || {});
opts.nodir = true;
opts.sync = true;
var ret = [];
var source = {};
patterns.forEach(function(pattern) {
var exclude = pattern.substring(0, 1) === '!';
if (exclude) {
pattern = pattern.substring(1);
ret = glob.sync('**', opts);// 此处为添加 的代码
}
var mathes = glob.sync(pattern, opts);
ret = _[exclude ? 'difference' : 'union'](ret, mathes);
});
ret.forEach(function(file) {
file = fis.file(opts.cwd, file);
if (file.release) {
source[file.subpath] = file;
}
});
return source;
};
<link rel="import" href="test.tpl?__inline"/>
// test.tpl
<p>test</p>
fis.match('*.tpl', {
release: false,
isHtmlLike: true
});
错误信息
[ERROR] unreleasable file [/Users/hanai/WebstormProjects/fis3-demo/use-amd/test.tpl]
文件中记录为"::image"匹配,实际使用中却是"image"才匹配的到
想到image产出到新的目录中,如下配置时:
//图片处理
fis.media("prod").match("image", {
useHash: false,
release: '/prod/images/$0'
});
图片产出后,竟然只剩下三个文件.gif,.png,.jpg,没有名字了,求教正确的配置应该是怎样的呢
如果这个有了,我感觉会java开发者,会疯狂到爆。。。
index.tpl
内有一script标签
src="js/product.js"
构建后 期望为
src="js/product_MD5.js“
看文档是只对.html内的资源文件进行定位和替换
请问如何设置.tpl文件也应用此规则?
配置文件我是这么写的
fis.set('project.ignore', [
'node_modules/**', 'output/**', 'fis-conf.js',
'conf/**',
'inc/**',
'setting/**'
])
fis
.media('production')
.match('*.js', {
useHash:true,
optimizer: fis.plugin('uglify-js')
})
// fis-conf.js
fis.hook('module', {
mode: 'amd'
});
// account.js 源码
/**
* @require account.css
*/
var reg = require('./reg/reg.js');
var login = require('./login/login.js');
// account.js release之后
define('work/account:1.0.0', function(require, exports, module) {
/**
* @require work/account:1.0.0.css
*/
var reg = require('work/account:1.0.0/reg');
var login = require('work/account:1.0.0/login');
});
不是mode设置成amd之后 会自动shim包裹么?
html useCache默认开启的话,会导致里面的js修改时html不会自动更新,使用时容易引起困惑
与js文件同名的css自动添加到依赖的功能是不是去掉了?
fis.match('/1.0.0/{dir1/*,dir2/*,*}.css', {
packTo: '/pkg/1.0.0.css'
});
打包之后文件顺序不是我想要的,能自定义打包顺序不能?
我弄了两个medianame: local, dev
结果执行的时候
fis3 release local -c
结果正常,
而
fis3 release -c local
结果变成了执行的meida dev
里的内容。
// 并不支持image匹配模式
fis.match('image', {
domain: '....'
});
安装命令
简单科普一下
-g
的含义,镜像使用等注意事项
版本查看
fis -v
升级命令
npm update -g fis
sudo问题
demo
极简的示例,一个html + 一个css + 一个js + 3个png图片
命令
fis release -d xxx,先教给用户接受
-d
参数
资源定位
引导用户查看构建后的url路径变化,引出fis的
资源定位
功能说明
配置文件
引导用户建立
fis-conf.js
配置,使用match参数修改发布路径,再次查看路径
文件指纹
顺势介绍
-m
构建参数,印证资源定位的作用,文件指纹概念让用户参考 这里
压缩资源
启用
-o
参数,展示js、css、图片压缩功能
csssprites
给3个png图片添加
?__sprite
标识,启用-p
参数,介绍自动csssprites
参数组合
组合
-omp
介绍组合写法
目录
fis server open,先让用户知道我们有一个临时目录
发布
fis release,告诉用户,缺省
-d
参数默认发布到上述目录中
启动
fis server start
浏览
文件监听
fis release -w
自动刷新
fis release -wL
替代
告诉用户,如果有自己的server,fis release -wLd <服务器目录> 是一样的
介绍
资源定位
从上一节的构建
-m
参数说起,介绍资源定位、md5、query、domain、url属性等内容
内容嵌入
列一个table,介绍一下各种内容嵌入的关系
依赖声明
介绍资源表,以及三种语言中的声明标识
用最精致的代码解释fis的工作原理
fis以文件对象为中心,固化构建流程,使得开发者可以面向开发规范进行构建配置,而不是面向流程进行进行配置,这是fis与其他构建工具最大的区别。fis内置的构建流程可以抽象为以下逻辑:
整体流程:
/**
* 核心构建流程
* @param opt{Object} 命令行参数
*/
fis.release = function(opt){
// 读取所有源码文件
var files = fis.find(fis.project.root);
// 单文件构建阶段
files.forEach(function(path, index){
var file = fis.file(path); // 创建文件对象
if(file._cache.isExpired()){ // 检查构建缓存
fis.compile(file, opt); // 同步构建
file._cache.save(); // 建立缓存
} else {
file._cache.revert(); // 从缓存读取内容
}
files[index] = file;
});
// 多文件批量处理阶段
fis.plugin('prepackage', files, opt); // 预打包
fis.plugin('package', files, opt); // 打包
fis.plugin('sprite', files, opt); // sprite
fis.plugin('postpackage', file, opt); // 后打包
// 发布阶段
fis.deploy(file);
};
单文件构建逻辑
/**
* 单文件构建逻辑
* @param file{FISFile} fis文件对象
* @param opt{Object} 命令行参数
*/
fis.compile = function(file, opt){
if(opt.lint && file.lint){ // 命令行参数控制是否开启校验处理
file.lint(file);
}
if(file.parser){ // 非标准语言转为标准语言
file.parser(file);
}
if(file.preprocessor){ // 预处理
file.preprocessor(file);
}
if(file.standard){ // 内置语法处理,可关闭
file.standard(file);
}
if(file.postprocessor){ // 后处理
file.postprocessor(file);
}
if(opt.optimize && file.optimizer){ // 命令行参数控制是否开启压缩处理
file.optimizer(file);
}
}
fis的文件对象
var path = require('path');
fis.file = function(path){
var file = path.parse(path); // 基本文件属性
var rules = fis.getRules(path); // 根据文件路径获取fis.match配置的规则
rules.forEach(function(rule){
merge(file, rule); // 把命中的规则属性配置合并到文件对象上
});
file._cache = new fis.Cache(path); // 缓存对象
return file;
}
fis.match('**', { domain: 'www.baidu.com', useDomain: true }); path = __dirname+'/file/ext/modular/js.js?__inline'; f = _.wrap(path); url = f.getUrl(); expect(url).to.equal('www.baidu.com/file/ext/modular/js.js?__inline'); // 预期:"www.baidu.com/file/ext/modular/js.js?__inline" // 实际:"www.baidu.com/file/ext/modular/js_1f8fb39.js?__inline"
!important
规则导致规则混乱 Bug-c
清理掉不是本项目缓存的问题未来
var nsConnector = config.get('name spaceConnector', ':');
当前 media 环境下面设置有 project.files 列表时,走 fis.project.getSourceByPatterns,然而在该方法中也就是project。js的68行处,未加针对ignore是否存在的报错,如果ignore被删除会导致map方法报错。
前提:配置规则定义好后,其中并没有useHash:true的配置
当执行命令:fis3 release prod之后,所有静态文件包括图片都被自动添加了指纹,需要在prod模式中添加useHash:false,才能不添加指纹
这个功能是因为指定了media自动添加吗,是不是可以去掉呢
我在用fis做二次开发,看你们fis3出来了,打算直接升级到fis3去做,不知道目前fis3算是稳定版本吗
折腾了几天,感觉新版本并不适合现在的项目,打算再恢复到老版fis,不知道以后会对老版本fis的支持如何?
现在情况是 project/less/*.less
下的文件 a.less,b.less
要放到 /publish/css/a.css, /publish/css/b.css
该如何写呢?
我只想监控 project/less/*.less
不想写成 match('*.less', x)
其实这个 $0
,应该有自定义拆分的需求吧,路径/文件名/扩展名 不知道如何拆开
fis 中
在模板模块中以及 JS 模块中对应同名的 CSS 模块会自动与模板模块、JS 模块添加依赖关系,进行加载管理,用户不需要显示进行调用加载。
现在在 fis3 中没有生效。
场景:
有项目 path/to/a path/to/b path/to/c path/to/d 等,我们现在是gruntfile.js方案,
使用方式是 cmd 开多个路径,然后执行 grunt 。
有同学的mac机器上经常出现端口占用的报错(配置里面每个都手动填了不同端口的,我的机器没遇到过)。
正巧 fis3 出来,我想要切换过来,所以有了这个想法:
如果我多个项目(都有 fis-config.js) ,如何能共用一个 watch / livereload / cmd 等进程 & 端口
简单说就是如何单一入口管理他们,
不光是为了避免冲突,
同时会切换几个项目的需求是有的。
【发现用 prepros.io 这个gui 工具就可以很好的同时管理多个项目,他只是没有自动雪碧图。】
//test.js
//release前
var $ = require('$');
//...
//release后
define('test', ['$'], function(require, exports, module){
var $ = require('$');
});
我想实现这样的构建效果, 之前是修改的jswrapper,现在应该怎么设置?
http://fex-team.github.io/fis3/docs/api/config-props.html
启用 lint 插件进行代码检查
fis.match('*.js', {
paser: fis.plugin('js', { // 这里是 lint 吧~~
})
})
看示例的时候有 '*.html'
的,也有 '**.html'
的还有 'xxx/**/*.html'
的,它们有什么区别啊?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.