Thursday, April 23, 2015

gulp livereload using node js

gulp-livereload


Compile Sass files and reload the chrome browser automatically whenever we save the content in editor.


var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    minifyCSS = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    watch = require('gulp-watch'),
    http = require('http'),
    st = require('st'),
    livereload = require('gulp-livereload');

log = new Log('info');

var gulpPaths = {
    sass: 'scss/',
    cssDist: 'dist/css/'
}

gulp.task('sass', function () {
    //gulp.src(gulpPaths.sass + '**/*.scss')
    gulp.src(gulpPaths.sass + 'main.scss')
    .pipe(sass())
    .pipe(gulp.dest(gulpPaths.cssDist))
    
    //.pipe(concat(gulpPaths.cssDist + 'main.css'))
    //.pipe(gulp.dest('./'))
    //.pipe(minifyCSS())
    //.pipe(rename('main.min.css'))
    //.pipe(gulp.dest(gulpPaths.cssDist))
    .pipe(livereload());
});

gulp.task('watch', ['server'], function () {
    livereload.listen({ start: true });
    gulp.watch(['scss/**/*.scss'], ['sass']);
});

gulp.task('server', function (done) {
    http.createServer(
      st({ path: __dirname + '/', index: 'index.html', cache: false })
    ).listen(8090, done);
});

gulp.task('default', ['sass']);

Run the following command in command line.

C:\test> gulp watch

No comments:

Post a Comment