fis3配置(附package.json)
阿新 • • 發佈：2017-08-26
filter push 通用 前端 esc 指定 get ios 去掉
大部分來自 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_modules
fis.unhook(‘components‘)
fis.hook(‘node_modules‘)
fis.match(‘/{node_modules}/**.js‘, {
isMod: true,
useSameNameRequire: true
});
/*************************目錄規範*****************************/
// 開啟同名依賴, 同名模板依賴nui同名js跟css
fis.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‘
})
});
// ------ 配置lib
fis.match(‘/lib/**.js‘, {
release: ‘${project.static}/$&‘
});
// ------ 配置modules
fis.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‘
});
// 配置js
fis.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 html
Object.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)