原文地址: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. mysql character set exception

    问题: 插入数据时,报了这样一个错误:“_mysql_exceptions.Warning: Incorrect string value: ‘\xE6\xB5\x81\xE8\xA1\x8C…’ f ...

  2. java类加载器加载文件

    例子:采用配置文件加反射的方式创建ArrayList和HashSet的实例对象. //第一种方式:类加载器加载文件 InputStream ips = ReflectTest2.class.getCl ...

  3. printf对齐

    C语言中,将printf函数打印出的字符像表格一样分类对齐.%-10d表示这个字符型占10个字节,负号表示左对齐.即下面表格中的x1位置开始填充.如果是%10d,表示右对齐,即在x10位置对齐. x1 ...

  4. java中cookie存取值

    cookie存值: Cookie userCookie=new Cookie("loginInfo",loginInfo); userCookie.setMaxAge(30*24* ...

  5. C#连接SQLServer数据库基本实现

    (在这写下来,防止以后忘记) 在VS2012中新建一个Windows窗口应用程序,并在Form中放置DataGridView和Button两个控件,在Button的单击响应事件中连接数据库: priv ...

  6. taskkill批量删除进程命令

    本人自用: TASKKILL /F /IM notepad --强制删除进程名中带notepad的所有进程 TASKKILL [/S system [/U username [/P [password ...

  7. Unity Cookie

    1   在Unity里面,选择脚本单击左键打开 Sync Mono Development  这样就可以打开整个工程的脚本文件 进而才能在脚本中继续进行切换      Mesh    MeshFilt ...

  8. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  9. PL/SQL连接Oracle数据库,中文乱码,显示问号

    问题描述: 登陆PL/SQL,执行SQL语句后,输出的中文标题显示成问号????:条件包含中文,则无数据.         如果不是中文,需要修改注册表值,方法如下: 进入注册表:Win+r,输入re ...

  10. 修复 OS X 的系统盘出现 Invalid Node Structure 问题

    昨晚我的MBP突然出现启动的时候会自动关机的问题.开机进入到 Recovery 模式之后,用 Disk Utility 检查系统盘,发现 Invalid Node Structure 错误, Disk ...