使用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 相关文章推荐
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
全面解析bootstrap格子布局
May 22 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue 组件内获取actions的response方式
Nov 08 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
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
python中assert用法实例分析
2015/04/30 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
大学生蛋糕店创业计划书
2014/01/13 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
公司委托书格式范文
2014/10/09 职场文书
教师个人事迹材料
2014/12/17 职场文书
学习心理学心得体会
2016/01/22 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
MySQL数据迁移相关总结
2021/04/29 MySQL
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS