fis3 php cgi,FIS3 : FIS3 常用配置
FIS3 常用配置
制定目录规范
相信在前端工程化开发中，目录规范是必不可少的，比如哪些目录下是组件，哪些目录下的 js 要被特殊的插件处理，满足特殊的需求，比如对 commonjs、AMD 的支持。
这一节给大家介绍目录规范的制定，把它跟部署目录衔接起来；
源码目录规范
.
├── page
│ └── index.html
├── static
│ └── lib
├── test
└── widget
├── header
├── nav
└── uipage 放置页面模板
widget 一切组件，包括模板、css、js、图片以及其他前端资源
test 一些测试数据、用例
static 放一些组件公用的静态资源
static/lib 放置一些公共库，例如 jquery, zepto, lazyload 等
当编译产出时，产出结果目录是这样的；
.
├── static
├── template
└── teststatic 所有的静态资源都放到这个目录下
template 所有的模板都放到这个目录下
test 还是一些测试数据、用例
那么，我们的源码目录规范的指定是为了我们好维护，其产出目录规范是为了我们容易部署。
用 fis3 可以很方便的搞定这个事情；
fis-conf.js
// 所有的文件产出到 static/ 目录下
fis.match('*', {
release: '/static/$0'
});
// 所有模板放到 tempalte 目录下
fis.match('*.html', {
release: '/template/$0'
});
// widget源码目录下的资源被标注为组件
fis.match('/widget/**/*', {
isMod: true
});
// widget下的 js 调用 jswrapper 进行自动化组件化封装
fis.match('/widget/**/*.js', {
postprocessor: fis.plugin('jswrapper', {
type: 'commonjs'
})
});
// test 目录下的原封不动产出到 test 目录下
fis.match('/test/**/*', {
release: '$0'
});
这样就完成了目录规范的制定
等等，可能我们还需要做一些优化，来实现对整个工程的优化；
需要做以下几个方面的事情
js, css 在开发时不压缩，但在产品发布时压缩
代码进行合理的合并处理
// 所有的文件产出到 static/ 目录下
fis.match('*', {
release: '/static/$0'
});
// 所有模板放到 tempalte 目录下
fis.match('*.html', {
release: '/template/$0'
});
// widget源码目录下的资源被标注为组件
fis.match('/widget/**/*', {
isMod: true
});
// widget下的 js 调用 jswrapper 进行自动化组件化封装
fis.match('/widget/**/*.js', {
postprocessor: fis.plugin('jswrapper', {
type: 'commonjs'
})
});
// test 目录下的原封不动产出到 test 目录下
fis.match('/test/**/*', {
release: '$0'
});
// optimize
fis.media('prod')
.match('*.js', {
optimizer: fis.plugin('uglify-js', {
mangle: {
expect: ['require', 'define', 'some string'] //不想被压的
}
})
})
.match('*.css', {
optimizer: fis.plugin('clean-css', {
'keepBreaks': true //保持一个规则一个换行
})
});
// pack
fis.media('prod')
// 启用打包插件，必须匹配 ::package
.match('::package', {
packager: fis.plugin('map'),
spriter: fis.plugin('csssprites', {
layout: 'matrix',
margin: '15'
})
})
.match('*.js', {
packTo: '/static/all_others.js'
})
.match('*.css', {
packTo: '/staitc/all_others.css'
})
.match('/widget/**/*.js', {
packTo: '/static/all_comp.js'
})
.match('/widget/**/*.css', {
packTo: '/static/all_comp.css'
});
发布 fis3 release prod，进行合并、压缩等优化
发布 fis3 release 不做压缩不做合并
部署远端测试机
由于前端项目的特殊性，一般都需要放到服务器上去运行，那么在本地开发完成后，需要把编译产出部署到测试远端机器上面去，这节就给大家分享一下在 fis3 这个操作怎么做；
在 fis3 中用 fis.media 提供各个状态区分，那么我们也可以轻松制定不同状态下的发布方式；比如要部署到 qa 的机器上抑或是 rd 的机器；
准备工作，我们先选定自己需要使用的 deploy 插件，在 fis3 部署方式都是用插件实现的；
这个插件就是以 HTTP 提交的方式来完成远端部署的，当然由于安全性等原因这种方式只适用于测试阶段，请勿直接拿来上线；
HTTP 提交的方式上传就得有一个接受端，http-push 提供了一个 php 版本的接收端 receiver.php ，其他后端可以模仿实现一个。这个接收端需要放到你的 Web 服务 WWW 目录下，并且可以被访问到；
部署好接收端，并且它能正常被访问到，比如 url 是 http:///receiver.php 其配置如下
fis.media('qa').match('**', {
deploy: fis.plugin('http-push', {
receiver: 'http:///receiver.php',
to: '/home/work/www'
})
});
fis3 release qa 当执行时就会部署到配置的 qa 的机器上。
异构语言 less 的使用fis.match('**.less', {
parser:fis.plugin('less'), //invoke`fis-parser-less`,
rExt: '.css'
});
异构语言 sass 的使用fis.match('**.sass', {
parser:fis.plugin('sass'), //invoke`fis-parser-sass`,
rExt: '.css'
});
前端模板的使用fis.match('**.tmpl', {
parser:fis.plugin('utc'), //invoke`fis-parser-utc`
isJsLike: true
});
某些资源不产出fis.match('*.inline.css', {
// 设置 release 为 FALSE，不再产出此文件
release: false
})
某些资源从构建中去除
FIS3 会读取全部项目目录下的资源，如果有些资源不想被构建，通过以下方式排除。
fis.set('project.ignore', [
'output/**',
'node_modules/**',
'.git/**',
'.svn/**'
]);