grunt seajs等环境配置

网址：http://www.k68.org/?MA&paged=13

jQuery应用迁移辅助插件jQuery Migrate

四月 24, 2013 Javascript、教程资源、网络摘抄 Jquery、jQuery Migrate

做页面时直接使用的最新版本的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/

下载：

• jquery-migrate-1.1.0.js
• jquery-migrate-1.1.0.min.js

暂无评论

css注释模板

四月 23, 2013 Html与Css css注释模板

/*-------------------------------------------------------------- Product Name Style   Author:hanbingfeng Create Date:13.04.23 Last Mondify Date:13.04.23 ===================================================   --------------------------------------------------------------*/     /*-------------------------------------------------------------- Page Style --------------------------------------------------------------*/     /*-------------------- Section Style -----------------------*/     /*=----- Sub Style -----=*/

暂无评论

node.js之node-smushit图片压缩

四月 22, 2013 Javascript node-smushit、node.js、ysmush、压缩png图片

网站上线对图片压缩是必要的。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目录的上级目录中，使用命令：

smushit img

如果有子目录，需要使用如下命令：

smushit jifen -R

压缩单个文件，在jifen目录中，使用如下命令：

smushit result.png

执行命令后，后面的信息给出了图片的原大小、优化后大小、体积减少的百分比等信息。优化的图片会直接覆盖掉原文件，如有需要请注意备份原文件。

ps:针对压缩目录中的图片会比较好，。

参考：
http://www.noanylove.com/2012/06/node-js-the-smush-it-expansion/

暂无评论

内网安装Grunt

四月 18, 2013 Javascript Grunt、node.js、环境变量

尝试了半天终于在内网使用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 -version

五、进到项目目录下使用grunt命令测试成功。

参考资料：
https://npmjs.org/doc/install.html

暂无评论

firefox浏览器插件能在本地安装吗？

四月 18, 2013 教程资源、网络摘抄

可以的。
比如您到https://addons.mozilla.org/en-US/firefox/，那里有很多插件提供下载。

选择一个您想要的插件，进入下载/安装页面,把鼠标移动到安装按钮上,状态栏那就显示了那个文件的URL，就可以下载了。
安装的话，先打开FF，然后 工具->附加软件 然后把那个.xpi文件拖到那个附加软件窗口就可以触发安装事件了。

暂无评论

使用Grunt进行js、css压缩合并

四月 18, 2013 Javascript Gruntjs

通过上文介绍了，已经在项目目录下安装了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任务

进入到项目根目录，敲：

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行，例执行js压缩命令：

grunt uglify

css压缩命令

grunt cssmin

参考：
http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
http://my.oschina.net/smeite/blog/119351

暂无评论

一步一步安装Grunt

四月 9, 2013 Javascript Grunt、Grunt安装、Grunt安装步骤

Grunt安装过程：

1、安装nodejs，昨天重新装了一下，进入官网后(http://nodejs.org/)，点击“INSTALL”按钮，就会下载然后安装就行了。觉得现在windows安装node，挺简单的，感觉稳定性也提升了不少。

2、安装grunt命令行工具，有一句话总结“就是安装完CLI，还要在项目安装Grunt。”

安装grunt-cli，进入window命令行模式，开始->运行->cmd->

npm install -g grunt-cli

安装grunt及其插件，进入到某项目根目录，在命令行模式下，例如文件在c盘testGrunt目录下，利用cd命令到testGrunt目录下后，使用命令: 

npm install grunt --save-dev

3、输入版本号验证安装是否成功，输入：

grunt -version

就证明安装成功了。

参考：
http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html
http://my.oschina.net/smeite/blog/119351

暂无评论

Grunt：用于JS项目基于任务的命令行构建工具

四月 9, 2013 Javascript Grunt、Grunt插件

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 官方维持的插件都标有一个星形图标。

暂无评论

DD_belatedPNG.js在IE8下报错

四月 9, 2013 Javascript DD_belatedPNG报错

发现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/

暂无评论

SeaJS之use函数

三月 28, 2013 Javascript、教程资源 SeaJS、seajs.use

有了 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为模块定义的函数，可以传递参数过去。

暂无评论