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. webstorm 设置uglify 压缩js文件

    第一步:打开npm,全局安装 npm install uglify-js -g 第二步: 打开webstorm的file->settings ->External Tools,点击左上角的 ...

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

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

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

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

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

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

随机推荐

  1. cxf3.1.4所需jar,大部分都可以从cxf3.1.4的lib包下找到

    asm-.jar commons-beanutils-.jar commons-collections-.jar commons-lang-2.6.jar cxf-core-.jar cxf-rt-b ...

  2. MongoDB windows解压缩版安装

    创建目录如下 将mongodb的压缩包解压到mongodb目录下 mongodata下创建data目录存放数据:创建log目录存放目录 配置服务,cmd 输入命令: D:\mongo\mongodb\ ...

  3. 压力测试 php-fpm 优化

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装:引用wget http: ...

  4. 创建oracle数据库job服务:PlSqlDev操作job

    PlSqlDev操作job 创建job 1.选择job文件夹,右键     2.点击新建     3.对应填写完成,可以点击“查看SQL”查看sql语句,确定无误后,点击“应用”即创建完成 4.此时, ...

  5. 限制EditText 输入的字节数

    1.代码 name_tv = (EditText) findViewById( R.id.name_tv ); name_tv.addTextChangedListener(new TextWatch ...

  6. JavaScript(三)——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

  7. java-URLConnection网络数据收取

    通过url创建connection方式收取 import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import ja ...

  8. [强连通分量] POJ 1236 Network of Schools

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16803   Accepted: 66 ...

  9. 常用Maven插件介绍

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  10. Android Studio Exception汇总

    Android Studio 运行时出现 finished with non-zero exit value 2 错误分析 原因: 项目包含了两个相同包名的不同 project 或者 jar 举例: ...