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搞定
未完待续~~相关推荐
jiangfulai 2020-04-18
chaitong0 2019-07-01
星辰的笔记 2020-07-04
liangjielaoshi 2020-06-11
zhongweinan 2020-06-10
UndefineOrNull 2020-02-29
我有一只小松鼠 2020-02-29
UndefineOrNull 2020-03-01
hlihaihong 2020-02-18
UndefineOrNull 2020-02-12
yinuoqingqin 2020-01-13
星辰的笔记 2020-01-13
UndefineOrNull 2020-01-13
hlihaihong 2020-01-13
kaosini 2020-01-12
hlihaihong 2020-01-12
kaosini 2020-01-12