将 gulp sass 编译到服务任务中答案

【问题标题】：Compile gulp sass into the serve task将 gulp sass 编译到服务任务中
【发布时间】：2016-08-30 02:08:06
【问题描述】：

我做这个 gulp 任务：sass、serve、watch，但是当 gulp watch 进入 gulp serve 被激活但它不起作用时，我正在尝试运行 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']);

【问题讨论】：

试试这个 gulp.task('default', ['watch']);

标签： gulp gulp-watch gulp-sass

【解决方案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}));
});

【讨论】：