grunt seajs等环境配置
来源:互联网 发布:商品数据库表设计 编辑:程序博客网 时间:2024/05/21 22:43
网址:http://www.k68.org/?MA&paged=13
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注释模板
node.js之node-smushit图片压缩
网站上线对图片压缩是必要的。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情况下,命令行模式下进行安装。
安装完成后,可以使用,smushit -h查看相应帮助。
尝试了压缩img目录中的图片,在img目录的上级目录中,使用命令:
如果有子目录,需要使用如下命令:
压缩单个文件,在jifen目录中,使用如下命令:
执行命令后,后面的信息给出了图片的原大小、优化后大小、体积减少的百分比等信息。优化的图片会直接覆盖掉原文件,如有需要请注意备份原文件。
ps:针对压缩目录中的图片会比较好,。
参考:
http://www.noanylove.com/2012/06/node-js-the-smush-it-expansion/
内网安装Grunt
尝试了半天终于在内网使用Grunt压缩文件成功了。前置条件,外网已安装好相应环境。记录一下过程:
一、将node.js安装包,发至内网进行安装。安装后可以使用:
二、在外网机,文件夹选项中选择“显示所有文件和文件夹”。
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
firefox浏览器插件能在本地安装吗?
可以的。
比如您到https://addons.mozilla.org/en-US/firefox/,那里有很多插件提供下载。
选择一个您想要的插件,进入下载/安装页面,把鼠标移动到安装按钮上,状态栏那就显示了那个文件的URL,就可以下载了。
安装的话,先打开FF,然后 工具->附加软件 然后把那个.xpi文件拖到那个附加软件窗口就可以触发安装事件了。
使用Grunt进行js、css压缩合并
通过上文介绍了,已经在项目目录下安装了Gruntjs,本文记录一下使用方法。
一、新建package.json,配置完成后,使用npm install安装。
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。它应该和源码一样被提交到svn或git。
例:
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
安装:cssmin
插件安装完成后,查看根目录,会发现node_modules目录,包含了相应的插件目录。
二、新建Gruntfile.js
Gruntfile.js由以下内容组成
1、wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
2、项目和任务配置
3、载入grunt插件和任务
4、定制执行任务
例:
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
Grunt安装过程:
1、安装nodejs,昨天重新装了一下,进入官网后(http://nodejs.org/),点击“INSTALL”按钮,就会下载然后安装就行了。觉得现在windows安装node,挺简单的,感觉稳定性也提升了不少。
2、安装grunt命令行工具,有一句话总结“就是安装完CLI,还要在项目安装Grunt。”
安装grunt-cli,进入window命令行模式,开始->运行->cmd->
安装grunt及其插件,进入到某项目根目录,在命令行模式下,例如文件在c盘testGrunt目录下,利用cd命令到testGrunt目录下后,使用命令:
3、输入版本号验证安装是否成功,输入:
就证明安装成功了。
参考:
http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html
http://my.oschina.net/smeite/blog/119351
Grunt:用于JS项目基于任务的命令行构建工具
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下报错
发现ie8下有DD_belatedPNG.js的脚本错误,觉得挺纳闷儿的,此脚本所用甚广,可能是脚本久未更新了。
排查后,解决方法就是引用时,添加条件注释。
官网:http://www.dillerdesign.com/experiment/DD_belatedPNG/
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为模块定义的函数,可以传递参数过去。
- grunt seajs等环境配置
- grunt自动化环境配置
- seajs之grunt应用
- seajs+grunt开发
- grunt+seajs构建笔记
- 用grunt构建seajs项目
- Gulp与Grunt环境配置问题
- grunt 根据部署环境配置环境参数
- seajs配置
- seajs配置
- seajs 配置
- 用grunt构建seajs项目的总结
- Grunt 实例之 构建 seajs 项目
- grunt和seajs的打包初体验
- grunt 配置
- Grunt配置
- 配置Nodejs运行环境,安装grunt运行angular项目
- pyenv等环境配置
- 电磁场靶向调控技术技术优势
- Android Navigation Drawer(导航抽屉)
- .NET中的异步编程(三)- Continuation passing style以及使用yield实现异步
- HDU 1556 Color the ball 线段树更新区间查点
- Android 软件开发之如何使用Eclipse Debug调试程序详解
- grunt seajs等环境配置
- 给感到不安的你
- 恢复ext4下被删除的文件
- java基础:final关键字的深入使用
- LeetCode OJ --问题与解答 Sort List
- oradim重建Oracle服务-
- 3.jQuery 常规选择器
- C#阿里云上传和下载示例代码
- 旋转数组的最小元素