Gulp 第二篇 browserSync本地服务器搭建和热更新

最新推荐文章于 2022-07-30 11:53:18 发布

weixin_34362991

最新推荐文章于 2022-07-30 11:53:18 发布

阅读量302

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000014513576

版权

认识一下 Browsersync

Browsersync

全局安装

$ npm install -g browser-sync

本地安装

$ npm install -D browser-sync

首先简单的启动一个服务器

// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        port: 3033
    })
});

启动

$ gulp browserSync

// 然后浏览器自动打开，localhost:3033
// 但是发现啥也没有，一直在转

在目录下创建一个index.html

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    Hello Gulp
</body>
</html>

// 这样就能看到是显示了Hello gulp

加入我们要对sass文件进行编译输出，并且我们需要它实时更新

// gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;

// 静态服务器 + 监听css文件
gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        port: 3033
    });
    // 监听某一个文件夹下的所有scss文件，执行sass任务
    gulp.watch('./src/css/*.scss', ['sass']);
});

// 编译sass的任务
gulp.task('sass', function() {
    return gulp.src('./src/css/index.scss') // 源文件
            .pipe(sass()) // 执行方法
            .pipe(gulp.dest('./build/css')) // 输出
            .pipe(reload({stream: true})) // 当scss文件更新后触发页面更新
})

运行

$ gulp server

binggo搞定

未完待续~~

weixin_34362991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Gulp 第二篇 browserSync本地服务器搭建和热更新

认识一下 BrowsersyncBrowsersync全局安装$ npm install -g browser-sync本地安装$ npm install -D browser-sync首先简单的启动一个服务器// gulpfile.jsvar gulp = require('gulp');var browserSync...
复制链接

扫一扫

Gulp 第二篇 browserSync本地服务器搭建和热更新

“相关推荐”对你有帮助么？