css - 如何将 autoreload 添加到 gulp sass 编译器的 gulpfile？

Question

我想通过 gulp sass 提高我的工作效率，因此我想在我更改 sass 文件中的某些内容时使用 autoreload 来简单地重新加载我的页面，问题是我没有找到合适的解决方案。有人知道这是如何工作的吗？

我写的 gulpfile 在这里:

var gulp = require('gulp');
var sass = require('gulp-sass');

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

gulp.task('watch', function() {
	gulp.watch('./sass/*.scss', ['sass'])
});

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

Answer 1

有很多方法可以获得自动重新加载功能，下面的示例使用 gulp-connect .我还在这个示例中保留了其他几个有用的 SCSS 编译流程片段，并添加了评论让您有所了解。

"use strict";

var autoprefixer = require("autoprefixer");
var gulp = require("gulp");
var connect = require("gulp-connect");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var sass = require("gulp-sass");

gulp.task('server', function () {
    connect.server({    // Create local server that will auto-reload itself upon changes into project
        root: '.',      // Path to WEB root (NOT simply root!) of your project
        livereload: true
    });
});

gulp.task('css', function () {
        return gulp.src('./sass/**/*.scss')   // Notice changed glob, it will allow you to compile scss files that are resides into deeper directories
            .pipe(plumber())    // Plumber is useful to avoid crashing Gulp in a case if plugin throws exception
            .pipe(sass().on('error', sass.logError))  // Make sure that errors are logged
            .pipe(postcss([     // PostCSS plugins run, Autoprefixer in particular
                autoprefixer({browsers: ['last 2 versions', 'IE >= 11', '> 1%']})
            ]))
            .pipe(gulp.dest('./css'))     // Save resulted CSS
            .pipe(connect.reload());    // Re-load browser so changes will became visible
    }
);

gulp.task('default', ['css']);  // Compile CSS by default

gulp.task('watch', ['server', 'default'], function () {     // Make sure that server is launched in a case if we're running watching
    gulp.watch([
        './sass/**/*.scss'
    ], ['css']);
});

设置本地服务器后，您将能够通过运行 gulp watch 或 gulp server 通过 localhost:8080 访问您的元素。