(39) gulp开发服务器

一、Gulp构建任务流程图

将dist目标目录文件发布到浏览器上。

三、Gulp开发服务器所需要的插件

https://browsersync.io/插件官网：https://browsersync.io/ 

四、Gulp开发服务器示例

1.安装发布web服务的插件

淘宝镜像安装命令：cnpm i browser-sync -D 淘宝镜像会比较快

2.导入服务插件和创建服务

注意：这个插件和以前的插件不一样，它需要导入后，然后创建一个服务。

//导入服务插件
const browserSync = require('browser-sync')
//创建服务
const bs = browserSync.create()

3.再gulpfile.js文件中创建任务

注意：baseDir表示基本目录的意思，也就是说我们指定服务启动的目录为目标目录，目标目录是当前项目下的dist目录。

//声明服务发布任务
const serve = () => {
  bs.init({
    server: {
      baseDir: './dist' //指定服务启动的目录
    }
  })
}

4.启动服务命令：gulp serve任务名 

5.当自动弹出一个带有端口号的网页，我们就成功啦！

6.关闭浏览器右上角的通知弹窗

注：我们每次启动服务后，都会再浏览器的右侧弹出一个通知弹框，或者我们每次刷新浏览器的时候都会弹出一个这样的通知弹窗，那么我们嫌烦，不想让他再弹出来了，我们怎么弄呢？

禁止通知弹窗弹出方法：

//声明服务发布任务
const serve = () => {
  bs.init({
    notify: false, //将浏览器右上角的弹窗去除
    server: {
      baseDir: './dist' //指定服务启动的目录
    }
  })
}

7.任务组合写法补充

//声明服务发布任务
const serve = () => {
  bs.init({
    notify: false, //将浏览器右上角的弹窗去除
    server: {
      baseDir: './dist' //指定服务启动的目录
    }
  })
}
//任务组合写法，并行（一起执行）
const bulid = parallel(style,script,html,image)
//任务组合写法，串行（一个接一个的执行）
const dev = series(clean,bulid,serve)
//导出
module.exports = {
  bulid,
  dev
}

补充说明

注意：如果我们的src开发目录下，html文件中有样式代码和js代码，我们应该把他剪切，粘贴到外部文件中，这样我们的html结构会变的更少，看起来会更加友好。html文件只有html标签结构，css只有css代码，js只有js代码，这样是最好的，也是我们后期容易维护的代码。

注意：并且我们书写好外部文件的css和js后，要在html引入时需要手动改成.min.css或者.min.js后缀结尾的压缩文件，否则我们发布服务后，无法看到效果，因为再目标文件中html文件引入并没有帮我们更改引入路径的文件名，需要我们手动去加上.min哦！！！这一点需要特别注意！！！