在前端開發(fā)過程中，我們通常會(huì)用到一些工具來自動(dòng)化一些重復(fù)性工作，減輕開發(fā)負(fù)擔(dān)，提高生產(chǎn)效率。其中一個(gè)非常有用的工具就是 gulp。在 gulp 的世界里，有很多種插件可以幫助我們完成各種任務(wù)，比如壓縮圖片、合并 CSS、壓縮 JS 等等。今天，我們就來了解一下如何使用 gulp 按需合并 CSS。

為什么要按需合并 CSS？因?yàn)槿绻麑⑺械?CSS 文件都合并在一起，會(huì)導(dǎo)致頁面加載速度變慢，這對用戶體驗(yàn)有很大的影響。而按需合并 CSS 可以將頁面所需的 CSS 文件按需加載，從而減少頁面加載時(shí)間。

下面，我們來看一下如何使用 gulp 實(shí)現(xiàn)按需合并 CSS：

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const filter = require('gulp-filter');
gulp.task('css', function() {
const cssFiles = ['./src/css/reset.css', './src/css/*.scss'];
const sassFilter = filter('**/*.scss', {restore: true});
return gulp.src(cssFiles)
.pipe(sassFilter)
.pipe(sass())
.pipe(sassFilter.restore)
.pipe(autoprefixer())
.pipe(concat('main.css'))
.pipe(cleanCSS())
.pipe(gulp.dest('./dist/css'));
});

上面就是按需合并 CSS 的 gulp 代碼。我們通過 filter 插件來篩選出需要編譯的 SCSS 文件，將其編譯成 CSS 文件，再和 reset.css 文件合并在一起，最后通過 cleanCSS 插件進(jìn)行壓縮，將結(jié)果輸出到 dist/css 目錄下。

除此之外，我們還可以通過設(shè)置參數(shù)，將文件合并的順序進(jìn)行調(diào)整。比如，可以將 reset.css 文件放在最前面，保證其樣式不被其他樣式覆蓋：

gulp.task('css', function() {
const sassFiles = ['./src/css/*.scss'];
const sassFilter = filter('**/*.scss', {restore: true});
const cssFilter = filter(['**/*.css', '!**/reset.css'], {restore: true});
const resetFilter = filter('**/reset.css', {restore: true});
return gulp.src(sassFiles)
.pipe(sassFilter)
.pipe(sass())
.pipe(sassFilter.restore)
.pipe(autoprefixer())
.pipe(cssFilter)
.pipe(concat('main.css'))
.pipe(cssFilter.restore)
.pipe(resetFilter)
.pipe(concat('reset.css'))
.pipe(resetFilter.restore)
.pipe(cleanCSS())
.pipe(gulp.dest('./dist/css'));
});

上面代碼中，我們定義了三個(gè) filter 插件，分別是 sassFilter、cssFilter 和 resetFilter。通過它們，我們可以按照定義好的順序，將需要合并的文件進(jìn)行分離和合并，生成最終的 CSS 文件。

在項(xiàng)目開發(fā)中，按需合并 CSS 可以大大減少文件加載時(shí)間，提高用戶體驗(yàn)。如果你還沒有嘗試過，快來使用 gulp 和 filter 插件來實(shí)現(xiàn)吧！