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

});

不得不输入＆＃34; gulp styles＆＃34;一次又一次。无法重复输入，无法自动从.sass到.css生成。如何让它自动生成？

另一件事是实时重装。在使用扩展实时重新加载的Chrome浏览器上进行测试时似乎无法正常工作。不确定它出了什么问题。

Answer 1

你看错了。

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

应该是

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

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

你可以为livereload做类似的事情。我建议看一下像BrowserSync这样的东西 - 它不需要浏览器插件，一旦配置就“正常工作”。

自动生成.sass并进行livereload

1 个答案: