Sass 自动化编译与浏览器自动刷新

2023-11-07 22:18:06

Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理语言，能够让开发人员使用更简洁、更强大的语法来编写 CSS 代码，从而提高开发效率和代码的可维护性。但是，Sass 文件需要经过编译才能成为浏览器可识别的 CSS 文件。

gulp 是一个前端任务运行器，可以自动执行各种任务，例如编译 Sass 文件、压缩 JavaScript 文件、优化图像等。通过使用 gulp，我们可以将 Sass 文件的编译过程自动化，从而简化开发流程。

browser-sync 是一个浏览器同步工具，可以将浏览器与开发服务器连接起来，当开发服务器上的文件发生变化时，浏览器会自动刷新。通过使用 browser-sync，我们可以实现 Sass 文件修改后浏览器自动刷新的效果，从而方便我们实时查看 Sass 代码修改后的效果。

安装

首先，我们需要安装 gulp 和 browser-sync。我们可以使用以下命令进行安装：

npm install --save-dev gulp browser-sync

配置

在项目根目录下创建一个名为 gulpfile.js 的文件，并输入以下内容：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

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

gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task('watch', function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
  gulp.watch('./**/*.html').on('change', browserSync.reload);
  gulp.watch('./**/*.js').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'browser-sync', 'watch']);