browser-sync
由於我们现在浏览网页 是 file的路径
这样不太好
所以我们可以使用 browser-sync 解决此问题
https://browsersync.io/docs/gulp
npm install browser-sync
载入
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
// default 也要补上
gulp.task('default',['jade','sass','babel','vendorJS','browser-sync','watch']);
输入 gulp 就成功啦~~
但 browser-sync 还有一个功能
(自动重新整理)
可於 jade , sass , babel 加上
.pipe(browserSync.stream())
加上结果
// jade
gulp.task('jade', function() {
gulp.src('./source/**/*.jade')
.pipe($.plumber())
.pipe($.jade({
pretty: true
}))
.pipe(gulp.dest('./public/'))
.pipe(browserSync.stream())
});
// sass
gulp.task('sass', function () {
return gulp.src('./source/scss/**/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.postcss([autoprefixer()]))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./public/css'))
.pipe(browserSync.stream())
});
// babel
gulp.task('babel', () =>
gulp.src('./source/js/**/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel({
presets: ['@babel/env']
}))
.pipe($.concat('all.js'))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./public/js'))
.pipe(browserSync.stream())
);
可尝试修改 all.scss
会发现网页会自动重新整理
那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷
<<: [Cmoney 菁英软件工程师战斗营] IOS APP 菜鸟开发笔记(2)
>>: 对象重用(Object reuse)&跨站脚本(Cross-Site Scripting -XSS)&SQL注入(SQL Injection)&会话劫持(Session Hijacking)
个人比较喜欢的流程是: 对方自我介绍、讲一下面试流程 让我自我介绍 ... 有些工程师可能很忙,面试...
前言 注册与登入需要的元素差不多,因此简单带过注册的程序码。 登入 前一天在输入栏位的部分,使用了t...
继上篇主要以区块链三个特徵叙写,下篇笔者将探讨区块链的价值、治理,这篇会是比较实用一点的生活应用面向...
今天分享程序码从github更新到replit的步骤还有要注意的点 步骤 replit有自带储存环境...
#odoo #开源系统 #数位赋能 #E化自主 昨天我们讨论了销售模组的运作,我们接下来进入到采购模...