.module { div { a { //styles } } }
2.LESS 在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本。
弊 :
1.毕竟最后生成的样式跟最初less样式还是有些区别,当页面样式做调整的时候(一般是在chrome调试),调试完样式后,又要将自己修改的样式写成less样式,看起来麻烦很多。
例:
自己增加了
.module li { line-height:18px; }
后面写回less样式
.module { li { line-height:18px; } }
然后再重新生成css文件。
PS:简单来说就是调试麻烦。
另外我使用的也只有两条简单的命令
lessc xxx.less > xxx.css lessc -x xxx.less > xxx.min.css
后面那条是压缩后的文件。
grunt
grunt这个工具(nodeJs的命令行工具),我用来做Javascript文件的合并、压缩和复制。
以前UI框架的版本是一个大文件bingotouch.css,js也是。这是不利于我们开发的,于是我将他们拆分成模块,拆分之后又面临合并的问题,于是就使用grunt这个工具。
grunt的安装
1、nodeJs环境
因为grunt是基于nodeJs的,所以首先需要安装nodeJS环境
2、安装grunt
安装grunt,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI
grunt的命令行:
npm install -g grunt-cli
3、编写package.json(声明项目中使用的node模块)
{ "name":"BingoTouch", "version":"3.0.0", "engines":{ "node":">= 0.8.0" }, "devDependencies":{ "grunt":"~0.4.0", "grunt-contrib-concat":"~0.3.0", "grunt-contrib-copy" : "~0.4.1", "grunt-contrib-cssmin" : "~0.6.0", "grunt-contrib-uglify":"~0.2.0", "express":"" } }
grunt-contrib-concat : 文件合并
grunt-contrib-copy : 文件复制
grunt-contrib-cssmin : css压缩
grunt-contrib-uglify : js压缩
4、编写Gruntfile.js
module.exports = function(grunt){ grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), concat : { 'dist/bingotouch.js' : ['demo/js/ui.js', "demo/js/module/ui.GarbageCollection.js", 'demo/js/module/ui.plugins.js', 'demo/js/module/ui.Utils.js', 'demo/js/module/ui.Element.js', 'demo/js/module/ui.Transition.js', 'demo/js/module/ui.Page.js', 'demo/js/module/ui.IScroll.js', 'demo/js/module/ui.alias.js', 'demo/js/module/ui.Popup.js', 'demo/js/module/ui.Skin.js', 'demo/js/module/ui.Menu.js', 'demo/js/module/ui.Tab.js', 'demo/js/module/ui.SwipeListview.js', 'demo/js/plugin/zepto.extend.js', 'demo/js/plugin/zepto.ui.js', 'demo/js/plugin/zepto.ui.slider.js', 'demo/js/plugin/zepto.ui.navigator.js', 'demo/js/plugin/zepto.ui.navigator.iscroll.js']/*, 'dist/bingotouch.css' : ['demo/css/base.css','demo/css/module/*.css']*/ }, uglify : { target : { files : { 'dist/bingotouch.min.js': 'dist/bingotouch.js' } } }/*, cssmin : { target : { files : { 'dist/bingotouch.min.css': 'dist/bingotouch.css' } } }*/, copy : { target : { files : [ {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-muti/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/link/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/news/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-scene/business/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js','bingotouch.min.js'],dest: 'demo-template/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'demo-whole/js/'} , {expand: true,cwd: 'dist/',src: ['bingotouch.js'],dest: 'doc/api-doc/'} , {expand: true,cwd: 'demo/js/plugin/',src: ['linkplugins.js','sharesdkplugin.js'],dest: 'doc/api-doc/'}, {expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-muti/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/link/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/news/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-scene/business/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css','bingotouch.min.css'],dest: 'demo-template/css/'} , {expand: true,cwd: 'demo/css/',src: ['bingotouch.css'],dest: 'demo-whole/css/'} ] } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); /*grunt.loadNpmTasks('grunt-contrib-cssmin');*/ grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default', ['concat','uglify'/*,'cssmin'*/,'copy']); }
这文件的配置是我重构后,css和js的合并、压缩、复制。细心的人会发现cssmin的功能我没使用,这是因为我的css是less编写的,所以css文件的合并压缩也就由less工具完成。
yuidoc
文档是作为框架必不可少的一部分,如果快捷方便生成文档也是我们考虑的。
这是我之前对文档化工具的调查: http://www.cnblogs.com/lovesong/p/3267047.html
我选择了yuidoc作为文档化工具,下面是我生成的文档。
在此说下一些YUIDoc的信息
是什么?
YUIDoc是个NodeJS应用,能将你JS代码中的注释生成HTML格式的API文档。
支持语言?
事实上,不仅是JS,任何支持块注释(指/* */)的语言都能用。
特性:
只解析YUIdoc的注释块,不解析源代码。
安装步骤:
1.安装NodeJS,下载地址: http://nodejs.org/download/
2.打开cmd,执行命令npm -g install yuidocjs,即可安装YUIDoc。
YUIDoc注意事项
1.设定一个类即@class之后,YUI默认把之后函数或属性归属为这个类,直到有类重新定义。
2.注释方式
/** YUIDoc会认这以两个星开头的 */ /* YUIDoc不认一个星开头的 */
3.每个注释块中能有且仅有一个主标签
YUIDoc标签
由于标签的介绍内容太多,就不在这里介绍了。
YUIDoc模板
页面生成模板。根据我们注释的标签(充当数据源),在根据页面模板(视图),生成文档。
github上有很多主题模板,而上面图片的使用的模板是我觉得最好看的,所以就选择了这个。
PS:github是好东西,善用能帮我们很多。
yuidoc.json
生成文档有个命令,一般我是准备好注释好的js文件,在加上一个yuidoc.json的配置文件,然后是控制台cd到这个目录,执行命令。
yuidoc .
简单描述下yuidoc.json的东西
{ "name": "BingoTouch API", "description": "让开发人员可以使用Web开发技术,如:HTML5、CSS3、Javascript等,开发出与原生程序具有相同用户体验的移动终端应用", "version": "3.1.0 Powered By 云应用平台部", "url": "XXXXXXXXXXXXXXX", "options": { "linkNatives": "true", "outdir": "./docs", "paths":"code/", "themedir": "../yuidoc-theme-blue-master" } }
这里有两个重要的属性
outdir : 生成的文档放置的文件路径。
themedir : 这个是之前所说的主题模板,如果没有设则模式使用yuidoc的默认模板。
总结
这篇工具的说明就到此了,工具的使用无非就是为了方便开发,上面的描述也许不这么详细,希望是做到指引的作用。
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址: http://www.cnblogs.com/lovesong/p/4296871.html