Gareth's Blog‎ > ‎

Live Reload Typesctipt et al

posted 10 Jul 2014, 13:00 by Gareth Rylance
THis is a live reload example gulp file used in a yo ko bower template. 


More refinements to follow

THanks to http://rhumaric.com/2014/01/livereload-magic-gulp-style/



function startExpress() {

    var express = require('express');
    var app = express();
    app.use(require('connect-livereload')());
    app.use(express.static(__dirname));
    app.listen(4000);
}


var lr;
function startLiveReload() {

    lr = require('tiny-lr')();
    lr.listen(35729);
}
function notifyLivereload(event) {

    // `gulp.watch()` events provide an absolute path
    // so we need to make it relative to the server root
    var fileName = require('path').relative(__dirname, event.path);
    console.log('Live Reload...'+fileName);
    lr.changed({
        body: {
            files: [fileName]
        }
    });
}



// watch task
gulp.task('watch', function() {
    startExpress();
    startLiveReload();

    // Watch ts files
    gulp.watch('**/*.ts', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', ts compile...');
    gulp.src([event.path, 'src/references.d.ts'],{base: './'})
          .pipe(typescript({
                module: 'amd',
                sourcemap: true
            }))
        .pipe(gulp.dest('./'));

    });

    gulp.watch(['src/**/*.js','src/**/*.html','src/**/*.css' ], function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running Live Reload...');
        notifyLivereload(event);

    });


});
Comments