如何使用 grunt 插件压缩合并 css ？加快页面渲染速度的秘诀

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文中，苏南大叔描述如何利用grunt处理css文件。注意：本文仅描述普通的css文件，不涉及less/scss/sass等编译类型的css相关语言。主要的目的，就是压缩合并处理css文件。以求达到减少页面内的资源请求数量的目的。

描述的主战场依然是Gruntfile.js这个配置文件，本文的测试环境是：grunt 1.3.1。

安装grunt构建工具

grunt构建工具的安装，是有些奇怪的。需要全局安装grunt-cli，然后本地安装grunt。本篇文章里面，不做详细描述。可以参考下面这个链接：

• https://newsn.net/say/grunt-config.html

安装css相关插件

本文涉及的两个grunt插件是：grunt-contrib-cssmin和grunt-contrib-concat。但是grunt-contrib-concat已经在上一篇文章中安装过了。

可能涉及的命令行如下，注意要在Gruntfile.js所在的目录执行安装。不解释。

npm install grunt-contrib-cssmin --save
npm install grunt-contrib-concat --save

配置Gruntfile.js

Gruntfile.js有关css的处理，一共有两部分。
一部分是cssmin，用于压缩css文件。一部分是contact，用于合并css文件。

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json');
    grunt.initConfig({
        concat: {
            css: {
                //src: ["build/*.min.css"],
                src:["build/bootstrap.min.css",
                    "build/style.min.css",
                    "build/animate.min.css",
                ],
                dest: 'dest/all.min.css'
            }
        },
        cssmin: {
            target: {
                files: [{
                        expand: true,
                        cwd: 'lib/bootstrap-3.3.7/css/',
                        src: ['bootstrap.css'],
                        dest: 'build',
                        ext: '.min.css'
                    },{
                        expand: true,
                        cwd: 'css/',
                        src: ['style.css'],
                        dest: 'build',
                        ext: '.min.css'
                    },{
                        expand: true,
                        cwd: 'css/',
                        src: ['animate.css'],
                        dest: 'build',
                        ext: '.min.css'
                    },
                ]
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['cssmin','concat']);
}

• grunt.registerTask('default', ['cssmin','concat'])，这一条default任务，就是由'cssmin'和'concat'，这两部分所组成的。
• 这个cssmin的插件配置，有些繁杂些。不如js的配置简单。循环体部分是：

{
    expand: true,
    cwd: 'css/',
    src: ['animate.css'],
    dest: 'build',
    ext: '.min.css'
}

就是说：把<cwd>/<src>'文件，压缩成为/原文件名`文件。

• concat这个部分，比较简单了。苏南大叔提示，需要注意的就是支持在src中设置合并的顺序。

可能存在的问题

因为css文件，是可以引入图片文件的。那么上述操作之后，对应的图片和css的相对路径关系，已经发生了变化。这是非常常见的事情。那么，除了要注意调整 concat的src顺序外，还需要注意调整图片和all.min.css的相对关系。

这里可能存在的问题，就是：使用压缩合并后的css文件，会导致css中的图片背景丢失的问题。这里大家需要特别注意。

执行grunt获得all.min.css

执行grunt命令，就可以获得all.min.css了。

grunt

总结

使用grunt压缩合并css的操作，和压缩合并js的操作，基本类似。都是分为min压缩和contact合并两部分。唯一需要注意的就是，相关资源的引用问题。js的这种问题，并不明显。但是css的图片问题，比较明显罢了。

更多grunt经验文字，请点击：https://newsn.net/tag/grunt 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。