首页 文章

有's an issue with my browserSync, it isn' t重新加载我的sass文件

提问于
浏览
0

我正在尝试让我的gulpfile在我更改我的sass文件时观看重新加载 . 目前我必须在终端关闭gulp cmd并刷新它才能工作 .

我在这里想念的是什么?

提前致谢!

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

gulp.task('styles', function() {
    gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './app'
        }
    });

    gulp.watch('app/scss/*.scss', ['styles']);
    gulp.watch('app/**/*.html').on('change', browserSync.reload)
});

gulp.task('default', ['styles', 'serve']);

1 回答

  • 0

    如果您使用Gulp 4.使用此代码:

    let gulp = require('gulp');
    let sass = require('gulp-sass');
    let browserSync = require('browser-sync');
    
    gulp.task('styles', function() {
      return gulp.src('app/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css')) //removed semicolon
        .pipe(browserSync.reload({ stream:true }));
    });
    
    // watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
    gulp.task('serve', gulp.series('styles', function() {
      browserSync({
        server: {
          baseDir: './app'
        }
      });
    
      gulp.watch('app/scss/*.scss', gulp.series('styles'));
      gulp.watch('app/css/*.css', browserSync.reload);
      gulp.watch('app/**/*.html', browserSync.reload);
    }));
    

    如果你使用旧的Gulp:

    let gulp = require("gulp");
    let sass = require("gulp-sass");
    let browserSync = require("browser-sync").create();
    let runSequence = require('run-sequence'); // npm install run-sequence --save-dev
    
    gulp.task("styles", function () {
        gulp
          .src("app/scss/*.scss")
          .pipe(sass())
          .pipe(gulp.dest('app/css'))
    });
    
    // Static server
    gulp.task("serve", function () {
        browserSync.init({
            server: {
                baseDir: "./"
            }
        });
    });
    
    
    //watch for files changes
    gulp.task('watch', ['styles', 'serve'], function () {
        // sass files changes
        gulp.watch('app/scss/*.scss', ['styles']);
    
        // CSS files changes
        gulp.watch('app/css/*.css', browserSync.reload);
    
        // html files changes
        ulp.watch('app/**/*.html', browserSync.reload)
    });
    
    // The default task (called when you run 'gulp' from cli)
    gulp.task('default', function (callback) {
        runSequence(['styles', 'serve', 'watch'],
          callback
        )
    })
    

相关问题