码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-14 13:20:33      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:init   服务   script   ini   install   引入   java   var   done   

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

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

标签:init   服务   script   ini   install   引入   java   var   done   

原文地址:https://www.cnblogs.com/huodixveye/p/13298408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!