大部分来自 https://github.com/yanhaijing/fis3-base 里的原生配置, 新增部分为舍弃了fis3的component 换为node_modules, 去掉了一些自己不怎么用的功能
// 设置项目属性fis.set(‘project.name‘, ‘fis3-base‘);fis.set(‘project.static‘, ‘/static‘);fis.set(‘project.files‘, [‘*.html‘, ‘map.json‘, ‘/test/*‘]);// 引入模块化开发插件,设置规范为 commonJs 规范。fis.hook(‘commonjs‘, { ???baseUrl: ‘./modules‘, ???extList: [‘.js‘, ‘.es‘]});// 不使用fis3的component 使用插件fis3-hook-node_modules把插件依赖转为node_modulesfis.unhook(‘components‘)fis.hook(‘node_modules‘)fis.match(‘/{node_modules}/**.js‘, { ???isMod: true, ???useSameNameRequire: true});/*************************目录规范*****************************/// 开启同名依赖, 同名模板依赖nui同名js跟cssfis.match(‘/modules/**‘, { ???useSameNameRequire: true});// ------ 全局配置// 允许你在 js 中直接 require css+文件fis.match(‘*.{js,es}‘, { ???preprocessor: [ ???????fis.plugin(‘js-require-file‘), ???????fis.plugin(‘js-require-css‘, { ???????????mode: ‘dependency‘ ???????}) ???]});// 配置图片压缩fis.match(‘**.png‘, { ???optimizer: fis.plugin(‘png-compressor‘, { ???????type: ‘pngquant‘ ???})});// ------ 配置libfis.match(‘/lib/**.js‘, { ???release: ‘${project.static}/$&‘});// ------ 配置modulesfis.match(‘/modules/(**)‘, { ???release: ‘${project.static}/$1‘})// 配置css//fis.match(/^\/modules\/(.*\.scss)$/i, {// ?parser: fis.plugin(‘sass‘, {// ?????include_paths: [‘modules/css‘, ‘components‘] // 加入文件查找目录// ?})//});fis.match(/^\/modules\/(.*\.less)$/i, { ???parser: fis.plugin(‘less‘, { ???????paths: [] ???})});fis.match(/^\/modules\/(.*\.(scss|less|css))$/i, { ???rExt: ‘.css‘, ???isMod: true, ???release: ‘${project.static}/$1‘, ???postprocessor: fis.plugin(‘autoprefixer‘, { ???????browsers: [‘IE >= 8‘, ‘Chrome >= 30‘, ‘last 2 versions‘] // pc ???????????// browsers: [‘Android >= 4‘, ‘ChromeAndroid > 1%‘, ‘iOS >= 6‘] // wap ???})});fis.match(/^\/modules\/(.*\.(?:png|jpg|gif))$/i, { ???release: ‘${project.static}/$1‘});// 配置jsfis.match(/^\/modules\/(.*\.js)$/i, { ???parser: fis.plugin(‘babel-5.x‘), ???rExt: ‘js‘, ???isMod: true, ???release: ‘${project.static}/$1‘});fis.match(/^\/modules\/(.*\.js)$/i, { ???isMod: true, ???release: ‘${project.static}/$1‘});// ------ 配置前端模版 使用template.js//fis.match(‘**.tmpl‘, {// ?parser: fis.plugin(‘template‘, {// ?????sTag: ‘<#‘,// ?????eTag: ‘#>‘,// ?????global: ‘template‘// ?}),// ?isJsLike: true,// ?release: false//});// ------ 配置模拟数据fis.match(‘/test/**‘, { ???release: ‘$0‘});fis.match(‘/test/server.conf‘, { ???release: ‘/config/server.conf‘});/*************************打包规范*****************************/// 因为是纯前端项目,依赖不能自断被加载进来,所以这里需要借助一个 loader 来完成,// 注意:与后端结合的项目不需要此插件!!!fis.match(‘::package‘, { ???// npm install [-g] fis3-postpackager-loader ???// 分析 __RESOURCE_MAP__ 结构,来解决资源加载问题 ???postpackager: fis.plugin(‘loader‘, { ???????resourceType: ‘commonJs‘, ???????useInlineMap: true // 资源映射表内嵌 ???})});// debug后缀 不会压缩var map = { ???‘rd‘: { // 项目发布到指定机器 ???????host: ‘‘, ???????path: ‘‘ ???}, ???‘rd-debug‘: { // 查看发布到指定机器的项目的情况(无压缩版本) ???????host: ‘‘, ???????path: ‘‘ ???}, ???‘prod‘: { ?// 发布项目 ???????host: ‘‘, ???????path: ‘/${project.name}‘ ???}, ???‘prod-debug‘: { ?//查看发布项目的情况(无压缩版本) ???????host: ‘‘, ???????path: ‘‘ ???}};// 通用 1.替换url前缀 2.添加mr5码 3.打包 4.合图 5.重新定义资源路径Object.keys(map).forEach(function(v) { ???var o = map[v]; ???var domain = o.host + o.path; ???fis.media(v) ???????.match(‘**.{es,js}‘, { ???????????useHash: true, ???????????domain: domain ???????}) ???????.match(‘**.{scss,less,css}‘, { ???????????useSprite: true, ???????????useHash: true, ???????????domain: domain ???????}) ???????.match(‘::image‘, { ???????????useHash: true, ???????????domain: domain ???????}) ???????.match(‘**/(*_{x,y,z}.png)‘, { ???????????release: ‘/pkg/$1‘ ???????}) ???????// 启用打包插件,必须匹配 ::package ???????.match(‘::package‘, { ???????????spriter: fis.plugin(‘csssprites‘, { ???????????????layout: ‘matrix‘, ???????????????// scale: 0.5, // 移动端二倍图用 ???????????????margin: ‘10‘ ???????????}), ???????????postpackager: fis.plugin(‘loader‘, { ???????????????allInOne: true, ???????????}) ???????}) ???????.match(‘/lib/es5-{shim,sham}.js‘, { ???????????packTo: ‘/pkg/es5-shim.js‘ ???????}) ???????.match(‘/components/**.css‘, { ???????????packTo: ‘/pkg/components.css‘ ???????}) ???????.match(‘/components/**.js‘, { ???????????packTo: ‘/pkg/components.js‘ ???????}) ???????.match(‘/modules/**.{scss,less,css}‘, { ???????????packTo: ‘/pkg/modules.css‘ ???????}) ???????.match(‘/modules/css/**.{scss,less,css}‘, { ???????????packTo: ‘‘ ???????}) ???????.match(‘/modules/css/common.scss‘, { ???????????packTo: ‘/pkg/common.css‘ ???????}) ???????.match(‘/modules/**.{es,js}‘, { ???????????packTo: ‘/pkg/modules.js‘ ???????}) ???????.match(‘/modules/app/**.{es,js}‘, { ???????????packTo: ‘/pkg/aio.js‘ ???????}) ???????// 为了上线方便,将静态文件发布到同一个目录 ???????// .match(‘**/(*.{css,less,scss,es,js,jpg,png,gif})‘, { ???????// ????release: ‘/prod/$1‘ ???????// })});// 压缩css js htmlObject.keys(map) ???.filter(function(v) { ???????return v.indexOf(‘debug‘) < 0 ???}) ???.forEach(function(v) { ???????fis.media(v) ???????????.match(‘**.{es,js}‘, { ???????????????optimizer: fis.plugin(‘uglify-js‘) ???????????}) ???????????.match(‘**.{scss,less,css}‘, { ???????????????optimizer: fis.plugin(‘clean-css‘, { ???????????????????‘keepBreaks‘: true //保持一个规则一个换行 ???????????????}) ???????????}); ???});// 本地产出发布fis.media(‘prod‘) ???.match(‘**‘, { ???????deploy: [ ???????????fis.plugin(‘skip-packed‘, { ???????????????// 默认被打包了 js 和 css 以及被 css sprite 合并了的图片都会在这过滤掉, ???????????????// 但是如果这些文件满足下面的规则,则依然不过滤 ???????????????ignore: [] ???????????}), ???????????fis.plugin(‘local-deliver‘, { ???????????????to: ‘output‘ ???????????}) ???????] ???});// 发布到指定的机器//[‘rd‘, ‘rd-debug‘].forEach(function(v) {// ?fis.media(v)// ?????.match(‘*‘, {// ?????????deploy: [// ?????????????fis.plugin(‘skip-packed‘, {// ?????????????????// 默认被打包了 js 和 css 以及被 css sprite 合并了的图片都会在这过滤掉,// ?????????????????// 但是如果这些文件满足下面的规则,则依然不过滤// ?????????????????ignore: []// ?????????????}),// ?????????????fis.plugin(‘http-push‘, {// ?????????????????receiver: ‘xxx/fisreceiver.php‘,// ?????????????????to: ‘xxx/‘ + fis.get(‘project.name‘)// ?????????????})// ?????????]// ?????});//});
package.json
{ ?"name": "", ?"version": "", ?"description": "", ?"repository": { ???"type": "git", ???"url": "" ?}, ?"devDependencies": { ???"fis-parser-babel-5.x": "^1.4.0", ???"fis-parser-less": "^0.1.3", ???"fis-parser-template": "^0.3.3", ???"fis-postprocessor-autoprefixer": "0.0.5", ???"fis3-deploy-skip-packed": "0.0.5", ???"fis3-hook-commonjs": "^0.1.26", ???"fis3-hook-node_modules": "^2.2.8", ???"fis3-postpackager-loader": "^2.1.4", ???"fis3-postprocessor-autoprefixer": "^1.0.0", ???"fis3-preprocessor-js-require-css": "^0.1.1", ???"fis3-preprocessor-js-require-file": "^0.1.3" ?}}
fis3配置(附package.json)
原文地址:http://www.cnblogs.com/yosoro/p/7435359.html