使用Grunt.js管理你项目的应用说明


Posted in Javascript onApril 24, 2013

Grunt.js是什么?
Grunt.js是一个Javascript Task Runner(Javascript任务运行器),其基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。

Grunt.js并不是仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西。
 

为什么使用Grunt.js?
简单的说:为了自动化。
对于前端项目,例如:

•为了明确模块分工,我们可能会将Javascript代码拆成很小很小的一个个js文件,但是我们知道,在最终页面上,我们知道过多的js文件会产生过多的Http Request,这不利于页面优化。所以我们可能希望可以合并这些js文件的工具。
•为了用户端请求的文件尽量小,我们希望我们的HTML、Javascript等文件能进行压缩。
•我们可能需要对源代码进行一些单元测试和回归测试。
•我们可能希望有工具能够通过源代码备注自动生成文档,免得手动再写文档。
•……
很明显,这一切都有各种各样的小工具能帮我们做到,但是我们希望最好能输入一个命令,打开一个程序,或者干脆每次修改文件保存后自动进行这一切事情。

以前我们可能使用NodeJS自己写一个build程序,但是现在Grunt.js能够提供我们需要的一切。

安装Grunt.js
Grunt.js 0.4之后,其不再使用全局方式安装整个Grunt.js,而是在全局安装Grunt.js Client,然后在当前项目中安装Grunt,来避免未来不同项目对Grunt不同版本的依赖关系。

如果安装了之前的版本,可以使用npm的命令来删除掉原来的Grunt.js。

npm uninstall -g grunt
然后安装Grunt.js Client:

npm install -g grunt-cli
 

package.json
package.json是项目的配置文件,有一些项目的依赖信息,以及作者、版本等信息。我们先写一个简单的package.json。

{
  "name": "my-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

name属性,表示该项的名字。

version属性,则是该项目的版本号。

devDependencies属性,则包含该项目的依赖,目前我们的依赖只有grunt,以及版本为0.4.1。
在终端大概包含该package.json的目录,输入命令:

npm install
我们会发现,该目录此时多了一个node_modules文件夹,里面有个grunt文件夹,这个就是我们安装在项目的Grunt.js。

用Grunt.js进行压缩js代码
grunt-contrib-uglify是Grunt.js的一个任务模块,其基于著名的js压缩工具uglify,进行js压缩任务。

首先我们在项目依赖加上grunt-contrib-uglify,package.json如下:

{
  "name": "my-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.0"
  }
}

再使用:

npm install
我们就安装了grunt-contrib-uglify了。

写Gruntfile.js

module.exports = function(grunt) {
    // 给grunt添加些设置
    grunt.initConfig({
        uglify: {
            options: {
                banner: '/*! 版权所有,这里乱写 */\n'
            },
            build: {
                src: 'src/core.js', //要压缩的源文件,我们也可以用*表示通配,比如'src/*.js'
                dest: 'dst/core.js' //压缩后输出的位置
            }
        }
    });
    // 载入 "uglify" 插件任务
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 定义默认需要执行的任务
    grunt.registerTask('default', ['uglify']);
};

Gruntfile.js文件用于定义任务,以及任务组的执行顺序等。上面的文件我们定义将src/core.js文件压缩后输出成dst/core.js。则我们输入命令:

grunt
的时候,则会自动完成这个任务。

Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
webpack配置之后端渲染详解
Oct 26 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
详解JavaScript的变量
Apr 04 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 #Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 #Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 #Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 #Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 #Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 #Javascript
Jquery实现三层遍历删除功能代码
Apr 23 #Javascript
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python如何设置静态变量
2020/09/07 Python
python中time、datetime模块的使用
2020/12/14 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
电大自我鉴定
2013/10/27 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
市场调查策划方案
2014/06/10 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2015年新教师工作总结
2015/04/28 职场文书