使用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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
jquery实现拖动效果
Aug 10 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
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
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP7匿名类用法分析
2016/09/26 PHP
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
JS实现多功能计算器
2020/10/28 Javascript
八大排序算法的Python实现
2021/01/28 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python 获取字符串MD5值方法
2018/05/29 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
诉前财产保全担保书
2014/05/20 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
入学证明
2015/06/23 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript