使用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 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
jquery offset函数应用实例
Nov 14 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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版单点登陆实现方案的实例
2016/11/17 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
js调试系列 初识控制台
2014/06/18 Javascript
Node.js文件操作详解
2014/08/16 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python palywright库基本使用
2021/01/21 Python
Python实现微信表情包炸群功能
2021/01/28 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
小学国庆节活动方案
2014/02/11 职场文书
新年爱情寄语
2014/04/08 职场文书
财务情况说明书范文
2014/05/06 职场文书
新党章心得体会
2014/09/04 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
MySQL 聚合函数排序
2021/07/16 MySQL
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js