Question

一切都几乎正在工作，指南针正在编译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扩展程序

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任务有关，因此可能将其包含在问题中，以便我们查看。也许，最后，还有一些其他任务导致了这个问题。

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

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

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

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

Gulp，Compass和LiveReload - 没有样式注入，页面总是重新加载

1 个答案: