假设你的项目的CSS文件全部放在项目目录下名为css的文件夹中,现在将它压缩合并成一个名为main-min.css的文件,放在css-min文件夹下。

(1)首先保证机器安装了node.js.

(2)在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包,package.json的内容如下:

{
"author": "evan <evan@evantahler.com>",
"name": "CSS_ZIP",
"description": "CSS压缩",
"version": "0.0.1",
"engines": {
"node": ">=0.8.0"
},
"dependencies": {
"grunt" : "~0.4.2",
"grunt-contrib-uglify" : "~0.2.7",
"grunt-contrib-concat" : "~0.3.0",
"grunt-contrib-cssmin" : "x"
}
}

必须填写的是dependencies部分,需要用json格式填上npm包上的名称和版本号,版本号用x来代替。这里我们用了Grunt和Grunt的一个用于合并压缩CSS的插件grunt-contrib-cssmin。

(3)完成以上后,从命令行进入项目目录下,(需要对Node.js的命令操作有所了解)执行命令:npm install 

该命令会新建一个名为node——module的文件夹(如果不存在),将Grunt以及Grunt插件安装在该文件夹下。

(4)编写Grunt配置文件Gruntfile.js。在项目目录下新建Gruntfile.js作为Grunt的配置文件,内容如下:

module.exports = function(grunt) {
// Do grunt-related things in here
// 配置
grunt.initConfig({ concat :
{
options: {
separator: ';',
stripBanners: true
},
dist : {
src: ['page/jquery.js', 'page/jquery_md5.js','page/moment.js','page/main.js'],
dest: 'dist/main.js'
}
},
uglify : { build : {
src : 'dist/main.js',
dest : 'dist/main.min.js'
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'css-min/main-min.css': [
"css/*.css"
]
}
}
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify','cssmin']);
}

(5)上一步完成后,在命令行中执行:Grunt

这时,就可以看到后台自动新建了一个名为css-min的文件夹,文件夹中是一个名为css-min.css的文件,内容是css文件中css文件的合并压缩后的结果,最终的目录结构图如下:

以后如果CSS文件被修改,只要执行Grunt命令就可以了。

用Grunt进行CSS文件压缩的更多相关文章

  1. webstorm之js,css文件压缩

    不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui com ...

  2. 使用Webpack对Css文件压缩处理的思考

    问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand ...

  3. 开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5

    前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...

  4. js和css文件压缩

    压缩网址 http://tool.chinaz.com/tools/jscodeconfusion.aspx http://tool.oschina.net/jscompress?type=3 htt ...

  5. 【AMAD】django-compressor -- 将JS和CSS文件压缩为一个缓存文件

    简介 个人评分 简介 django-compressor1的example: {% load compress %} {% compress css %} <link rel="sty ...

  6. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  7. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  8. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  9. grunt压缩多个js文件和css文件

    压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 ...

随机推荐

  1. Mysql优化和执行计划

    SQL优化准则 禁用select * 使用select count(*) 统计行数 尽量少运算 尽量避免全表扫描,如果可以,在过滤列建立索引 尽量避免在where子句对字段进行null判断 尽量避免在 ...

  2. MySQL常用函数(转)

    一.数学函数 ABS(x):返回x的绝对值 BIN(x):返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x):返回大于x的最小整数值 EXP(x):返回值e(自然对数的底)的 ...

  3. curl -O 下载文件

    curl -O 下载文件 学习了:http://blog.csdn.net/wulong710/article/details/53127606 curl -O http://a.b.c/a.tar ...

  4. java JDBC 连接数据库查询数据与直接使用sql的疑问

    JDBC 封装连接是好的前提: SystemAuthorizingRealm c = new SystemAuthorizingRealm(); conn = c.getConnection(); / ...

  5. [Elasticsearch] 集群的工作原理 - 第一部分

    本文翻译自Elasticsearch官方指南的life inside a cluster一章. ES就是为高可用和可扩展而生的. 扩展能够通过购置性能更强的server(垂直扩展或者向上扩展,Vert ...

  6. LeetCode 824. Goat Latin (山羊拉丁文)

    题目标签:String 首先把vowel letters 保存入 HashSet. 然后把S 拆分成 各个 word,遍历每一个 word: 当 word 第一个 字母不是 vowel 的时候,把第一 ...

  7. Android Studio报错:DefaultAndroidProject : Unsupported major.minor version 52.0

    今天使用Android Studio 2.0打开我之前的项目时,编译报了如下错误: Error:Cause: com/android/build/gradle/internal/model/Defau ...

  8. VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)

    1.前期准备 具体可见VS2010 使用TeeChart绘图控件 - 之一 控件和类的导入 1. 1 添加TeeChart控件,给控件添加变量m_TeeChart 添加TeeChart控件,右击控件, ...

  9. bzoj 2333 [SCOI2011]棘手的操作 —— 可并堆

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2333 稍微复杂,参考了博客:http://hzwer.com/5780.html 用 set ...

  10. JSP-Runoob:JSP 发送邮件

    ylbtech-JSP-Runoob:JSP 发送邮件 1.返回顶部 1. JSP 发送邮件 虽然使用JSP实现邮件发送功能很简单,但是需要有JavaMail API,并且需要安装JavaBean A ...