使用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']);
}

四:运行结果
 
最后还想赞一下,这个东西太好用啦!

(0)

相关推荐

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 学习使用grunt来打包JavaScript和CSS程序的教程

    Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理.在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能. Grunt.js是基于Node.js的自动化任务运行器.Grunt.js结合NPM的包依赖管理,完全可以媲美Maven.Grunt.js天然适合前端应用程序的构建--不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建.越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQu

  • 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

    Grunt 简介 Grunt是一款基于js和node.js的构建工具,由于这段时间node.js越来越火爆,grunt拥有丰富的开源社区支持,产生了很多插件.还有一些插件散落在node社区.构建是一个和宽泛的表述,传统理解就是编译.打包.复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass.less预处理成css,css和js的压缩和合并.grunt的插件可以很好的支持这些新的构建概念,而且更为适合用开源技术堆砌的项目. 虽然Grunt更多的用于程序构建,但是本质上Grun

  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs    新建文件package.json    新建文件Gruntfile.js    命令行执行grunt任务 一.新建项目Bejs 源码放在src下,该目录有两个js文件,selector.js和ajax.js.编译后代码放在dest,这个grunt会自动生成. 二.新建package.json package.json放在根目录下,它包含了该项目的一些元信息,如项目名称.描述.版本号,依赖包等.它应该和源码一样被提交到svn或git. 现在的项目结构如下 p

  • 使用GruntJS构建Web程序之合并压缩篇

    有如下步骤: 1.新建项目Bejs2.新建文件package.json3.新建文件Gruntfile.js4.命令行执行grunt任务 一.新建项目Bejs源码放在src下,该目录有两个子目录asset和js.js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们.这篇只关注asset目录,asset目录下放了一些图片和css文件.一会会把两个css资源reset.css和style.css合并,压缩到dest/asset目录.一个合并版本all.css,一个压缩版本

  • Grunt入门教程(自动任务运行器)

    在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码转成CSS代码等等.通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时.Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任 务. 简单说,Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务.这可以简化工作流程,减轻重复性工作带来的负担. ## 安装 Grunt基于Node.js,安装之前要先安装Node.js,然后

  • 使用GruntJS构建Web程序之Tasks(任务)篇

    如何自定义Grunt任务 有时我们需要写一些自己的grunt任务,下面是一个具体例子 一.准备 1. 新建一个目录g12. 新建package.json,放入g13. 新建Gruntfile.js,放入g1 package.json 复制代码 代码如下: {    "name": "g1",    "version": "0.1.0",    "author": "@snandy",  

  • 使用Grunt.js管理你项目的应用说明

    Grunt.js是什么?Grunt.js是一个Javascript Task Runner(Javascript任务运行器),其基于NodeJS,可用于自动化构建.测试.生成文档的项目管理工具. Grunt.js并不是仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西. 为什么使用Grunt.js?简单的说:为了自动化.对于前端项目,例如: •为了明确模块分工,我们可能会将Javascript代码拆成很小很小的一个个js文件,但是我们知道,在最终页面上,

  • 使用GruntJS构建Web程序之安装篇

    它有以下作用 合并JS文件    压缩JS文件    单元测试(基于QUnit)    一句话:完全自动化(automation) 以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目录里使用了.命令: npm install -g grunt-cli 需要注意的是在linux或mac下有时会报没有权限的错误,这时须在前面加一个sudo, 安装后,可以查看改工具的版

  • Node.js的项目构建工具Grunt的安装与配置教程

    Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等.此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理. 所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作. 安装 Grunt-cli 其实是安装 Grunt-cli ,这里安装Gr

  • 配置Grunt的Task时通配符支持和动态生成文件名问题

    copy: { // 这是Task里的其中一个Target dests: { expand: true, cwd: '<%=config.app%>/newFolder', src: ['**/{a*,b*}.html'], dest: '<%=config.dist%>/newFolder', ext: ".shtml", extDot: "first", flatten:true, //去掉中间上当,下面的rename可以再找回来 ren

  • 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

随机推荐