原文地址:http://xiaomiya.iteye.com/blog/2177877

使用grunt来压缩前端js,css文件

因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩。用grunt压缩已经不是什么新鲜事了,,之前的项目用的是别人给我配置好的。所以也没有去深究。这次类型不同了不需要去上传只需文件压缩。所以下午自己去研究了下grunt确实很好用。

我们这里需要对js和css单独压缩。网上很多都是合并压缩。本人觉得多个js合并之后会存在隐形问题。还是喜欢单独压缩。下面的介绍就只做多个文件单独压缩。

一,什么是grunt,

grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:

① 压缩文件

② 合并文件

③ 简单语法检查

对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件

二,准备阶段

1,nodejs环境

因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境

安装nodejs。

安装好之后检查

打开cmd

输入:node -v

输出:v0.10.28(这个是我的版本)

三,安装grunt

有了nodeJs环境后,我们便可以开始搞grunt了,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI官方推荐在全局安装CLI(grunt的命令行接口)

输入:npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,原因是

每次运行grunt时,它都会使用node的require查找本地是否安装grunt,如果找到CLI便加载这个本地grunt库然后应用我们项目中的GruntFile配置,并执行任务

ps这里安装好后一般在我们的C:\Users\SOS\AppData\Roaming\npm\node_modules

会看到grunt-cli文件

四,添加package.json和Gruntfile.js文件

package.json

代码如下:

{
"name": "test",
"version": "0.1.0",
"description": "test",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}

Gruntfile.js

代码如下:

module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩js
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'js/',
src: '*.js',
dest: 'dest/js/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
},
//压缩css
cssmin: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'css/',
src: '*.css',
dest: 'dest/css/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};

这个里面主要对 js 和 css 进行批量压缩

会依赖 grunt-contrib-uglify 和 grunt-contrib-cssmin 这两个插件

做好后,我们需要在我们的项目的根目录下运行命令

输入: npm install

会将相关的文件下载下来

这个时候我们的根目录下就会多个文件名字叫 node_modules

这一步我们就可以压缩

进入根目录输入命令 grunt 回车就 ok

这个时候如果输出有报错可能说:“ grunt-contrib-cssmin”notfound

那我们要把 grunt-contrib-cssmin 插件下载下来

输入命令: npm install grunt-contrib-cssmin

OK

这个时候如果输出有报错可能说: Fatal error :Unable to find local grunt

或者找不到 grunt 的错误

那我们可以重新安装 grunt

把 C:\Users\SOS\AppData\Roaming\npm\node_modules 下面的 grunt-cli 文件删除。。重新执行

npm install -g grunt-cli

那么最后我们就只用输入 grunt 回车

看到输出的内容就知道 OK 不 OK 了

运行 OK 后,我们的目录里面多了一个文件 dest 里面的有 css 和 js 文件都是多个文件单独的压缩

这就省了我们手动去逐一压缩的苦恼了。

对于 grunt 是如何工作的深入理解就可以看 grunt 官网了

grunt 单独压缩多个js和css文件【转】的更多相关文章

  1. 【翻译】Microsoft Ajax Minifier 快速使用指南(与VS集成使用) 编译后直接压缩项目的JS或CSS文件

    网上找了好久终于找到一个能跟VS集成使用的JS和CSS压缩工具,因为害怕忘记,所以给转发过来,顺便翻译一下,大学那会儿学的英语基本上都已经还给老师了,所以翻译的不太好,不过能看懂就成,对吧? 原文地址 ...

  2. Gulpfile.js——编译、压缩、合并js和css文件

    gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...

  3. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  4. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

  5. 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

    JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...

  6. 项目中对模板和js,css文件进行压缩的处理类

    我们知道,在html的页面中,所有空格和换行符其实都会占据一定的空间,即使使用了gzip压缩,在传输过程中依然会浪费用户的流量和我们自己服务器的带宽,此脚本就是为了解决这个问题而诞生的. 请自行下载G ...

  7. php gizp压缩传输js和css文件

    1. [代码][PHP]代码    <?php     /**     *  完整调用示例:     *  1.combine.php?t=j&b=public&fs=jslib ...

  8. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  9. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

随机推荐

  1. Android SDK Manager无法更新的解决[ 转]

    将下列内容行添加到hosts文件中: 74.125.237.1 dl-ssl.google.com 1.Windows C:\WINDOWS\system32\drivers\etc\Hosts 2. ...

  2. hashMap和hashTable的区别

    每日总结,每天进步一点点 hashMap和hashTable的区别 1.父类:hashMap=>AbstractMap hashTable=>Dictionary 2.性能:hashMap ...

  3. 基于SSM的租赁管理系统0.1_20161225_项目需求

    基于SSM的汽车租赁系统项目计划书 1.产品定位 本系统供提供租赁服务的企业内部使用,供企业员工进行线下操作. 2.需求分析 2.1 能为工作人员提供员工信息的管理功能,具有RBAC基于角色的权限管理 ...

  4. 如何解决System.Web.HttpRequestValidationException的异常

    在.net framework 4.0版本以下, 只需要在web.config中进行如下配置: <configuration>    <system.web>        & ...

  5. iOS书写高质量代码之耦合的处理

    原创 2016-12-26 MrPeak MrPeak杂货铺 耦合是每个程序员都必须面对的话题,也是容易被忽视的存在,怎么处理耦合关系到我们最后的代码质量.今天Peak君和大家聊聊耦合这个基本功话题, ...

  6. 泛型T的类型获取

    T.getClass()或者T.class都是非法的,因为T是泛型变量. 由于一个类的类型是什么是在编译期处理的,故不能在运行时直接在Base里得到T的实际类型. /** * 可以在service层直 ...

  7. jsonp是什么【转载自JavaScript微信公众号】

    转自 http://mp.weixin.qq.com/s/xNnKAeLv6sO0T-IvP2AUlQ          JavaScript微信公众号 一.JSONP的诞生 首先,因为ajax无法跨 ...

  8. popupwindow的基本使用以及基本动画效果

    1.创建一个popupwindow view的布局文件自己写一个就好了,这里就不说了 View view= LayoutInflater.from(context).inflate(R.layout. ...

  9. UE3名称结构(Name)

    解释说明: (1) 直接通过FName的index进行比较来判断两个FName是否相等 (2) 通过FName的index从全局Names数组中取出对应的FNameEntry,可以获得FName的字符 ...

  10. [转]序列化悍将Protobuf-Net,入门动手实录

    最近在研究web api 2,看了一篇文章,讲解如何提升性能的, 在序列化速度的跑分中,Protobuf一骑绝尘,序列化速度快,性能强,体积小,所以打算了解下这个利器 1:安装篇 谷歌官方没有提供.n ...