使用GruntJS链接与压缩多个JavaScript文件过程详解
更新时间：2013年08月02日 16:31:56 作者：
怎么把多个JS文件搞成一个啊，GruntJS – JavaScript多文件编译，风格检查，链接与压缩神器，使用过程如下，有需要的朋友可以参考下，希望对大家有所帮助
自己写了个简单的HTML5 Canvas的图表库，可以支持饼图，折线图，散点图，盒子图 柱状图，同时支持鼠标提示，绘制过程动画效果等。最终我想把这些多个JS文件变成 一个JS文件发布出去，于是我的问题来啦，怎么把这些JS文件搞成一个啊，群里有个 朋友告诉我，GruntJS – JavaScript多文件编译，风格检查，链接与压缩神器。Google了一 把终于帮我完成这个任务，算是入门，分享一下过程。
一什么是GruntJS
不想翻译英文，自己看它的网站吧->http://gruntjs.com/
二：安装与运行
它的官方教程说的不是很清楚，有点让第一次看的人云里雾里的。我总结一下，GruntJS
是基于与依赖服务器node.js的。所以首先第一步是下载并安装node.js,下载地址：
http://nodejs.org/download/
第二步：运行安装grunt命令行工具– 目的是为了使用grunt命令
只有在windows的命令行窗口中运行：npm install -g grunt-cli即可。更具体的解释参见这里：http://gruntjs.com/getting-started
第三步：在项目的根目录创建project.json与Gruntfile.js两个文件
因为grunt的task运行要依赖于这两个文件。
其中创建project.json文件方法可以通过命令行实现：nmp init我创建project.json
内容如下：
{
"name": "fishchart",
"version": "0.0.1",
"description": "html5 canvas chart library",
"author": "zhigang",
"license": "BSD",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-jshint": "~0.6.2",
"grunt-contrib-concat": "~0.3.0"
}
}
使用命令创建时候，如果你不知道写什么直接回车跳过即可。
三： 安装与使用Grunt Plug-in完成javascript文件链接与压缩
1. 安装javascript文件链接插件支持
npm install grunt-contrib-concat --save-dev
2. 安装javascript文件压缩插件支持
npm install grunt-contrib-uglify --save-dev
3. 在Gruntfile.js文件中配置选项，加载与定义task
module.exports = function(grunt) {
grunt.initConfig({
//our JSHint options
jshint: {
all: ['main.js'] //files to lint
},
//our concat options
concat: {
options: {
separator: ';' //separates scripts
},
dist: {
src: ['js/*.js', 'js/**/*.js'], //Grunt mini match for your scripts to concatenate
dest: 'js/fishchart_v0.0.1.js' //where to output the script
}
},
//our uglify options
uglify: {
js: {
files: {
'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.js'] //save over the newly created script
}
}
}
});
//load our tasks
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default tasks to run
// grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('development', ['jshint']);
grunt.registerTask('production', ['jshint', 'concat', 'uglify']);
}
四：运行结果
最后还想赞一下，这个东西太好用啦！
一什么是GruntJS
不想翻译英文，自己看它的网站吧->http://gruntjs.com/
二：安装与运行
它的官方教程说的不是很清楚，有点让第一次看的人云里雾里的。我总结一下，GruntJS
是基于与依赖服务器node.js的。所以首先第一步是下载并安装node.js,下载地址：
http://nodejs.org/download/
第二步：运行安装grunt命令行工具– 目的是为了使用grunt命令
只有在windows的命令行窗口中运行：npm install -g grunt-cli即可。更具体的解释参见这里：http://gruntjs.com/getting-started
第三步：在项目的根目录创建project.json与Gruntfile.js两个文件
因为grunt的task运行要依赖于这两个文件。
其中创建project.json文件方法可以通过命令行实现：nmp init我创建project.json
内容如下：
复制代码 代码如下:
{
"name": "fishchart",
"version": "0.0.1",
"description": "html5 canvas chart library",
"author": "zhigang",
"license": "BSD",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-jshint": "~0.6.2",
"grunt-contrib-concat": "~0.3.0"
}
}
使用命令创建时候，如果你不知道写什么直接回车跳过即可。
三： 安装与使用Grunt Plug-in完成javascript文件链接与压缩
1. 安装javascript文件链接插件支持
npm install grunt-contrib-concat --save-dev
2. 安装javascript文件压缩插件支持
npm install grunt-contrib-uglify --save-dev
3. 在Gruntfile.js文件中配置选项，加载与定义task
复制代码 代码如下:
module.exports = function(grunt) {
grunt.initConfig({
//our JSHint options
jshint: {
all: ['main.js'] //files to lint
},
//our concat options
concat: {
options: {
separator: ';' //separates scripts
},
dist: {
src: ['js/*.js', 'js/**/*.js'], //Grunt mini match for your scripts to concatenate
dest: 'js/fishchart_v0.0.1.js' //where to output the script
}
},
//our uglify options
uglify: {
js: {
files: {
'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.js'] //save over the newly created script
}
}
}
});
//load our tasks
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default tasks to run
// grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('development', ['jshint']);
grunt.registerTask('production', ['jshint', 'concat', 'uglify']);
}
四：运行结果
最后还想赞一下，这个东西太好用啦！
您可能感兴趣的文章:
- Node.js的项目构建工具Grunt的安装与配置教程
- 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
- 学习使用grunt来打包JavaScript和CSS程序的教程
- 配置Grunt的Task时通配符支持和动态生成文件名问题
- Grunt入门教程(自动任务运行器)
- 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
- 使用GruntJS构建Web程序之Tasks（任务）篇
- 使用GruntJS构建Web程序之合并压缩篇
- 使用GruntJS构建Web程序之构建篇
- 使用GruntJS构建Web程序之安装篇
- 使用Grunt.js管理你项目的应用说明
- 基于Node.js的JavaScript项目构建工具gulp的使用教程
相关文章
在IE模态窗口中自由查看HTML源码的方法...2007-03-03
这篇文章主要为大家介绍了uniapp界面新增水印实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
electron-builder 的基本使用及electron打包步骤
electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章主要介绍了electron-builder 的基本使用,需要的朋友可以参考下2023-12-12
在前端开发中,我们经常需要对数组进行随机排序,例如在游戏、抽奖、数据随机展示等场景中,JavaScript 提供了多种方式来实现数组的随机排序,本文将详细介绍不同的方法,并分析它们的优缺点,帮助开发者在不同场景下选择合适的解决方案,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了使用javascript做在线算法编程的相关知识,需要的朋友可以参考下2018-05-05
本文主要介绍了jquery源码中常见的知识点以及javascript中原型链常见的知识点，非常的全面，这里推荐给小伙伴们。2015-03-03
这篇文章主要介绍了javascript Array 数组常用方法 ,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了详解微信小程序之提高应用速度小技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能]，同时发布了V1.0beta版的快捷留言功能和源代码，之所以是beta版，就是当时感觉虽然基本功能有了，但是还不够完善，特性也不一定合理2010-04-04
下面小编就为大家带来一篇js链表操作(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论