某人

此前素未谋面、此后遥遥无期

0%

认识fis3

发表于 更新于 分类于

背景等信息

fis也是个前端工程构建工具，现在已经到fis3,是百度团队出的一个工具。下面给出一个张图 仅供参考

然后没了。。。

fis3官方网址-传送
github项目地址-传送

关于node与npm的一些信息

安装node(里面会自带npm),步骤…,已经成功了

有时使用npm安装一些包的过程可能会失败，那用国内的npm镜像试试，如淘宝的npm镜像，这有张官网截图：
淘宝 NPM 镜像-官方网站

去看看官网 首页，然后就是。。。你懂了

看一些基本命令

1
2
3
4
5
6
7
备注：如express模块
npm list #列出已安装模块
npm show express  #显示模块详情
npm update #升级当前目录下的项目的所有模块
npm update express #升级当前目录下的项目的指定模块
npm update -g express  #升级全局安装的express模块
npm uninstall express  #卸载指定的模块

node有一个模块叫n,是专门用来管理node.js的版本的，安装命令：

1
npm install -g n

windows总是不能安装n模块，老是报错，有人说是：n 的 github 上说目前不支持 Windows！，这里有个帖子传送门

1
2
n stable #升级node.js到最新稳定版
n后面也可以跟随版本号比如：n v0.10.26或n 0.10.26

fis3的基本工作

Node 版本要求 0.8.x，0.10.x, 0.12.x，4.x，不在此列表中的版本不予支持。最新版本 node 支持会第一时间跟进，支持后更新支持列表。

此处使用windows

1
2
npm install -g fis3 #安装
fis3 -v #安装完查看版本

先上一段代码

此处代码好坏我自己都不敢看

目录结构

html部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link rel="stylesheet" type="text/css" href="./less/common.less">
<link rel="stylesheet" type="text/css" href="./less/task1.less">
<link rel="stylesheet" type="text/css" href="./less/task2.less">
</head>
<body>

	<div class="common">
		<h2>任务1：img图片</h2>
		<p><img src="img/xjh.jpg"></p>
	</div>

	<div class="task1">
		<h2>任务2：这是一个很久的神话</h2>
   		<p>最终他们都消失了...............</p>
	</div>

	<div class="task2">
		<h2>任务3：这是一个人口很多的地方</h2>
		<p>好像已经无法控制了........</p>
	</div>

	<div class="common">
		<h2>任务4：雪碧图</h2>
		<ul class="icon-list">
		    <li class="list-1">item1</li>
		    <li class="list-2">item2</li>
		</ul>
	</div>
	<div class="common">
		<h2>任务5：嵌入base64</h2>
		<img src="img/logo.png?__inline">
	</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="js/a.js"></script>
<script src="js/b.js"></script>

其他代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//common.less
*{margin:0;padding:0;}
ul,li{list-style:none;}
body{padding:30px;}
p{line-height:40px;}
h2{padding:20px 0;}
.icon-list{
	li{position:relative;
		&:before{display:block;content:'';width:16px;height:16px;position:absolute;left:-16px;top:3px;}
	}
	li.list-1:before {
		background-image: url('../img/list-1.png?__sprite');
	}
	li.list-2:before {
		background-image: url('../img/list-2.png?__sprite');
	}
}

//task1.less
.task1{
	h2{text-decoration:underline;}
}

//task2.less
.task2{
	h2{color:red;}
}

//a.js
function aaa(){
	console.log($);
	console.log('hello World!!!');
	var img = __uri('../img/icon_recon.jpg');
	console.log(img);
}
aaa();

//b.js
function bbb(){
	console.log('bb');
}
bbb();

fis-conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
 * default debug mode
 * fis3 release debug
 * fis3-postpackager-loader #可对页面散列文件进行合并
 * fis-spriter-csssprites #对css文件,以及html文件css片段进行csssprites处理
 * fis-optimizer-uglify-js 插件进行压缩，已内置
 * fis-optimizer-clean-css 插件进行压缩，已内置
 * fis-optimizer-png-compressor 插件进行压缩，已内置
 */
fis.match('::package', { //在package阶段所有文件分配某些属性
		postpackager: fis.plugin('loader'),	//文件合并
		spriter: fis.plugin('csssprites')	//启用 fis-spriter-csssprites 插件
	})
	.match('*.{js,css,png,jpg}', {//加md5
		useHash: true
	})
	.match('*.less', {	//合并图片
		useSprite: true
	})
	.match('*.less', {	//less转换为css
		// fis-parser-less 插件进行解析
		parser: fis.plugin('less'),
		// .less 文件后缀构建后被改成 .css 文件
		rExt: '.css'
	})
	.match('*.less', {	//将转换的less压缩
		// 压缩css
		optimizer: fis.plugin('clean-css')
	})
	.match('*.less', {	//将转换的less合并
		packTo: './css/task.css'
	})
	.match('*.js', {	//压缩js
		optimizer: fis.plugin('uglify-js')
	})
	.match('*.js', {	//合并js
		packTo: './js/task.js'
	})
	.match('*.png', {//压缩png图片
		optimizer: fis.plugin('png-compressor')
	})
	.match('*.{png,gif,jpg}', {//设置图片路径
	    release: '/images$0',
	    url : '/images$0'
	});


fis.media('debug').match('*.{js,less,png}', {
	useHash: false,
	useSprite: false,
	optimizer: null,
	packTo:null
})

fis3的一些命令

1
2
3
4
5
6
fis3 release #发布到默认服务器目录下
fis3 release -d ../output #发布output目录下
fis3 server open #打开服务器目录
fis3 server start #启动服务器
fis3 release -wL #监听文件自动刷新
fis3 server -h #查看更多参数

在文件目录下，使用命令：

1
2
fis3 server start #启动服务器
fis3 release #发布到默认服务器目录下

然后你会看到构建后的文件情况,代码上面有注释，这我就不说了。
github代码地址！！！

资源定位

定位JS：所有的 js 发布到/static/js/xxx目录下

1
2
3
fis.match('**.js', {
    release : '/static/js$0'
});

定位CSS：所有的 css 发布到/static/css/xxx目录下

1
2
3
fis.match('**.css', {
    release : '/static/css$0'
});

定位图片：所有image目录下的.png，.gif文件发布到/static/pic/xxx目录下

1
2
3
fis.match('/img/(*.{png,gif})', {
    release: '/static/pic/$1$2'
});

为止

还有一部分， 暂时到这了。

参考链接

  1. fis2官网地址
  2. 淘宝 NPM 镜像