Question

我做了这个gulp任务：sass，serve，watch，但是当我看到gulp watch进入gulp服务器时，我正试图运行gulp sass但是它不起作用。

当我对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任务管道应该使browsersync仅重新加载已编译的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}));
});

将gulp sass编译为服务任务

1 个答案: