本套官网页面采用 less，语法较css可读性更高，具体用法请至 ：http://less.bootcss.com/
本套官网页面采用 fis3 前端构建工具，具体使用方法请至 http://fis.baidu.com
之所以采用fis，仅仅是因为其算是当前为数不多的前端构建工具，而且较之 Gulp/Grunt ，fis 也基本囊括了其能解决的所有问题
当然fis 其实与 webpack 没有可比性，毕竟一个是构建工具，一个是打包工具。
单页页面使用fis 会较为方便，大型的网站构建建议还是使用webpack / 或两者结合使用
fis 优势：“预处理”，“资源压缩 与 合并”，“静态资源替换”，“代码检查”，“模块化”
fis 劣势： 更新迭代缓慢
前后端分离：
基于纯PHP的资源管理方案：
https://github.com/fex-team/fis3-demo/tree/master/backend-resource-manage/use-php
此插件基于 npm ，请先安装 node
fis3 安装方式：http://fis.baidu.com/fis3/docs/beginning/install.html
fis3 插件安装（请启动服务后，根据缺少的插件自行安装 – npm install -g xxx）
需在 host 文件配置相应访问名/或是直接用ip访问
C:\Windows\System32\drivers\etc\hosts
端口号：127.0.0.2:8080
访问地址： host文件配置名 或 端口号 或 本机ip : 8080/ 文件名
官网页面基础架构 常用fis配置都已放置在fis-config.js 如需替换所有图片路径，配置 “cdn-path-release”，编译时自动替换图片路径，页面引用路径同（“资源定位”）。 如需给文件增加md5随机后缀，请自行配置 useHash: true。
fis3 server start // 开启服务
fis3 release -wL // 编译并自动刷新页面
fis3 release -c // 清理缓存
( 可以配置相应测试地址，正式地址对应打包文件配置 )
fis3 release local // 本地生产local包
如需其他打包方式，或者是其他包名，请自行配置
fis-conf.js文件
/*<!--param start-->
//修改cdn的绝对路径（测试环境）
fis.set('cdn-path', '');
//修改cdn的绝对路径（正式环境）
fis.set('cdn-path-release', '');
//修改雪碧图放大缩小倍数，默认是1，iphone是0.5
fis.set('css-scale', 1);
//修改include文件的域名
fis.set('include-host', '');
<!--end-->*/
//配置通用
fis.set('project.files', ['src/**']);
fis.set('project.ignore', ['node_modules/**', 'dist/**', 'release/**', 'README.md', 'local/**', '.git/**', 'fis-conf.js']);
fis.set('charset', 'utf-8');
fis.set('project.charset', 'utf-8');
/*fis.match('**.less', {
parser: fis.plugin('less'), // invoke `fis-parser-less`,
rExt: '.css'
});*/
fis.match('**.less', {
parser: fis.plugin('less-2.x'), // invoke `fis-parser-less`,
rExt: '.css'
});
fis.match('**.tmpl', {
parser: fis.plugin('bdtmpl'),// invoke `fis-parser-bdtmpl`
isJsLike: true,
release: false
}, true);
fis.match('**.html', {
parser: fis.plugin('html-ejs'), // invoke `fis-parser-html-ejs`
postprocessor: fis.plugin('include', {
host: fis.get('include-host'),
debug: true,
release: false, // 设置文件的产出路径。默认是文件相对项目根目录的路径。 false表示不产出
encode: 'utf-8'
}),
useCache: false
});
fis.match('**.js', {
preprocessor: fis.plugin('resload'),
postprocessor: fis.plugin('replace', {
local_cdn: "127.0.0.2:8080",
debug: "local"
})
});
fis.match(/^\/src\/(.*)$/i, {
release: "$1",
useCache: false
});
fis.match(/^\/src\/css\/_.*\.(css|less)/i, {
release: false
});
fis.match(/^\/src\/.*\/(_.*)$/i, {
release: "temp_file/$1"
});
fis.match(/^\/src\/css\/(.*\.png)$/i, {
release: "img/spriter/$1"
});
fis.match(/^\/src\/data\/(.*)$/i, {
useHash: false,
useDomain: true,
useSprite: true
}, true);
//配置打本地包
fis.hook('relative');
fis.media('local')
.match('**', {
relative: true,
charset: fis.get("charset"),
deploy: fis.plugin('encoding')
})
.match("**.html", {
postprocessor: fis.plugin('include', {
nouse: true
})
})
.match('**', {
deploy: [fis.plugin('encoding'), fis.plugin('local-deliver', {
to: './local'
})]
})
.match('*.{css,less}',{
useSprite : true
})
.match('*.js',{
optimizer: fis.plugin('uglify-js'),
})
.match('*.{css,less}',{
optimizer: fis.plugin('clean-css'),
})
.match('**html:css',{
optimizer: fis.plugin('clean-css')
})
.match("**.html",{
postprocessor : fis.plugin('include',{
nouse : true
})
})
.match('::package', {
packager: fis.plugin('map', {
'pkg/app.min.js': [
'js/lib/common.js',
'js/lib/global.js',
],
'pkg/app.min.css': [
'css/_common_frame.less',
'css/index.less',
],
})
})
/*//给相应文件配置是否加上md5随机后缀
.match('*.{js,css,less,png,jpg,jpeg,gif,mp3,mp4,flv,swf,svg,eot,ttf,woff}',{
domain: fis.get("cdn-path"),
useHash: true
})*/
//配置合并雪碧图 __sprite
/*.match('::package', {
spriter: fis.plugin('csssprites',{
layout: 'matrix',
margin: '0'
}),
postpackager : [fis.plugin('usemin'),fis.plugin('supply')]
})*/