## 编写server服务 ### 1。安装gulp-concat插件 ``` npm install --save-dev gulp-connect@5.6.1 //安装gulp-connect插件，创建一个node服务 ``` ### 2。在gulpfile.js中添加代码 ``` var connect = require('gulp-connect'); gulp.task('server',function () { connect.server(); }); gulp.task('all', ['myhtml', 'myless','myjs', 'myimage', 'server']); gulp.task('default',['all']); ``` ### 3。在项目目录下命令窗口执行gulp 在浏览器中访问[http://localhost:8080/build/] ## 添加热更新功能 ``` ulp.task('server',function () { /*1.设置web服务器*/ connect.server({ root:['build'],//服务器管理/运行哪个目录(默认是项目的根目录) livereload:true, //是否热更新。 port:9999 //指定web服务的端口号（默认是8080） }); /*2.gulp监视文件，并且可以在文件发生改动时候做一些事情. * 参数一：监视的文件 * 参数二: 在文件变动后执行的一个task任务 * */ gulp.watch('src/less/*',['myless']); }); //3.在myless任务中添加重新加载功能 gulp.task('myless',function(){ gulp.src('src/less/index.less') .pipe(less()) //编译成为css\ .pipe(cssmin()) //读取和压缩css文件 .pipe(gulp.dest('build/css')) //输出到指定目录 .pipe(connect.reload()) //当内容发生改变时， 重新加载。 }); ``` ***** **注意** 每修改一次服务上面的 内容就要重新在命令窗口跑一次gulp命令，修改其他页面的内容在热更新开启的情况下不用跑服务