将gulpsass编译成serve任务

Question

我做这个 gulp 任务：sass、服务、观看，但我正在尝试运行 gulp sass 当 gulp watch into gulp 服务已激活，但无法正常工作。

当我对 sass 文件进行更改时，我需要在浏览器中实时编译和显示。

有什么帮助吗？

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    sass = require('gulp-sass');

gulp.task('serve', function() {
  browserSync.init({
    notify: false,
    port: 3005,
    server: {
      baseDir: ["app"],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  })

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

gulp.task('sass', function() {

  var processors = [
    autoprefixer({ browsers: ['last 2 versions']})
  ];

  return gulp.src('./app/sass/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(postcss(processors))
    .pipe(gulp.dest('./app/css'));
});

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

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

Answer 1

将 .pipe(browserSync.reload({stream: true})) 添加到您的 sass 任务管道应该使浏览器同步仅重新加载已编译的 css。

这是您的 gulp 任务的示例

gulp.task('sass', function() {
    var processors = [
        autoprefixer({ browsers: ['last 2 versions']})
    ];

    return gulp.src('./app/sass/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('./app/css'))
        .pipe(browserSync.reload({stream: true}));
});

将gulpsass编译成serve任务

Compile gulp sass into the serve task

gulp

gulp-watch

gulp-sass