使用gulp-watch和gulp-server-livereload在gulpfile.js中没有更新样式

Question

If I make a change to my style sheet then the styles will be re-loaded but only once. I need the styles to reload after all changes.

I am new to using task managers so any help would be greatly appreciated.

gulpfile.js

var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass'),
server = require('gulp-server-livereload'),
bower_files = require('bower-files')(),
inject = require('gulp-inject'),
del = require('del'),
watch = require('gulp-watch'),
batch = require('gulp-batch'),
jasmine = require('gulp-jasmine'),
karma = require('karma').server,
src = 'app/',
dest = 'dist/',
cssDestFolder = src,
cssStyle = 'compressed',
serverSrc = dest;

 /**
  * Set distribution environment
  */
  gulp.task('set-env-dist', function () {
    cssDestFolder = dest;
    cssStyle = 'compressed';
    serverSrc = dest;
});

/**
 * Set development environment
 */
 gulp.task('set-env-dev', function () {
   cssDestFolder = src;
   cssStyle = 'expanded';
   serverSrc = src;
});

/**
 * Run test once and exit
 */
 gulp.task('test', function (done) {
    karma.start({
      configFile: __dirname + '/karma.conf.js',
      singleRun: true
   }, done);
 });

 /**
  * Concatenate and compress bower
  */
  gulp.task('bower', function () {
    gulp.src(bower_files.ext('js').files)
    .pipe(concat('bower.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(dest));
  });

 /**
  * Run server
  */
  gulp.task('webServer', function () {
    gulp.src(serverSrc)
     .pipe(server({
        livereload: true,
        log: 'debug',
        open: true
      }));
   });

  /**
   * Compress sass
   */
   gulp.task('styles', function () {
     console.log('in styles')
     return sass(src + 'app.scss', {style: cssStyle})
      .pipe(gulp.dest(cssDestFolder));
   });

  /**
   * Concatenate and compress js
   */
   gulp.task('scripts', function () {
     return gulp.src([
       src + 'app.js',
       src + 'components/**/*.js',
       src + '**/*.js',
       '!' + src + 'bower_components/**/*.js',
       '!' + src + 'components/**/*.spec.js',
       '!' + src + '**/*.spec.js'
     ])
    .pipe(concat('main.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(dest));
   });

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

  gulp.task('build-dist', ['set-env-dist', 'scripts', 'styles', 'bower']);
  gulp.task('serve-dist', ['set-env-dist', 'webServer', 'watch']);
  gulp.task('serve', ['set-env-dev', 'sass', 'webServer']);

Answer 1

I've never used gulp-batch , but you are only running one gulp task in your watch . Try this,

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