我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

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

安装grunt构建工具

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

安装css相关插件

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

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

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

苏南大叔:如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀 - grunt-install-css
如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀(图2-1)

配置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的相对路径关系,已经发生了变化。这是非常常见的事情。那么,除了要注意调整 concatsrc顺序外,还需要注意调整图片和all.min.css的相对关系。

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

执行grunt获得all.min.css

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

grunt

苏南大叔:如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀 - grunt-css
如何使用 grunt 插件压缩合并 css ?加快页面渲染速度的秘诀(图2-2)

总结

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

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    grunt