CODEWITHSUNDEEP
gulp
joe
joe

Reputation: 1135

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 any 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 to type "gulp styles" over again and again. Couldn't get it to generate from .sass to .css automatically without typing repeatedly. How to make it generate automatically?

Another thing is live reload. It seems not to be working when testing on chrome browse with extension live reload. Not sure where it went wrong.

Upvotes: 0

Views: 60

Answers (1)

deefour
deefour

Reputation: 35370

You watch is wrong.

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

should be something like

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

This will cause the styles task to run whenever a SASS file is updated within public/styles/, even if it's nested within child directories.

You could do something similar for livereload. I suggest looking at something like BrowserSync though - it doesn't require a browser plugin and "just works" once configured.

Upvotes: 1

Related Questions