码迷,mamicode.com
首页 > Web开发 > 详细

用GruntJS合并、压缩JS文件

时间:2014-07-08 14:49:47      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:grunt.js   gruntfile.js   合并压缩js   js优化   网站优化   

长期东忙西忙,却不忙更新自己的博客,缺少输出,甚为惭愧

记得我当初刚接触GruntJS的时候对NodeJS一知半解,所以第一次使用花了些时间才熟悉起来。本文希望能帮助朋友们快速入门。


为什么要合并、压缩你的JS文件?

在开始之前,先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了。HTML里穿插一堆JS代码的我就不吐槽了。

一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS、JS、图片等文件,指定为异步加载的文件除外。每读取一个文件,浏览器都会向Web服务器发送一个加载的请求,服务器觉得这个请求没问题后,浏览器才会开始接收文件。也就是说,每次加载一个文件都会消耗一定的时间在服务器和客户端的来回上。

加载一个文件消耗的时间可以忽略不计,问题是你显示一个复杂的网页可能会加载N多文件,那我们在我们可以控制的范围内,能少花点时间就少花点呗。用户可是对网页加载的速度很挑剔的!

对图片我们经常会把一些图标合并成一个大图片用CSS的background来取得相应图片以减少请求。CSS也通常对一种媒体只写一个文件,当然这边要注意万恶的IE对CSS的限制,参考我的博文:用SCSS需要小心IE对css的几个限制。对JS,一般就会将本地的所有用到的文件合并及压缩。当然,以上对使用requireJS一类的框架加载的除外。

所谓的压缩就是会将所有空格符、注释等不影响代码都移除,把长的名称都替换为短的名称以节省字符。当你的JS被压缩后,除了头部可能会额外加点文件注释外,所有的JS代码都并为一行,很多变量名都变为a啊a的字母,完全失去了可读性。然后你看到自己的JS从300KB可能缩减为只有5KB。这样做的唯一目的就是把JS文件变小,使其加载的速度更快。

一切都是为了更好的performance……哪天咱下行网速和服务器上行网速都升级到GB级别哪还用担心这个?


GruntJS的安装及使用

GruntJS是一个建立在NodeJS基础上的任务管理工具。概念我不赘述,反正除了配置烦很好使就对了。

GruntJS的安装方法在官网上介绍得很详细。点击查看官网教程>>

总结下来其实就那么几步:

  1. NodeJS官网下载安装适合你系统的NodeJS。现在的NodeJS安装会自带NPM包管理,所以你不用再另外装NPM了。
  2. 用NPM装GruntJS的CLI,因为你要在命令行执行GruntJS的命令:
    npm install -g grunt-cli
  3. 在开发项目根目录准备package.json文件。这个文件的内容我会在后面详细说明。
  4. 将命令行指定到这个根目录,运行
    npm install

想要在你的项目里运行GruntJS呢,还需要以下几步:

  1. 准备文件Gruntfile.js或Gruntfile.coffee。文件的内容我会在后面详细说明。
  2. 将命令行指定到这个根目录,运行
    grunt

package.json的配置

这个JSON文件就是给NPM包管理用的。这里我们只要根据GruntJS官网给的一个例子改就已足够。详细的配置请参考官网:https://www.npmjs.org/doc/files/package.json.html

GruntJS官网的例子:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}

这个例子包含了配置这个项目的名称,项目的版本,开发用到的NPM包。运行npm install的时候就是读取这个devDependencies的内容,来下载相应的包到项目根目录的node_modules文件夹内。还可以指定下载的包的版本。关于版本的写法还有一些符号和写法来指定某个范围内的版本。点击查看版本号语法详细介绍>>

一般性可在Github查找并选择你要使用的Grunt包,直接写上当前的版本如0.3.3指定当前的版本。或者在版本号前加“~”符号选择临近版本。或者用x来代替最后的3,写为0.3.x,选择0.3.开头的最新版,因为最后一个数字改变通常是开发者修复了BUG而不会有配置或者语法上的改变。

在这里,我们合并、压缩JS需要用到2-3个NPM包。分别是:

名称中间带“contrib”的为GruntJS官方提供的插件。

我说2-3个包是因为grunt-contrib-uglify也可以直接将多个文件合并为一个文件,但是它会“改”代码。这里我希望能最终生成两个文件:一个是纯粹将所有JS代码无改动地合并在一起,用来debug调试;另一个是压缩过的JS,也就是所有调试通过发布项目时最终使用的JS。所以我还使用了grunt-contrib-concat。

另外,示例当中使用的grunt-contrib-jshint是一个用来检查JS语法错误的插件,可以在你合并文件的时候就帮你检查出错误,不过有时候会有点蛋疼。这里我为了减少篇幅先不用它。

把上面的示例修改如下:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "0.5.x",
    "grunt-contrib-uglify": "0.5.x"
  }
}

Gruntfile.js的配置

一个基本的Gruntfile包含以下几部分:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // 这里放插件的设置信息
    taskname: { }
  });

  // 载入要使用的插件
  grunt.loadNpmTasks('grunt-taskname');
  // 注册任务
  grunt.registerTask('default', ['grunt-taskname']);

};

