假设你的项目的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. SQL Server死锁总结 [转]

    1. 死锁原理 根据操作系统中的定义:死锁是指在一组进程中的各个进程均占有不会释放的资源,但因互相申请被其他进程所站用不会释放的资源而处于的一种永久等待状态. 死锁的四个必要条件:互斥条件(Mutua ...

  2. 简单的事件处理类Event

    class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.handlers[type]){ this.ha ...

  3. Android Message和obtainMessage的差别

    前几天须要实现一个以太网功能就看了以太网的源代码部分,看见了源代码部分在消息处理时,发现有一些不同的地方:   平时我在处理消息时:   1.首先创建Handler对象:   private Hand ...

  4. [学习笔记]JavaScript基础

    JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...

  5. android 程序猿跳槽须要注意哪些?

    我是一个工作3年多的android开发,因为公司和个人发展原因.打算跳槽! 这次跳槽又给我好好的上了一课!所以我自己反思总结了一下.然后整理出一下几点 程序猿打算跳槽的时候须要注意的几点. 一 先想好 ...

  6. hive学习笔记-表操作

    Hive数据类型 基本数据类型 tinyint,smallint,int,biging,float,double,decimal,char,varchar,string,binary,boolean, ...

  7. 5.3.3 deque对象

    class collections.deque([iterable[, maxlen]]) 返回一个新双向队列,当有输入迭代器时.会从左至右地加入到队列里.假设没有输入參数,就创建一个空队列. deq ...

  8. Codeforces Round #272 (Div. 2)C. Dreamoon and Sums 数学推公式

    C. Dreamoon and Sums   Dreamoon loves summing up something for no reason. One day he obtains two int ...

  9. ssh连接超时问题解决方案,每一种方案都可以

    1.服务端修改 vim /etc/ssh/sshd_config 修改 ClientAliveInterval 60 ClientAliveCountMax 40 60秒,向客户端发送一次请求. 超过 ...

  10. go语言笔记——map map 默认是无序的,不管是按照 key 还是按照 value 默认都不排序

    示例 8.1 make_maps.go package main import "fmt" func main() { var mapLit map[string]int //va ...