最近在使用 Gulp 對(duì)項(xiàng)目進(jìn)行自動(dòng)化構(gòu)建時(shí)，遇到了一個(gè)問題：替換 CSS 文件失敗。

我的項(xiàng)目中有一個(gè) CSS 文件需要替換，原因是在不同的環(huán)境中使用不同的樣式。我使用了 Gulp 的gulp-replace插件進(jìn)行替換，但是替換并沒有成功。

gulp.task('replaceCss', function () {
return gulp.src('src/style.css')
.pipe(replace('original', 'new'))
.pipe(gulp.dest('dist'))
})

在執(zhí)行replaceCss任務(wù)時(shí)，控制臺(tái)并沒有報(bào)錯(cuò)，但是文件并未被替換。我開始懷疑是不是插件的問題，于是我嘗試手動(dòng)更改 CSS 文件，結(jié)果手動(dòng)更改也不生效。

我仔細(xì)檢查了代碼和文件，最終發(fā)現(xiàn)了問題所在：在 HTML 文件中引用的 CSS 文件名與 Gulp 任務(wù)中使用的文件名不一致。因?yàn)槲易詣?dòng)化構(gòu)建中使用了文件指紋（hash）來避免瀏覽器緩存問題，所以在引用 CSS 文件時(shí)添加了 hash。

解決方法很簡(jiǎn)單，只需在 Gulp 任務(wù)中使用正則表達(dá)式進(jìn)行匹配即可：

gulp.task('replaceCss', function () {
return gulp.src('src/**/*.{html,css}')
.pipe(replace('original.css', 'new.css'))
.pipe(gulp.dest('dist'))
})

以上代碼中，我將匹配文件的類型擴(kuò)展了一下，同時(shí)在替換時(shí)使用了文件名，而不是完整路徑。

在使用 Gulp 進(jìn)行自動(dòng)化構(gòu)建時(shí)，我們需要時(shí)刻保持警惕，避免出現(xiàn)小誤操作導(dǎo)致的問題。希望我的經(jīng)驗(yàn)對(duì)大家有所幫助！