Gulp开发服务器

一、安装browser-sync

yarn add browser-sync --dev

二、创建服务器

const browserSync = require("browser-sync")
const bs = browserSync.create() // 创建一个开发服务器

三、启动服务器

// 启动服务
const serve = () => {
    bs.init({ // 初始化服务器
        server:{
            baseDir:"dist" // 网站根目录
        }
    })
}

module.exports = {
	serve
}

运行yarn gulp serve，运行成功会打开浏览器进入到dist目录下的index.html页面

四、了解一些服务器配置以及热更新

bs.init({ // 初始化服务器
        notify: false,// 是否显示 右上角browser-sync是否连接服务的提示
        port:2080,// 端口号
        // open:false,// 是否自动打开浏览器
        files:"dist/**",// 指定dist下面的所有文件发生变化后更新网站内容（只是监听dist目录下）
        server:{
            baseDir:"dist", /* 网站根目录 */
            routes: { // routes里面的配置会优先于baseDir
                "/node_modules": "node_modules" // 对于'/node_modules'开头的文件指到同一个目录下，但似乎没有效果
            }
        }
    })

通过配置files可以在修改dist目录下的文件后实现网站热更新
而我们一般不会去dist目录下修改，所以我们用到了gulp的watch方法

const { watch } = require("gulp")
const serve = () => {
    // 通过watch方法监听文件变化，执行任务
    // 第一个参数是监听的文件，可以使用通配符的方式
    // 第二个参数是执行的任务名
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    watch('src/assets/images/**', image)
    watch('src/assets/fonts/**', font)
    watch('public/**', extra)

    bs.init({...})
}

这样就能在修改src目录下的文件后，重新构建dist目录中的文件，再被监听到，从而实现网站热更新。
但这还是有一些缺陷，例如图片、字体、以及public中的文件改变后也重新构建，在开发阶段是多余的开销，只需要在上线之前去构建一下就好。
可以做出如下优化：

bs.init({ // 初始化服务器
        server:{
            baseDir:["dist", "src", "public"],
        }
    })

将baseDir配置成这样的意思是，网站发起请求时会先到dist中查找文件，找不到再去src目录中找，再找不到就去public中找，这样不去构建images、fonts、public也不会有什么影响。

执行serve任务之前最好先构建一次

// compile中并行了执行样式转换、js转换、html转换
const compile = parallel(style, script, page)
// develop按顺序执行compile、serve
const develop = series(compile, serve)
module.exports = {
	develop
}

运行yarn gulp develop
就会先构建一次html、js、css，再启动服务器

因为我们取消了监听图片、字体和一些其他文件的监听以及构建，所以我们要用其他的办法在这些文件发生变化时更新网站。

const serve = () => {
    // 通过watch方法监听文件变化，执行任务
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload) // browserSync提供了一个reload方法，用于刷新浏览器
    /* 在这些文件改变后，刷新浏览器，浏览器重新请求文件，就会请求到改变后的文件了 */

    bs.init({...})

还有一种实现热更新的方式
也是利用了reload方法

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' })
            .pipe(plugins.sass({outputStyle: "expanded"}))
            .pipe(dest('dist'))
            .pipe(bs.reload({ stream: true}))
}
// 此时配置当中的files就不需要了
const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script) // script和page也需要加上 .pipe(bs.reloas({ stream: true }))
    watch('src/*.html', page)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)
    
	bs.init({ // 初始化服务器
        port:2080,
        server:{
            baseDir:["dist", "src", "public"],
            routes: {
                "/node_modules": "node_modules" 
            }
        }
    })
 }