大部分来自 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"
}
}