CSS中的相对路径和Grunt压缩

在本文中，我们将介绍CSS中的相对路径和Grunt压缩的用法和示例。

阅读更多：CSS 教程

相对路径

在CSS中，相对路径用于引用其他资源文件，比如图片、字体、样式表等。相对路径是相对于当前CSS文件所在的路径来计算的，它可以是相对于当前路径的子级文件夹，也可以是相对于当前路径的上级文件夹。

使用相对路径引用图片

假设我们有一个文件夹结构如下：

- css
  - style.css
- images
  - logo.png

在style.css中，我们可以使用相对路径引用logo.png：

.logo {
  background-image: url("../images/logo.png");
}

这里的..表示上级目录，所以../images/logo.png表示相对于style.css上一级目录中的images文件夹。

使用相对路径引用字体文件

类似地，在CSS中使用相对路径引用字体文件也很简单。假设我们有一个字体文件font.woff位于与style.css相同的目录下，我们可以这样引用：

@font-face {
  font-family: "MyFont";
  src: url("font.woff") format("woff");
}

这里的font.woff表示与style.css在同一级目录下的font.woff文件。

使用相对路径引用样式表

如果我们的样式表之间有相互引用关系，我们也可以使用相对路径来引用它们。假设我们有一个主样式表main.css，它引入了一个子样式表sub.css，可以这样写：

@import url("sub.css");

这里的sub.css表示与main.css在同一级目录下的sub.css文件。

Grunt压缩

Grunt是一个JavaScript任务运行器，可以帮助我们自动化各种前端开发任务，包括压缩CSS文件。使用Grunt压缩CSS文件可以减小文件体积，提高网页加载速度。

安装Grunt

首先，我们需要全局安装Grunt命令行工具：

npm install -g grunt-cli

然后，在项目目录下，安装Grunt和相关插件：

npm install grunt grunt-contrib-cssmin --save-dev

配置Grunt任务

在项目目录下创建一个Gruntfile.js文件，并配置CSS压缩任务，示例如下：

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      target: {
        files: {
          'dist/style.min.css': ['css/*.css']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.registerTask('default', ['cssmin']);
};