自动生成 .sass 并实时重新加载

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() {
});

不得不一遍

又一遍地输入"大口大口的风格"。无法在不重复键入的情况下让它从 .sass 自动生成.css。如何让它自动生成？

另一件事是实时重新加载。在带有扩展程序实时重新加载的 chrome 浏览上进行测试时，它似乎不起作用。不知道哪里出了问题。

Answer 1

你看错了。

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

应该是这样的

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

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

你可以对livereload做类似的事情。我建议看看类似 浏览器同步 - 它不需要浏览器插件，一旦配置就"正常工作"。