compass-sass - Gulp，Compass和LiveReload-无样式注入(inject)，页面始终重新加载

一切都差不多了，指南针正在编译CSS，其他一些任务正在运行以缩小，重命名，修订等。问题是，发生样式更改时，LiveReload会重新加载页面，而不是注入样式。如果我切换回compass watch，则会发生样式注入。是否可以使用Gulp，Compass和LiveReload进行样式注入？我希望如此，因为如果没有，我将不得不在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']);

ps。我正在使用LiveReload chrome扩展程序

最佳答案

是的，有可能。启动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任务有关，因此可以将其包括在问题中，以便我们进行查看。也许最后，还有其他任务导致了此问题。

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

用static/scss/file.scss body创建了一个简单的background-color。我使用了与gulpfile其余部分相同的代码段。

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

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

关于compass-sass - Gulp，Compass和LiveReload-无样式注入(inject)，页面始终重新加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22711815/