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. PKCS#1规范阅读笔记1--------基本概念

    规范中有很多数学相关的推演和计算,并不打算在这里介绍,主要介绍一下相关的计算流程及最终的签名结果. 算法可以分为:对称算法和非对称算法两大类.对称算法加密和解密都用的是同一个密钥:而非对称算法却是有一 ...

  2. CSS3-样式继承,层叠管理,文本格式化

  3. 蓝牙物理链路类型:SCO和ACL链路

    蓝牙物理链路ACL(Asynchronous Connectionless), 另外的一种链路是SCO(Synchronous Connection Oriented)主要用来传输对时间要求很高的数据 ...

  4. Project中分清楚挣值项

    在项目管理非常重要的挣值管理,有一些关键项,像PV,EV,AC,BAC,EAC,ETC等等这些都是关键项,如果这个没分清楚,计算出很多东西都是错的,下面两个图是我一个项目快要完成的报表. 图1 图2 ...

  5. 关于delphi PAServer 远程调试DLL文件

    用PAServer调试的话会产生一个默认user-connectionname的文件夹,且这个文件夹不能自定义.因此无法使调试的dll文件生成到host主程序所在的文件夹下而导致无法调试. 变通方法: ...

  6. iptables禁止端口和开放端口

    1.关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放. 下面是命令实现: iptables -P INPUT DROP iptables -P FORWARD DROP ipta ...

  7. Oracle 自定义函数Function

    示例代码: CREATE OR REPLACE  FUNCTION "MY_DATABASE"."F_GET_USER_COUNT_BY_DEPART" ( D ...

  8. Windows7防火墙服务无法启用怎么办

    点击windows 7控制面板中防火墙的“推荐配置”没有反应,打开“服务”,无法启动windows firewall,并报错.  问题:  1.点击windows 7控制面板中防火墙的“推荐配置”没有 ...

  9. 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证-2.2身份验证开发]

    2.2身份验证开发 在我们的案例中,我们是用户通过Web应用程序进行身份识别. 上面的图示说明了如下的一些概念 l Azure AD 是标识提供程序,负责对组织的目录中存在的用户和应用程序的标识进行验 ...

  10. C# sogou地图API应用总结

    地图的初始化1.添加引用地图的API文件: <script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type=&q ...