仓库源文，站点原文

layout: post title: Setup Gulp Livereload

tags: [gulp, npm]

Gulp

Gulp is a new build tool for web developers.

Livereload

Livereload can reload pages when changes detected.

Grunt livereload.

Install gulp livereload

1. Install chrome extension. link

2. Install npm module. npm install --save-dev gulp-livereload

Setup livereload with gulp watch

1. Edit gulpfile.js

// import gulp
var gulp = require('gulp');
// import some module else
var shell = require('gulp-shell');
// import livereload
var livereload = require('gulp-livereload');
// set path
var paths = {
    src: 'src/*',
    des: 'bin-debug/*/*.js'
};
// set build task
gulp.task('build', shell.task('egret build'));
// set watch task
gulp.task('watch', function() {
    // when files in paths.src changed, build task will be triggered
    gulp.watch(paths.src, ['build']);
    // start livereload listener
    // a server will be started, livereload chrome extension will connect this server.
    livereload.listen();
    // when files in paths.des changed, trigger livereload, and this will trigger reload on chrome pages
    // here we don't use source files, because typescript changes need to be compiled to javascript, then changes take effect
    gulp.watch(paths.des).on('change', livereload.changed);
});
// set server task
gulp.task('run', shell.task('egret startserver'));

1. Open pages in chrome.

2. Click livereload extension, and when the hollow circle becomes solid, it works.

3. Now we edit some files, save it, pages reload automatically! WebStorm will save file auto, so changes take effect when typing.

Example

http://github.com/vivaxy/game/eliminate/

Problems

When destination files compiled one by one, livereload will be triggered each time! How to solve it?

Reference

Gulp Livereload