自动生成 .sass 并 livereload

Question

var gulp =require('gulp'),
    sass = require('gulp-ruby-sass')
    minifycss = require('gulp-minify-css'),
    sourcemaps = require('gulp-sourcemaps'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    autoprefixer = require('gulp-autoprefixer'),
    del = require('del');

gulp.task('styles', function() {
   return sass('./public/styles/sass/style.sass')
       .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
       .pipe(gulp.dest('./public/styles/css/'))
});

//clean
gulp.task('clean', function(cb) {
    del(['./public/styles/css'], cb)
});

gulp.task('watch', function() {

  // Create LiveReload server

  gulp.watch('./public/styles/', ['styles'])
  // Watch any files in dist/, reload on change
  livereload.listen();
  gulp.watch(['./public/styles']).on('change', livereload.changed);
});


gulp.task('default', ['styles', 'watch'], function() {

});

不得不一遍又一遍地输入 "gulp styles"。如果不重复输入，就无法让它自动从 .sass 生成到 .css。如何让它自动生成？

另一件事是实时重新加载。在 chrome 浏览器上测试扩展实时重载时似乎不起作用。不知道哪里错了。

Answer 1

你看错了

gulp.watch('./public/styles/', ['styles'])

应该是这样的

gulp.watch('./public/styles/**/*.scss', ['styles'])

每当 SASS 文件在 public/styles/ 中更新时，这将导致 styles 任务运行，即使它嵌套在子目录中也是如此。

您可以为 livereload 做类似的事情。不过，我建议查看类似 BrowserSync 的内容 - 它不需要浏览器插件，并且一旦配置 "just works"。

自动生成 .sass 并 livereload

Generate .sass automatically and livereload

gulp