Gulp, livereload, jade

Question

Need help. I use gulp-conect and it livereload method. But if I build a few template in time, get a lot of page refresh. Is any solution, I want to build few templates with single page refresh?

Answer 1

So, I reproduce the problem you have and came accross this working solution.

First, lets check gulp plugins you need:

• gulp-jade
• gulp-livereload
• optional: gulp-load-plugins

In case you need some of them go to:

http://gulpjs.com/plugins/

Search for them and install them.

Strategy: I created a gulp task called live that will check your *.jade files, and as you are working on a certain file & saving it, gulp will compile it into html and refresh the browser.

In order to accomplish that, we define a function called compileAndRefresh that will take the file returned by the watcher. It will compile that file into html and the refesh the browser (test with livereload plugin for chrome).

Notes:

• I always use gulp-load-plugin to load plugins, so thats whay I use plugins.jad and plugins.livereload.
• This will only compile files that are saved and while you have the task live exucting on the command line. Will not compile other files that are not in use. In order to accomplish that, you need to define a task that compiles all files, not only the ones that have been changed.
• Assume .jade files in /jade and html output to /html

So, here is the gulpfile.js:

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('webserver', function() {
  gulp.src('./html')
    .pipe(plugins.webserver({
      livereload: true
    }));
  gulp.watch('./jade/*.jade', function(event) {
    compileAndRefresh(event.path);
  });
});

function compileAndRefresh(file) {
  gulp.src(file)
    .pipe(plugins.jade({
    }))
    .pipe(gulp.dest('./html'))
}

Post edit notes:

• Removed liveReload call from compileAndRefresh (webserver will do that).
• Use gulp-server plugin insted of gulp-connect, as they suggest on their repository: "New plugin based on connect 3 using the gulp.src() API. Written in plain javascript. https://github.com/schickling/gulp-webserver"

Answer 2

Something you can do is to watch only files that changes, and then apply a function only to those files that have been changed, something like this:

gulp.task('live', function() {
  gulp.watch('templates/folder', function(event) {
    refresh_templates(event.path);
  });
});

function refresh_templates(file) {
  return 
    gulp.src(file)
      .pipe(plugins.embedlr())
      .pipe(plugins.livereload());
}

PS: this is not a working example, and I dont know if you are using embedlr, but the point, is that you can watch, and use a callback to call another function with the files that are changing, and the manipulate only those files. Also, I supposed that your goal is to refresh the templates for your browser, but you manipulate as you like, save them on dest or do whatever you want.

Key point here is to show how to manipulate file that changes: callback of watch + custom function.

Answer 3

var jadeTask = function(path) {
path = path || loc.jade + '/*.jade';

if (/source/.test(path)) {
    path = loc.jade + '/**/*.jade';
}

return gulp.src(path)
        .pipe(changed(loc.markup, {extension: '.html'}))
        .pipe(jade({
            locals  : json_array,
            pretty  : true
        }))
        .pipe(gulp.dest(loc.markup))
        .pipe(connect.reload());

}

Answer 4

First install required plugins

• gulp
• express
• gulp-jade
• connect-livereload
• tiny-lr
• connect

then write the code

var gulp    = require('gulp'); 
var express = require('express'); 
var path    = require('path'); 
var connect = require("connect"); 
var jade    = require('gulp-jade'); 
var app     = express(); 

gulp.task('express', function() {    
 app.use(require('connect-livereload')({port: 8002})); 
 app.use(express.static(path.join(__dirname, '/dist')));   
 app.listen(8000);  
});

var tinylr;
gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
  tinylr.listen(8002);
});

function notifyLiveReload(event) {
  var fileName = require('path').relative(__dirname, event.path);
  tinylr.changed({
    body: {
      files: [fileName]
    }
  });
}

gulp.task('jade', function(){   
  gulp.src('src/*.jade')   
      .pipe(jade()) 
      .pipe(gulp.dest('dist')) 
});

 gulp.task('watch', function() {
  gulp.watch('dist/*.html',  notifyLiveReload);
  gulp.watch('src/*.jade', ['jade']);
});

gulp.task('default', ['livereload', 'express', 'watch', 'jade'], function() {

});

find the example here at GitHub