认识一下 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 serverbinggo搞定
未完待续~~
