grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并、压缩,检查语法等。

使用grunt首先要安装node环境,nodejs官网http://nodejs.org/可以选择下载合适的node版本。

安装nodejs成功后进行grunt安装。(示例为windows版本nodejs)

nodejs 0.6版本以上自动安装了npm包管理工具,如果你的nodejs版本在0.6以下请下载安装npm包管理器。

安装npm成功后,安装 grunt-cli  (grunt-cli表示安装的是grunt的命令行界面)

运行 npm install grunt-cli -g(参数g表示全局安装。)

安装完成后出现以下信息

 
如不确定是否安装成功 可以运行 grunt --version
  
安装成功后则出现grunt-cli的版本信息。
 
运行命令 npm install grunt -g
 
运行成功后出现以下信息
 
 
运行命令 Npm install grunt-init (可选)grunt-init是一个脚手架工具目的是为了建立npm的配置文件package.json.
之后在合适的目录下建立自己的项目为了方便测试项目名称使用 my_project

添加两个测试源文件

在项目根目录下创建package.json文件
 

{
"name": "my_project", 
"version": "0.1.0",
"basename":"src", //项目路径
"devDependencies": {
"grunt": "~*",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0"
}
}

package.json 具体参数说明参见https://www.npmjs.org/doc/files/package.json.html

运行 npm install (grunt将会载入此项目所需要的package)

根目录会出现 node_modules 文件夹以及相应的grunt插件包。

如已有的package.json中写明所用的grunt模块,使用npm安装也是可以的。

npm install grunt-contrib-<modules>(插件名称) --save-dev(写入package.json). 安装完所有插件后再运行Npm install

创建 Gruntfile.js(Gruntfile.js是grunt的配置文件)

gruntfile.js文件的一般写法为:

modules.exports = function(grunt){
   grunt.initConfig({
       加载模块名称:{模块相应的配置信息}
   }); 

   grunt.loadNpmTasks(模块);
   grunt.resigsterTask('default/任务名称',[模块1,模块2....] );
};

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。

grunt.loadNpmTasks:加载完成任务所需的模块。

grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块;

示例如下

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({
    pkg: pkg,
     concat: {
            domop: {
                src: ['<%= pkg.basename %>/*.js'],
                dest: 'dest/domop.js'
            }
        },
    uglify: {
      options: {
        banner:"\n",
        mangle:false //mangle 为是否替换变量,false时不替换变量,默认替换。还可为数组 mangle: {except: ['jQuery', 'Backbone']}此时文件中遇到jQuery,Backbone则不进行替换  //详情见 https://github.com/gruntjs/grunt-contrib-uglify
 
},

files:{
              'dist/main.js':['<%= concat.dist.dest %>']  //直接将合并后的文件压缩 并命名为main.js
          }

    }
  });
  //载入concat和uglify插件,分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //注册任务
    grunt.registerTask('default', ['concat', 'uglify']);
};
其中:package.json 中的basename,也可直接定义在gruntFile。js中使用如
之后的每个插件中的变量都可以这些路径之后的文件配置如gruntfile.js使用  src:['<%= basename %>/*.js']格式。

如果有多个项目路径,还可以单独编辑文件,创建动态路径 详情参见 http://www.w3ctech.com/topic/130

合并插件参数链接 https://github.com/gruntjs/grunt-contrib-concat

其它插件及功能参见grunt官网grunt官网地址为:http://www.gruntjs.org/docs/sample-gruntfile.html

grunt压缩js文件的更多相关文章

  1. 吉特仓储管系统(开源)--使用Grunt压缩JS文件

    在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...

  2. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. iis7 压缩js文件和启用gzip压缩

    压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent loc ...

  4. uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)

    一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs  mai ...

  5. 用GruntJS合并、压缩JS文件

    为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...

  6. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  7. grunt压缩多个js文件和css文件

    压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 ...

  8. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  9. 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

    很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解 ...

随机推荐

  1. 限制input只能输入金额(类似:100.00|100.9|100)

    $(".inputmoney").keyup(function () {    var reg = $(this).val().match(/\d+\.?\d{0,2}/);    ...

  2. Sprint第三阶段(第三天12.11)

  3. PHP基于websocket实时通信的实现—GoEasy

    PHP websocket实时消息推送 在这里我记录一下之前如何实现服务器端与客户端实时通信: 实现步骤如下: 1.        获取GoEasy appkey. 在goeasy官网上注册一个账号, ...

  4. HDU2471_History of Languages

    有意思的题目,给出两个自动机,判断这个两个自动机是否是等价的? 两个自动机是等价的,那么他们可接受的字符串集合一定是完全一样的. 于是我们可以从(0,0)开始bfs,每次看看在两个自动机上走到的两个点 ...

  5. Android Service完全解析,关于服务你所需知道的一切(下)

    转载请注册出处:http://blog.csdn.net/guolin_blog/article/details/9797169 在上一篇文章中,我们学习了Android Service相关的许多重要 ...

  6. Swift让编程更简单 人人都是开发者

    全称为苹果全球开发者大会的WWDC,每年的这个时候,都会如这段时间前后所举行的Google I/O 和微软的BUILD开发者会议一样,吸引全球科技媒体的目光.近几年来,因为在会上爆的猛料越来越多,“开 ...

  7. Actor的原理

    先从著名的c10k问题谈起.有一个叫Dan Kegel的人在网上(http://www.kegel.com/c10k.html)提出:现在的硬件应该能够让一台机器支持10000个并发的client.然 ...

  8. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  9. React.js 常用技术要点

    最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...

  10. MAPR 开发环境搭建过程记录

    我下载了MAPR 官方提供的virtualbox 和 vmware版本的sandbox进行试用. 开始试用了一会vmware版的,因为不太熟悉vmware的操作,而且vmplayer经常没有反应,后来 ...