入门指南
1. 全局安装 gulp：
npm install --global gulp
2. 作为项目的开发依赖（devDependencies）安装：
npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require(‘gulp‘);gulp.task(‘default‘, function() { ?// 将你的默认的任务代码放在这});4. 运行 gulp：
gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。
正题
作用
想想看，在进行前前端开发的时候，如果js或css或其他文件有任何改动，网页就会自动加载，不用自己手动去按Ctrl+R或者什么F5，是不是很爽。今天给大家推荐的，就是这样一个插件：gulp-connect，它不仅能够自动启动一个web服务器，还能实现上述的热加载的功能
安装
前提是你已经安装好nodejs，gulp，npm，并对他们的使用有基本的了解。且项目下已经初始化好了gulpfile.js和package.js文件了。
如果这些你都还不知道，那就去了解一下吧。
安装命令：
npm install --save-dev gulp-connect
使用
使用默认的参数创建一个服务器：
var gulp = require(‘gulp‘), ?connect = require(‘gulp-connect‘); gulp.task(‘connect‘, function() { ?connect.server();}); gulp.task(‘default‘, [‘connect‘]);监控并自动刷新
监控根目录下的app目录下所有的html文件情况，如有变动，则自动刷新，如果需要监控less，sass,css,js等等，请自动依葫芦画瓢啦！
var gulp = require(‘gulp‘), ?connect = require(‘gulp-connect‘); gulp.task(‘connect‘, function() { ?connect.server({ ???root: ‘app‘, ???livereload: true ?});}); gulp.task(‘html‘, function () { ?gulp.src(‘./app/*.html‘) ???.pipe(connect.reload());}); gulp.task(‘watch‘, function () { ?gulp.watch([‘./app/*.html‘], [‘html‘]);}); gulp.task(‘default‘, [‘connect‘, ‘watch‘]);启动与关闭服务器
gulp.task(‘jenkins-tests‘, function() { ?connect.server({ ???port: 8888 ?}); ?// run some headless tests with phantomjs ??// when process exits: //balabala可以做好多事情 ?connect.serverClose();});监视当前目录中所有html，css，js文件
var gulp = require(‘gulp‘),connect = require(‘gulp-connect‘);gulp.task(‘connect‘, function() { ???connect.server({ ?????root: ‘./‘, ?????livereload: true ???}); ?}); ?gulp.task(‘html‘, function () { ???gulp.src(‘./*.html‘) ?????.pipe(connect.reload()); ?}); ?gulp.task(‘css‘, function () { ???gulp.src(‘./*.css‘) ?????.pipe(connect.reload()); ?}); ?gulp.task(‘js‘, function () { ???gulp.src(‘./*.js‘) ?????.pipe(connect.reload()); ?}); ?gulp.task(‘watch‘, function () { ???gulp.watch([‘./*.html‘,‘./*.css‘,‘./*.js‘], [‘html‘,‘css‘,‘js‘]); ?});gulp.task(‘default‘, [‘connect‘,‘watch‘]);使用Gulp实现网页自动刷新：gulp-connect
原文地址：http://www.cnblogs.com/yang-C-J/p/7490090.html