gullowfile.js中没有使用gullowwatch和gullowserver livereload更新样式

Styles are not being updated in gulpfile.js using gulp-watch and gulp-server-livereload

本文关键字:gullowserver livereload 更新 样式 gullowwatch js gullowfile      更新时间:2024-01-15

如果我对样式表进行了更改,则样式将被重新加载,但只加载一次。我需要在所有更改后重新加载样式。

我是使用任务管理器的新手,所以任何帮助都将不胜感激。

gullfile.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']);

我从未使用过gulp-batch,但您在watch中只运行了一个gullow任务。试试这个,

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