在前端開發中，我們經常需要實時預覽樣式的修改效果，而傳統的手動刷新頁面的方式效率低下，更為高效的方式是使用熱重載技術。在gulp工具中，我們可以使用插件gulp-connect來實現css的熱加載。

//引入gulp和gulp-connect插件
var gulp = require('gulp');
var connect = require('gulp-connect');
//定義任務：開啟本地服務
gulp.task('connect', function() {
connect.server({
livereload: true //開啟自動刷新
});
});
//定義任務：css文件變化時自動重新加載
gulp.task('css', function() {
gulp.src('./css/*.css')
.pipe(connect.reload());
});
//定義任務：監控文件變化，進行實時刷新
gulp.task('watch', function() {
gulp.watch('./css/*.css', ['css']);
});
//定義默認任務
gulp.task('default', ['connect', 'watch']);

在以上的gulpfile.js文件中，我們先定義了一個開啟本地服務的任務connect，其中通過設置livereload屬性為true來開啟自動刷新功能。接著定義了一個css任務，其中利用gulp-connect插件的reload方法實現了css文件變化時自動重新加載的效果。最后通過定義watch任務，實現了監聽文件變化并實時刷新的效果。默認任務是通過設置gulp.task的第二個參數為數組，指向其他需要在默認任務中執行的任務，這里是connect和watch兩個任務。使用gulp命令即可啟動默認任務。

使用上述的gulpfile.js來實現css的熱加載非常簡單，只需要在終端輸入gulp命令后，打開瀏覽器訪問http://localhost:8080即可啟動本地服務器并實時預覽頁面的變化效果。