Gulp 第二篇 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搞定

未完待续~~

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

Meils

引用和评论

微信小程序知识点总结（一）