整段代码包含在一个函数中,利用了NodeJS一个把函数公开,可以被其他文件使用的一个写法。

grunt.initConfig用来接收对各个插件的配置信息。每个插件的配置选项都可以在它们自己的Github项目页面中找到,而且写法基本上都类似。如:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // 任务名称,需根据插件的说明来写
	concat: {
		// 子任务名称,这名称随你起
      	dev: {
      		// 可选的配置参数
	        options: {
	          banner: '/*!\n * <%= pkg.name %> - JS for Debug\n * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n'
	        },
	        // 源文件路径
	        src: [
	          'js/app/**/*.js'
	        ],
	        // 运行任务后生成的目标文件
	        dest: 'js/app.debug.js'
      	}
    }
});

以上是一个对“grunt-contrib-concat"的配置实例。

"concat"指定了这套配置所对应的插件。"dev"是我自定义的一个子任务,我给它取名为"dev"。一个插件可以拥有多套不同的配置以应付不同的需求,也就是说在"concat"下可以包含任意多个自定义的子任务,每个子任务都可以有不同的配置。

这里我设置了"banner"参数,这个参数在很多对文件操作的插件中都有,如uglify, less, sass等等。它的作用是给最终的目标文件头部加上一些信息或者代码。

在这个"banner"中,我为最终生成的app.debug.js加上了一段文件注释。其中还使用了几个特殊的代码:

\n
换行符,写入文件后,前后的字符就会分行。
<%= pkg.name %>
类似ASP的写法。pkg是用grunt.file.readJSON(‘package.json‘)读取到的JSON,并且已经转换为JS对象。按照前面package.json的示例,这段代码会在写入文件时被替换为"my-project-name"。
其实从这里就可以看出在grunt的配置中,我们可以利用JS对象和JSON来做辅助的配置。
<%= grunt.template.today("yyyy-mm-dd") %>
这是利用了个grunt的方法,可以运行任务的时间并且指定生成的格式。

运行这个concat任务时,我的app.debug.js的头部会有以下一段注释:

/*!
 * my-project-name - JS for Debug
 * @licence my-project-name - v0.1.0 (2014-07-07)
 * http://blog.csdn.net/jennieji | Licence: MIT
 */

而在文件路径的写法上,则可以用一些匹配的符号。如我这里用了一个星号"*.js"表示任意名称的JS文件,两个星号"**"表示当前目录或者子目录下。所以这里"js/app/"目录下及其所有子目录下的JS文件都会被合并到app.debug.js的文件中。

配置完后,还要记得载入插件和注册你这个任务,否则会报错!

载入插件就是把插件NPM包的名字"grunt-contrib-concat"传给grunt.loadNpmTasks方法。

注册任务呢,则是用grunt.registerTask方法。第一个参数为注册的任务队列的名称,写为"default"则成为这个Gruntfile的默认任务队列。第二个参数就是这个任务队列要执行的任务名称的数组,这里的任务名称使用在initConfig配置时使用的名称,即"concat"。修改代码如下:

// 载入要使用的插件
grunt.loadNpmTasks('grunt-contrib-concat');
// 注册任务
grunt.registerTask('default', ['concat']);

如果这样写,那配置完后直接输入以下命令到命令行便可以执行一次JS的合并:

grunt

如果将"default"改为其他名字,比如"debug",那么命令行需要输入:

grunt debug

加入Uglify压缩JS也做类似的配置。注意的是这边源文件和目标文件的配置写法不一样。是在files参数里以“目标文件路径:[源文件路径1,源文件路径2,...]”的格式来写。此外我还直接利用了concat已经生成的合并文件来做压缩。完整的Gruntfile.js如下:

module.exports = function(grunt) {
	grunt.initConfig({
	    pkg: grunt.file.readJSON('package.json'),
		concat: {
	      	dev: {
		        options: {
		          banner: '/*!\n * <%= pkg.name %> - JS for Debug\n * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n'
		        },
		        src: [
		          'js/app/**/*.js'
		        ],
		        dest: 'js/app.debug.js'
	      	}
	    },
	    uglify: {
	    	prod:{
		    	options: {
		          	banner: '/*!\n * <%= pkg.name %> - compressed JS\n * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n * http://blog.csdn.net/jennieji | Licence: MIT\n */\n'
			        },
			        files: {
			        	'js/app.min.js': ['<%= concat.dev.dest %>']
			        }
			    }
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');

	grunt.registerTask('default', ['concat','uglify']);
};

最后

这个应该是最基础的用法了,我看bootstrap和angular的配置文件都超级复杂。

如果不想每次改了代码都要在命令行里运行grunt,推荐使用watch插件,它会自动检测到文件的改动,然后运行相应的任务。

另外将Less编译为CSS有"grunt-contrib-less".

SASS编译为CSS有"grunt-contrib-compass"比较好用,因为可以引用compass-style里的mixin。

还有"grunt-conritb-requirejs"来针对用requireJS写的JS文件做压缩。

用GruntJS合并、压缩JS文件,布布扣,bubuko.com

用GruntJS合并、压缩JS文件

标签:grunt.js   gruntfile.js   合并压缩js   js优化   网站优化   

原文地址:http://blog.csdn.net/jennieji/article/details/37075421

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!