compass-sass - Gulp、Compass 和 LiveReload - 没有样式注入(inject)，页面总是重新加载

Question

一切都几乎正常工作，compass 正在编译 CSS 并且一些其他任务正在运行以缩小、重命名、rev 等。问题是当样式发生更改时，LiveReload 正在重新加载页面注入(inject)风格。如果我切换回 compass watch，则会发生样式注入(inject)。是否可以使用 Gulp、Compass 和 LiveReload 进行样式注入(inject)？我希望如此，否则我将不得不在 1 个终端中运行 compass watch 并在另一个看起来有点笨重的终端中运行 gulp。这是 gulpfile.js

中的相关代码

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    compass = require('gulp-compass'),
    minifyCSS = require('gulp-minify-css'),
    rev = require('gulp-rev'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    lr = require('tiny-lr'),
    server = lr(),
    livereload = require('gulp-livereload');

gulp.task('compass', function() {
  gulp.src('./static/scss/*.scss')
  .pipe(compass({
    css: 'static/css',
    sass: 'static/scss',
    image: 'static/images',
    font: 'static/fonts',
    javascript: 'static/js',
    comments: false,
    style: 'expanded',
    bundle_exec: true,
    require: ['wegowise_styles/compass']
  }))
  .on('error', function(err) {})
  .pipe(gulp.dest('./static/css/'))
  .pipe(livereload(server))
  .pipe(minifyCSS())
  .pipe(rename({suffix: '.min'}))
  .pipe(rev())
  .pipe(gulp.dest('./static/production/'))
  .pipe(rev.manifest())
  .pipe(rename('css-manifest.json'))
  .pipe(gulp.dest('./static/production/'));
});

gulp.task('clean', function() {
  return gulp.src(['static/production'], {read: false})
  .pipe(clean());
});

gulp.task('watch', function() {
  gulp.watch('static/scss/**/*.scss', ['compass']);
  gulp.watch('static/js/**/*.js', ['scripts']);
});

gulp.task('default', ['clean', 'watch']);

附言。我正在使用 LiveReload chrome 扩展

Answer 1

是的，这是可能的。当你启动 tiny-lr 时，我没有出现在你的代码中(可能是因为你删除了文件的其余部分)，即:

var gutil = require('gulp-util');

gulp.task('tiny', function(next) {
  server.listen(35729, function() {
    gutil.log('Server listening on port: ', gutil.colors.magenta(port));
    next();
  });
});

// add as a dependency in your watch task
gulp.task('watch', ['tiny'], function() {
  gulp.watch('static/scss/**/*.scss', ['compass']);
  gulp.watch('static/js/**/*.js', ['scripts']);
});

该错误也可能与 scripts 任务有关，因此可以将其包含在问题中以便我们查看。最后，也许还有其他一些任务导致了这个问题。

为了确定，我只是在这里创建了一个测试，并在static文件夹中创建了一个index.html文件，指向css/file.css。

创建了一个带有body background-color 的简单static/scss/file.scss。我使用了您为 gulpfile 的其余部分提供的相同代码片段。

还创建了一个 node-static 服务器并提供 static/ 文件夹下的所有文件。

最后，构建过程中是否涉及其他自动化任务？