脚本宝典收集整理的这篇文章主要介绍了基于fis3的前段自动化(适合中大型项目),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1. 前段自动化必要性
现代项目中使用大量sass,coffeescript,es6,jshint等等大量的编译型,预处理型工具,如果在前端项目中每个都配置一个config文件并安装上对应软件包势必会大量增加前端人员工作量
一个大型项目需要大量的外部js,css文件(当然,考虑到项目的纯净性和可修改维护性应该减少外部组件引用,不过针对公司如果成员没有足够能力或时间完成组件)如mvvm框架、jquery、bootstrap、各种ui组件、lodash等等,会增加页面引用个数,遇到这种情况会将这些文件按打包,自己干?还是给自动化工具吧
图片的压缩功能也可以交给自动化工具
繁杂的前端模块化也可以轻松实现(这篇咱先不说)
2. 为啥使用fis3
3. 举个栗子
先放代码:这个项目是一个koa和fis结合的代码,再次我们只先说fis相关的
-
目录结构:
在frontend中就是fis相关代码,其他文件就是nodejs和koa中的某些配置(随口一所:node项目中gulp的作用:代码检测nodejs,启动fis脚本,删除fis产生的前端文件)
-
/frontend/src/:前端项目的源代码
/frontend/src
|--components/compass
|--externalM
|--inlinePart
|--internalM
|--test
|--views
|--fis-conf.js
-
/frontend/src/externalM:主要放置外部引用文件js,scss,img(我这里随便放置几个常用的)
/frontend/src/externalM
|--amazeui
|--avalon
|--jqRaty
|--mocha
|--es6-promise.js
|--jquery.js
-
/frontend/src/internalM:主要放置内部引用文件,包括对应页面,组件,公共的js,scss,img文件;内部以文件夹区分各个模块
/frontend/src/internalM
|--hello
|--hello.js
|--hello.scss
|--publicAsset
-
/frontend/src/views:放置各个页面的视图文件
/frontend/src/views
|--error.ejs
|--hello.ejs
|--notfound.ejs
-
/frontend/src/inlinePart/:放置引用部分,可以理解为jsp中的include
/frontend/src/inlinePart
|--footer.htML
|--header.html
-
/frontend/src/test:放置单元测试文件
/frontend/src/test
|--hello.test.ejs
/frontend/src/components:放置fis所用到的组件,比如sass需要的compass扩展
/frontend/src/fis-conf.js:重头戏,fis的配置文件
-
fis的配置文件:
-
忽略文件 + 雪碧图
fis.set('PRoject.ignore',['components/**','fis-conf.js']);//如果不设置忽略所有文件都会产出,所以先把这两个文件忽略掉
fis.match('::package',{//匹配打包阶段
postpackager : fis.plugin('loader',{
useinlineMap : true
}),
spriter : fis.plugin('csssprITes',{//设置雪碧图
margin: 80,
layout: 'matrix'
})
});
-
文件打包:将外部文件打包减少网络请求,在发布模式下将代码压缩
//------------------css打包------------------
fis.match('{externalM/amazeui/css/amazeui.min.css}',{
packTo : '/pkg/pkg.css'
});
fis.match('/pkg/pkg.css',{
release : '/static/pkg/pkg.css',
url : '$0'
});
fis.media('publish').match('/pkg/pkg.css',{
release : '/static/pkg/pkg.css',
url : '$0', //fis一个很牛的特性,可以指定产出对应资源的url
optimizer : fis.plugin('clean-css'), //压缩
useHash : true //使用Md5后缀清除缓存
});
//------------------js打包------------------
fis.match('externalM/{jquery,amazeui/js/amazeui,avalon/avalon.shim,es6-promise}.js',{
packTo : '/pkg/pkg.js'
});
//在此处设置js代码打包放置顺序(amazeui依赖jquery)
fis.match("externalM/jquery.js",{
packOrder : 1
});
fis.match("externalM/avalon/avalon.shim.js",{
packOrder : 2
});
fis.match("externalM/es6-promise.js",{
packOrder : 3
});
fis.match("externalM/amazeui/js/amazeui.js",{
packOrder : 4
});
fis.match('/pkg/pkg.js',{
release : '/static/pkg/pkg.js',
url : '$0'
});
fis.media('publish').match('/pkg/pkg.js',{
release : '/static/pkg/pkg.js',
url : '$0',
useHash : true,
optimizer :fis.plugin('uglify-js',{ //压缩代码
comPress:{
drop_console : true
}
})
});
-
内部css
fis.media('publish').match('internalM/**.scss',{
release : '/static/$0',
url : '$0',
rExt : '.css', //重命名后缀
useSprite: true, //使用雪碧图
parser : fis.plugin('node-sass',{ //使用sass编译
include_paths:[ //引用compass
'./components/compass'
]
}),
optimizer : fis.plugin('clean-css'),
useHash : true
});
-
内部js引用(外部引用大致相同,这里不再赘述)
fis.media('publish').match('internalM/**.js',{
release : '/static/$0',
url : '$0',
lint : fis.plugin('jshint',{ //设置jshint
...
}),
useHash : true,
optimizer : fis.plugin('uglify-js',{
compress:{
drop_console : true
}
})
});
-
页面文件
fis.match('{views,test}/**.ejs',{
isHtmlLike : true //设置其为html文件模式
});
fis.match('test/**.ejs',{
isHtmlLike : true,
release : '/views/$0' //匹配到的单元测试页面文件,为避免目录混乱,在产出的views目录中添加test目录,并且也是为了后台配置路由方便进行测试
});
-
其他资源引用
//------------------图片------------------
fis.match('*.png',{
optimizer : fis.plugin('png-compressor',{
tyPE : 'pngquant'
}),
release : '/static/$0',
url : '$0',
});
//------------------字体------------------
fis.match('*.{eot,svg,ttf,woff}',{
release : '/static/$0',
url : '$0',
});
-
文件引用:在引用css,js时最普遍都放在html中,不过fis提过可以吧文件引用放在js中(不是模块化,只是简单预处理功能),这样做有点可以让我门在写页面时结构简单不少,而且写单元测试也方便不少;如下所示只要引用了这个文件的html都会把将在注释中写好的文件引用进来,而且如果包括自动打包的文件也会引用打包后的文件
/**
* @require /externalM/jquery.js
* @require /externalM/amazeui/js/amazeui.js
* @require /externalM/jqRaty/jquery.raty.js
* @require /externalM/avalon/avalon.shim.js
* @require /internalM/hello/hello.scss
* @require /externalM/amazeui/css/amazeui.min.css
* @require /externalM/es6-promise.js
*/
function backgroundChange(){
return new Promise(function(resolve){
setTimeout(resolve,1000);
}).then(function(){
$('body').css('background','red');
});
}
4. 结语
fis3是一个大而全的工具,不过也有些问题,commonJs用起来不太方便(相比于webpack也有些欠缺),babel没有想象中的好用,不过不影响它成为一个好用适合传统项目的工具,欢迎大家提出意见和建议修改~~~
以上是脚本宝典为你收集整理的基于fis3的前段自动化(适合中大型项目)全部内容,希望文章能够帮你解决基于fis3的前段自动化(适合中大型项目)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。