项目中如果管理前端文件CSS和JS
2014-02-16 21:50
239 查看
如何管理CSS和JS文件,一直是前端一个热门的话题。下面将简单分享一下使用心得,欢迎大家吐槽、拍砖和提供更好的实现方式。
一、管理CSS文件,本博客将讨论less管理。
iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。
把上面的文件按实际需要合并成一个iBase.less文件。如:打算将iReset.less、iButton.less合并在iBase.less中。
在iBase.less中引入如下文件即可:
@import "iReset.less";
@import "iButton.less";
页面级的管理,把页面中设计到的模块引入进来,和当前页面的样式引入进来。
例如:页面中用到了iCss3.less,iDialog.less、iDemo.less。
在iDemo.less中引入:
@import "iCss3.less";
@import "iDialog.less";
/* 页面中独立的样式 */
最后通过编译生成需要的CSS文件。
2、管理JS文件。
iJquery.js、iString.js、iArray.js、iDate.js、iBrowser.js、iUITab.js、iUIMenu.js、iUIDialog.js、iUIForm.js、iUIDatagrid.js等等。
JS部分大体可以分为两类,一类是常用的操作函数封装、另一类是基本UI的封装。
依赖jquery.js框架。在当前页面移入iJquery.js。
页面级的管理,iDemo.js中用到了 iString.js和iUIDialog.js和页面中对DOM的操作。
JS如何向java、php等后端语言一样引入呢????????????
本博客提供一种方式:
依赖gruntjs构建,将js文件引入到jade文件中,在将jade文件的名称转换成js(即改变后缀名)到一个目录中,在将这个目录的js文件压缩成生成目标文件。
例如:
iDemo.jade中包含 iString.js、iUIDialog.js、iDemoDom.js
在iDemo.jade中引入如下文件:
include iString.js
include iUIDialog.js
include iDemoDom.js
将编译iDemo.jade 生成iDemo.js,iDemo.js文件中所需要的js了,然后在将这个文件压缩成目标文件。
这个管理JS方法,借用了jade的include作用允许插入文件内容到另一个文件中。
感兴趣的前端爱好者可以试试哦。。。。。。。
确实很方便
本人水货专长,欢迎大家吐槽和拍砖。。。。。。。。。
哈哈,本博客给懂的人写的,你懂得!
一、管理CSS文件,本博客将讨论less管理。
iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。
把上面的文件按实际需要合并成一个iBase.less文件。如:打算将iReset.less、iButton.less合并在iBase.less中。
在iBase.less中引入如下文件即可:
@import "iReset.less";
@import "iButton.less";
页面级的管理,把页面中设计到的模块引入进来,和当前页面的样式引入进来。
例如:页面中用到了iCss3.less,iDialog.less、iDemo.less。
在iDemo.less中引入:
@import "iCss3.less";
@import "iDialog.less";
/* 页面中独立的样式 */
最后通过编译生成需要的CSS文件。
2、管理JS文件。
iJquery.js、iString.js、iArray.js、iDate.js、iBrowser.js、iUITab.js、iUIMenu.js、iUIDialog.js、iUIForm.js、iUIDatagrid.js等等。
JS部分大体可以分为两类,一类是常用的操作函数封装、另一类是基本UI的封装。
依赖jquery.js框架。在当前页面移入iJquery.js。
页面级的管理,iDemo.js中用到了 iString.js和iUIDialog.js和页面中对DOM的操作。
JS如何向java、php等后端语言一样引入呢????????????
本博客提供一种方式:
依赖gruntjs构建,将js文件引入到jade文件中,在将jade文件的名称转换成js(即改变后缀名)到一个目录中,在将这个目录的js文件压缩成生成目标文件。
例如:
iDemo.jade中包含 iString.js、iUIDialog.js、iDemoDom.js
在iDemo.jade中引入如下文件:
include iString.js
include iUIDialog.js
include iDemoDom.js
将编译iDemo.jade 生成iDemo.js,iDemo.js文件中所需要的js了,然后在将这个文件压缩成目标文件。
这个管理JS方法,借用了jade的include作用允许插入文件内容到另一个文件中。
感兴趣的前端爱好者可以试试哦。。。。。。。
确实很方便
本人水货专长,欢迎大家吐槽和拍砖。。。。。。。。。
哈哈,本博客给懂的人写的,你懂得!
相关文章推荐
- 项目中如果管理前端文件CSS和JS
- 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
- 项目开发之前端css、img、js组织方式与管理方法
- 前端资源多个产品整站一键打包&包版本管理(四)—— js&css文件文件打包并生成哈希后缀,自动写入路径、解决资源缓存问题。
- 引用外部.css或.js文件的路径问题--jsp或html页面或是在web项目中的引用
- 前端部署的js文件和css文件不显示的原因
- python——Django项目开发:配置项目/static/路径,调用css、img、js等静态文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 大型web网站前端css\js\图片版本管理解决方案
- [前端优化] 使用Combres合并对js、css文件的请求
- 在 msbuild 生成时,每次都生成很多css,js,img 文件,如果不想每次编译都有这些需要这样配置
- 如果把js,css文件内嵌到自定义控件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- JSP中引入项目中的js文件或css文件或图片
- vue项目中引入外部css以及js文件的方法
- 在django项目中加入像bootstrap这样的css,js等静态文件
- 在django项目中加入像bootstrap这样的css,js,图片等静态文件
- 在django项目中加入像bootstrap这样的css,js等静态文件
- [前端优化]使用Combres合并对js、css文件的请求
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件