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. yui压缩js文件

    http://ganquan.info/yui/?hl=zh-CN yui压缩js文件 在工程中,js文件的管理是个麻烦事,并且随着项目越做越多,各种js文件混杂,有时候一个页面需要加载好多js文件, ...

  6. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  7. 【链接】在线压缩JS文件

    在线压缩JS文件: http://yui.2clics.net/ https://refresh-sf.com/

  8. npm压缩js文件

    参考:https://blog.csdn.net/msy_msy/article/details/78261383 1.压缩单个js文件 cnpm install uglify-js -g 安装 1& ...

  9. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

随机推荐

  1. redis缓存技术学习

    1 什么是redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串). list(链表).set(集合)和zset ...

  2. Uploadify使用随笔

    最近项目使用了Uploadify一个上传插件,感觉的挺好用的. 上传控件: 引用JS <script src='<% =ResolveUrl("~/JS/Uploadify/jq ...

  3. mysql入门1

    进入mysql数据库:进入mysql安装时的目录bin文件夹内

  4. 关于编程一些鲜为人知的真相 csdn

    <关于编程一些鲜为人知的真相>一文讲了一些编程的真相:如果把所有项目的生命周期平均一下,那么一个程序员大概10-20%的时间用来写代码,并且大多数程序员可能每天大约只有10-12行代码会进 ...

  5. 关于freeCAD

    FreeCAD界面 FreeCAD的功能目的是成为一个3D CAD 建模工具.她的开发完全遵循 Open Source (GPL & LGPL License)协议. FreeCAD的目标直指 ...

  6. CI关于自动加载

    /application/config/autoload.php文件中定义自动加载的包.类库.helper.用户配置文件.语言文件.模块 类库会到/application/libraries目录或/s ...

  7. IOC和Aop使用的扩展

    下面还有静态代理和动态代理 1.构造注入 lib包: 在entity包下新建一个实体类User 代码: package cn.happy.entity; public class User { pri ...

  8. jenkins环境搭建

    1.官网下载jenkins的安装包,直接解压安装.jenkins-1.641.zip 2.修改jenkins端口,启动jenkins服务.E:\Program Files (x86)\Jenkins\ ...

  9. 【Python】使用正则表达式实现计算器练习

    已知有以下这样一个不太友好的公式: 1 - 2 * ( (60-30 +(-9-2-5-2*3-5/3-40*4/2-3/5+6*3) * (-9-2-5-2*5/3 + 7 /3*99/4*2998 ...

  10. Makefile拆分编写

    在实际开发项目中,我们通常将一个工程划分为多个文件夹,每个文件夹代表不能的功能,如:我的一个项目cpl,它分为两个文件夹:src和test.当在cpl文件夹中运行make的时候,它的一级目录都会自动运 ...