网址：http://www.k68.org/?MA&paged=13
做页面时直接使用的最新版本的jquery，用到一个tooltip插件。发现页面报错，排查后，发现是jquery版本的问题。就想到了jQuery Migrate，引用后，问题就解决了。
以下内容转自：http://www.iteye.com/news/27120
为了使前端开发者能够顺利迁移至该版本，该团队还发布了迁移插件jQuery Migrate。
当开发者需要在代码中使用新版本的jQuery时，可以在1.9或2.0版本中使用该插件来检测哪些功能已经弃用或移除，并可以在必要时恢复这些功能。更多信息见项目README
jQuery Migrate 1.1在之前版本的基础上，进行了一些改进，包括：
- 支持console.trace()来跟踪警告信息，更易于诊断错误。
- 对于无效JSON，会返回警告信息。
- 提示“Logging is active”信息，以表明插件正在运行。
- 出于安全因素，jQuery 1.9限制了字符串的处理，你可以通过新版Migrate插件来恢复该功能。但还是建议使用$.parseHTML()来处理HTML。
- 对$(“<button>”, { type: “button” })会显示一个错误警告
最后，需要注意的是，你可以使用该插件将jQuery恢复到jQuery 1.6.4之后的任何一个版本的功能。
详细信息：http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/
下载：
/*--------------------------------------------------------------
Product Name Style
Author:hanbingfeng
Create Date:13.04.23 Last Mondify Date:13.04.23
===================================================
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Page Style
--------------------------------------------------------------*/
/*-------------------- Section Style -----------------------*/
/*=----- Sub Style -----=*/ |
网站上线对图片压缩是必要的。Yahoo!的在线图片无损优化工具：Smush.it是一个不错的工具，处理png类图片压缩效率，效果很高。
最近尝试了，在本地node.js命令行使用Grunt实现了css/js合并压缩。之前好像记得看过，ysmush在node.js也有插件，就做了一下尝试。
插件名：node-smushit
npm主页：http://search.npmjs.org/#/node-smushit
项目主页：https://github.com/colorhook/node-smushit
xp环境下已安装node.js情况下，命令行模式下进行安装。
npm install -g node-smushit |
安装完成后，可以使用,smushit -h查看相应帮助。
尝试了压缩img目录中的图片，在img目录的上级目录中，使用命令：
如果有子目录，需要使用如下命令：
压缩单个文件，在jifen目录中，使用如下命令：
执行命令后，后面的信息给出了图片的原大小、优化后大小、体积减少的百分比等信息。优化的图片会直接覆盖掉原文件，如有需要请注意备份原文件。
ps:针对压缩目录中的图片会比较好，。
参考：
http://www.noanylove.com/2012/06/node-js-the-smush-it-expansion/
尝试了半天终于在内网使用Grunt压缩文件成功了。前置条件，外网已安装好相应环境。记录一下过程：
一、将node.js安装包，发至内网进行安装。安装后可以使用：
node -v (查看nodejs版本号)
npm -v(npm版本号) |
二、在外网机，文件夹选项中选择“显示所有文件和文件夹”。
1、打开C:\Documents and Settings\admin\Application Data，找到npm和npm-cache目录。
2、打开C:\Documents and Settings\admin，找到node_modules目录。
复制到内网机相应目录中。
三、比较关键的一步，内网机设置环境变量。
1、在桌面上，右键“我的电脑”，选择“高级”选项卡，找到点击“环境变量”按钮。
2、“新建”环境变量，变量名“NODE_PATH”，变量值“C:\Documents and Settings\admin\Application Data\npm\node_modules”
添加完成后，确保变量有NODE_PATH和PATH。其中PATH值为安装node.js时，自动创建。如果没有请添加，变量值“PATH”，变量值“C:\Documents and Settings\hanbingfeng\Application Data\npm”
四、这个时候在cmd命令下，输入命令，即可看到版本信息：
五、进到项目目录下使用grunt命令测试成功。
参考资料：
https://npmjs.org/doc/install.html
可以的。
比如您到https://addons.mozilla.org/en-US/firefox/，那里有很多插件提供下载。
选择一个您想要的插件，进入下载/安装页面,把鼠标移动到安装按钮上,状态栏那就显示了那个文件的URL，就可以下载了。
安装的话，先打开FF，然后 工具->附加软件 然后把那个.xpi文件拖到那个附加软件窗口就可以触发安装事件了。
通过上文介绍了，已经在项目目录下安装了Gruntjs，本文记录一下使用方法。
一、新建package.json,配置完成后,使用npm install安装。
package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。它应该和源码一样被提交到svn或git。
例：
{
"name": "cyjs",
"version": "0.1.0",
"description": "js for k68.org",
"homepage": "http://www.k68.org/",
"author": "firebaby",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.3.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-cssmin": "~0.5.0",
"grunt-htmlhint": "~0.9.2"
}
}
|
grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。
更多插件，请访问：http://gruntjs.com/plugins
在项目目录下安装插件也可采用如下方式安装：
安装：uglify
npm install grunt-contrib-uglify |
安装：cssmin
npm install grunt-contrib-cssmin |
插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。
二、新建Gruntfile.js
Gruntfile.js由以下内容组成
1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API
module.exports = function(grunt) {
// Do grunt-related things in here
};
|
2、项目和任务配置
3、载入grunt插件和任务
4、定制执行任务
例：
module.exports = function(grunt) {
//配置参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
stripBanners: true
},
dist: {
src: [
"js/config.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/default.min.js': 'assets/js/default.js'
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'assets/css/default.css': [
"css/global.css",
"css/pops.css",
"css/index.css"
]
}
}
}
});
//载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}
|
grunt api文档：http://gruntjs.com/api/grunt
三、命令行执行grunt任务
进入到项目根目录，敲：
就会按Gruntfile配置的文件进行压缩合并。
也可以单独执行，例执行js压缩命令：
css压缩命令
参考：
http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
http://my.oschina.net/smeite/blog/119351
Grunt安装过程：
1、安装nodejs，昨天重新装了一下，进入官网后(http://nodejs.org/)，点击“INSTALL”按钮，就会下载然后安装就行了。觉得现在windows安装node，挺简单的，感觉稳定性也提升了不少。
2、安装grunt命令行工具，有一句话总结“就是安装完CLI，还要在项目安装Grunt。”
安装grunt-cli，进入window命令行模式，开始->运行->cmd->
安装grunt及其插件，进入到某项目根目录，在命令行模式下，例如文件在c盘testGrunt目录下，利用cd命令到testGrunt目录下后，使用命令:
npm install grunt --save-dev |
3、输入版本号验证安装是否成功，输入：
就证明安装成功了。
参考：
http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html
http://my.oschina.net/smeite/blog/119351
Grunt 是一个基于任务的命令行构建工具，是node.js的一个组件，本身还带有很多plug-in，用于javascript应用程序的构建管理及依赖管理，诸如lint, copy, concat, minify, unit test等，有点象Maven。它已经预置一些可以在你的项目中使用的任务包括：
- 利用JSHint验证js文件
- 利用concat合并js文件
- 利用UglifyJS压缩js文件
- 利用cssmin压缩合并css文件
- 利用nodeunit运行单元测试等。
除了内置任务，你可创建自己的任务。如果不喜欢默认的任务还可以覆盖它。
Node.js被设计为支持开发高度并行，异步IO驱动的Web服务器，显然不是设计成一个命令行构建工具。但是，这些都不重要了，因为Grunt可以胜任这样的工作。 Grunt 可以作为一个NPM模块使用。
官网：http://gruntjs.com/
Grunt插件：http://gruntjs.com/plugins 官方维持的插件都标有一个星形图标。
发现ie8下有DD_belatedPNG.js的脚本错误，觉得挺纳闷儿的，此脚本所用甚广，可能是脚本久未更新了。
排查后，解决方法就是引用时，添加条件注释。
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
< ![endif]-->
|
官网：http://www.dillerdesign.com/experiment/DD_belatedPNG/
有了 define 等模块定义规范的实现，我们可以开发出很多模块。但光有一堆模块不管用，我们还得让它们能跑起来。在 SeaJS 里，要启动模块系统很简单：
<script src=”path/to/sea.js”></script>
<script>
seajs.use(‘./main’);
</script>
seajs.use 用来在页面中加载模块。通过 use 方法，可以在页面中加载任意模块。
语法：seajs.use seajs.use(id, callback?)
// 加载模块 main，并在加载完成时，执行指定回调
seajs.use(‘./main’, function(main) {
main.init();
});
use 方法还可以一次加载多个模块：
// 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});
callback 参数可选。当只加载一个模块，且不需要 callback 时，可以用 data-main 属性来简化，：<script src=”path/to/sea.js” data-main=”./main”></script>
上面的代码等价于：
<script src=”path/to/sea.js”></script>
<script>
seajs.use(‘./main’);
</script>
SeaJS 还提供 data-config 来加载配置文件：
<script src=”path/to/sea.js” data-config=”path/to/config”></script>
data-config 等价：
seajs.config({
preload: ['path/to/config']
});
路径解析规则与 seajs.use 一致。
我这里用的是：
<script src=”/js/lib/sea.js” data-config=”/js/config.js”></script>
<script>
seajs.use(‘/js/main’, function(main) {
main.banner_focus(‘#focus’);
});
注：main为模块名。main.method为模块定义的函数，可以传递参数过去。
234
到【灌水乐园】发言
