gulp - Generate .sass automatically and livereload -

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 files in dist/, reload on change   livereload.listen();   gulp.watch(['./public/styles']).on('change', livereload.changed); });   gulp.task('default', ['styles', 'watch'], function() {  }); 

kept on having type "gulp styles" on again , again. couldn't generate .sass .css automatically without typing repeatedly. how make generate automatically?

another thing live reload. seems not working when testing on chrome browse extension live reload. not sure went wrong.

you watch wrong.

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

should like

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

this cause styles task run whenever sass file updated within public/styles/, if it's nested within child directories.

you similar livereload. suggest looking @ browsersync though - doesn't require browser plugin , "just works" once configured.