gulp-connect 启动本地服务及实现浏览器热加载

Posted 2020-12-16 huodixveye

1、创建package.json文件

npm init

2、安装gulp、gulp-connect

npm install --save-dev gulp gulp-connect

3、创建gulpfile.js文件并引入gulp、gulp-connect

var gulp = require(‘gulp‘);  // 本地、全局都要安装
var connect = require(‘gulp-connect‘);

//创建“更新”任务
gulp.task(‘html‘, function(done) {
  gulp.src(‘./*.html‘).pipe(connect.reload())
  done()
})

// 创建监听任务
gulp.task(‘watch‘, function(done) {
  gulp.watch("./css/*.css", gulp.parallel(‘css‘));
  gulp.watch("./*.html", gulp.parallel(‘html‘));
  done()
})

// 创建connect.server服务
gulp.task(‘connect‘, function(done) {
  connect.server({
    livereload: true
  })
  done()
})

//gulp不能同时执行两个任务，所以这里加到默认任务里面
gulp.task(‘default‘, gulp.series(‘connect‘, ‘watch‘, done => done()))


PS：一定要记得加上done参数和后面的done()执行，不然会导致后面的任务堵塞(“任务堵塞” —— 自己起的名字,个人理解是：如果不加上，每个任务在执行结束后不会主动告诉gulp当前任务执行结束了，
可以去执行后续的任务了，这样就会造成后续的任务得不到执行，服务一直卡在那里，因为当前任务一直处于starting状态)

　　4、完成后，执行gulp即可实现一键启动项目和浏览器热加载，告别F5