grunt压缩js文件
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表示全局安装。)
安装完成后出现以下信息





添加两个测试源文件
47V7D)E7A5H88.jpg)
{
"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
47V7D)E7A5H88.jpg)
grunt压缩js文件的更多相关文章
- 吉特仓储管系统(开源)--使用Grunt压缩JS文件
在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...
- 如何使用grunt压缩js文件
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- iis7 压缩js文件和启用gzip压缩
压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent loc ...
- uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)
一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs mai ...
- yui压缩js文件
http://ganquan.info/yui/?hl=zh-CN yui压缩js文件 在工程中,js文件的管理是个麻烦事,并且随着项目越做越多,各种js文件混杂,有时候一个页面需要加载好多js文件, ...
- gulp压缩js文件报错日志
输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...
- 【链接】在线压缩JS文件
在线压缩JS文件: http://yui.2clics.net/ https://refresh-sf.com/
- npm压缩js文件
参考:https://blog.csdn.net/msy_msy/article/details/78261383 1.压缩单个js文件 cnpm install uglify-js -g 安装 1& ...
- 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...
随机推荐
- redis缓存技术学习
1 什么是redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串). list(链表).set(集合)和zset ...
- Uploadify使用随笔
最近项目使用了Uploadify一个上传插件,感觉的挺好用的. 上传控件: 引用JS <script src='<% =ResolveUrl("~/JS/Uploadify/jq ...
- mysql入门1
进入mysql数据库:进入mysql安装时的目录bin文件夹内
- 关于编程一些鲜为人知的真相 csdn
<关于编程一些鲜为人知的真相>一文讲了一些编程的真相:如果把所有项目的生命周期平均一下,那么一个程序员大概10-20%的时间用来写代码,并且大多数程序员可能每天大约只有10-12行代码会进 ...
- 关于freeCAD
FreeCAD界面 FreeCAD的功能目的是成为一个3D CAD 建模工具.她的开发完全遵循 Open Source (GPL & LGPL License)协议. FreeCAD的目标直指 ...
- CI关于自动加载
/application/config/autoload.php文件中定义自动加载的包.类库.helper.用户配置文件.语言文件.模块 类库会到/application/libraries目录或/s ...
- IOC和Aop使用的扩展
下面还有静态代理和动态代理 1.构造注入 lib包: 在entity包下新建一个实体类User 代码: package cn.happy.entity; public class User { pri ...
- jenkins环境搭建
1.官网下载jenkins的安装包,直接解压安装.jenkins-1.641.zip 2.修改jenkins端口,启动jenkins服务.E:\Program Files (x86)\Jenkins\ ...
- 【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 ...
- Makefile拆分编写
在实际开发项目中,我们通常将一个工程划分为多个文件夹,每个文件夹代表不能的功能,如:我的一个项目cpl,它分为两个文件夹:src和test.当在cpl文件夹中运行make的时候,它的一级目录都会自动运 ...