用grunt对css代码进行压缩

1.先安装Node.js环境

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Node.js的下载链接

安装完后进行验证

2.安装grunt及插件

通过npm install grunt命令行来安装grunt

安装完后文件夹里会多出node_modules文件夹和package-lock.json文件

npm install -g grunt-cli

他可以让你在项目的任意子目录中运行grunt 。

压缩css文件要用到的grunt插件是 grunt-contrib-cssmin所以我们通过命令行npm install grunt-contrib-cssmin来安装

我们在box文件夹下安装,但是他会自动安装到node_modules文件夹中(ps:用‘cd’命令可以切换文件路径。切换磁盘直接 ‘盘符+:’即可)

3.配置package.json和Gruntfile.js文件

首先通过npm init来生成package.json文件,

运行完后文件夹里就会多一个package.json文件

文件内容如下所示:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-cssmin": "^2.2.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lg",
  "license": "ISC"
}

接下来配置Gruntfile.js文件

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        cssmin: {
           files:{
              expand: true,      //必要的
              cwd: ‘src‘,           //要压缩的文件所在位置的固定路径
              src: ‘**/*.css‘,    //要压缩的文件所在位置
              dest: ‘dist‘,         //压缩后的文件所在位置
              ext:‘.min.css‘     //压缩后的文件命名
            }
        }
    });
    //运行grunt-contrib-cssmin插件
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);

    //当输入grunt命令时运行grunt-contrib-cssmin
    grunt.registerTask(‘default‘, [‘cssmin‘]);
}

激动人心的时刻到了,下面就来压缩我们的css文件了

输入grunt

再俩看目录结构,可发现在dist下新建了一个css文件夹,结构和src文件夹保持一致

这是由于src: ‘**/*.css‘,  匹配了src文件夹下所有css文件,

ext:‘.min.css‘让我们压缩所有css文件,而不是单个文件。

好了Grunt压缩css就说完了,更多内容自然是参见grunt官网咯,官网

时间: 2024-10-04 14:24:35

用grunt对css代码进行压缩的相关文章

CSS格式化 CSS代码压缩工具

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

整理及优化CSS代码的7个原则

作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再考虑这条30KB的理想准则.随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站来说,仅仅一个CSS文件就已经超过了30KB的上限. 但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和

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

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽

用Grunt进行CSS文件压缩

假设你的项目的CSS文件全部放在项目目录下名为css的文件夹中,现在将它压缩合并成一个名为main-min.css的文件,放在css-min文件夹下. (1)首先保证机器安装了node.js. (2)在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包,package.json的内容如下: { "author": "evan <[email protected]>", "name": "CSS_Z

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

【转载】【grunt整合版】30分钟学会使用grunt打包前端代码

[grunt整合版]30分钟学会使用grunt打包前端代码 grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装

【grunt整合版】30分钟学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

【grunt第一弹】30分钟学会使用grunt打包前端代码

前言 以现在前端js激增的态势,一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说,文件上百简直是家常便饭,那么这个时候我们的js文件应该怎么处理呢?另外,对于css文件,又该如何处理呢??这些都是我们实际工作中要遇到的问题,比如我们现在框架使用zepto.backbone.underscore我们要如何将他们合成一个libs文件,这都是令人头疼的问题 但是grunt的出现却让这些事情变得优雅起来!简单一键,打包结束,尼玛不是不可能啊! grunt 是一套前端自动化工具,一个基于nod

【grunt整合版】学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun