CSS 使用Gulp编译Sass和压缩第三方CSS

在本文中，我们将介绍如何使用Gulp自动化工具来编译Sass并压缩第三方CSS。CSS预处理器Sass可以帮助我们更轻松地编写样式表，并且使用Gulp可以简化这一过程，提高开发效率。

阅读更多：CSS 教程

什么是Sass？

Sass是一种CSS预处理器，它扩展了CSS的功能，提供了一些有用的特性，如变量、嵌套、混合、继承等。使用Sass能够使我们的样式表更加模块化、可重用，并且提高了代码的可维护性。

以下是一个示例的Sass代码：

$primary-color: #FF0000;

.button {
  background-color: $primary-color;
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 5px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

上述示例中，我们定义了一个名为$primary-color的变量，然后在.button类中使用该变量。这样，在样式表中使用变量可以改善可维护性，并且我们只需要在一个地方更改变量的值即可应用到整个样式表。

为什么使用Gulp？

Gulp是一个基于流的自动化工具，它可以大大简化开发流程。通过使用Gulp，我们可以自动编译Sass代码，并将生成的CSS文件压缩。

首先，我们需要安装Gulp及相关插件。在命令行中运行以下命令来安装Gulp：

npm install gulp --save-dev

接下来，我们需要安装一些相关的Gulp插件，包括gulp-sass和gulp-clean-css。运行以下命令来安装这些插件：

npm install gulp-sass gulp-clean-css --save-dev

在安装完成后，我们可以创建一个名为gulpfile.js的文件，并在其中编写Gulp任务。

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');

gulp.task('sass', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('minify-css', function() {
  return gulp.src('dist/css/**/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass', 'minify-css'));

上述代码中，我们创建了两个Gulp任务，分别是sass和minify-css。sass任务用于编译Sass代码，并将生成的CSS文件保存到dist/css目录下。minify-css任务用于压缩CSS文件，并将压缩后的文件替换原来的文件。

最后，我们通过在命令行中运行gulp命令来执行Gulp任务，即可自动编译Sass代码并压缩CSS文件。