Chinaunix首页 | 论坛 | 博客
  • 博客访问: 42182
  • 博文数量: 30
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 310
  • 用 户 组: 普通用户
  • 注册时间: 2013-12-10 07:50
个人简介

学会总结,积累

文章分类

全部博文(30)

文章存档

2014年(14)

2013年(16)

我的朋友

分类: JavaScript

2014-01-12 21:41:56

Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。
详细的入门文档在这里

感谢中文社区翻译者的辛劳
我在这里只是整理一下windows下使用grunt压缩合并JS文件的步骤,以备以后查阅。
大的步骤有3步
1,安装nodejs
进入  直接点击 INSTALL,直接安装。(windows 下安装nodejs 会直接安装npm)

2,grunt安装
a, 安装grunt-cli

如果 之前安装过grunt,需要先卸载  npm uninstall -g grunt

b, 安装 grunt-cli : npm install -g grunt-cli

3,对于我来说最重要的一步
建立package.json和Gruntfile.js
如果要压缩合并JS文件,那么uglify和concat插件就是必不可少的
先建立package.json文件,代码如下:
{
    "name"    : "testGrunt",
    "version" : "0.1.0",
    "author"  : "Tom",
    "devDependencies" : {
        "grunt" : "~0.4.2",
        "grunt-contrib-uglify" : "~0.2.7",
        "grunt-contrib-concat" : "~0.3.0"
    }
}
然后在自己想要的目录下运行CMD,并安装插件
键入命令 npm install grunt-contrib-uglify  安装uglify
键入命令 npm install grunt-contrib-concat  安装concat
安装好后可以看到一个名为‘node_modules’的文件夹放在我们想要的目录下
这个时候我们就可以开始建立Gruntfile.js文件了,比如我们要压缩合并a.js和b.js文件,我们可以这样编写Gruntfile.js

点击(此处)折叠或打开

  1. module.exports = function(grunt) {
  2.   // Do grunt-related things in here
  3.   // 配置
  4.     grunt.initConfig({
  5.         
  6.         concat : {
  7.             domop : {
  8.                 src: ['a.js', 'b.js'],
  9.                 dest: 'c.js'
  10.             }
  11.         },
  12.         uglify : {
  13.             
  14.             build : {
  15.                 src : 'c.js',
  16.                 dest : 'c.min.js'
  17.             }
  18.         }
  19.     });
  20.     // 载入concat和uglify插件,分别对于合并和压缩
  21.     grunt.loadNpmTasks('grunt-contrib-concat');
  22.     grunt.loadNpmTasks('grunt-contrib-uglify');
  23.     // 注册任务
  24.     grunt.registerTask('default', ['concat', 'uglify']);
  25. }
命令行 grunt(我们注册的任务是default,所以可以省略‘default’)
然后我们就会得到一个同目录下的c.min.js文件,这个文件就是我们压缩合并过的文件,当你本地改变了a.js或者b.js文件后,你可以重复利用我们建立的文件和grunt命令来合并压缩,是不是很好用呢?

有勤劳的作者写的更详细的文档
http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
谢谢作者




阅读(2983) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~