Gulp browser-sync DAY87

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 就成功啦~~
https://ithelp.ithome.com.tw/upload/images/20201124/20123039oIMxcvacuX.jpg

但 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
会发现网页会自动重新整理

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷/images/emoticon/emoticon41.gif


<<:  [Cmoney 菁英软件工程师战斗营] IOS APP 菜鸟开发笔记(2)

>>:  对象重用(Object reuse)&跨站脚本(Cross-Site Scripting -XSS)&SQL注入(SQL Injection)&会话劫持(Session Hijacking)

【面试】自我介绍要点

个人比较喜欢的流程是: 对方自我介绍、讲一下面试流程 让我自我介绍 ... 有些工程师可能很忙,面试...

Day#14 注册与按钮

前言 注册与登入需要的元素差不多,因此简单带过注册的程序码。 登入 前一天在输入栏位的部分,使用了t...

Day27 - 区块链社会学读後感(下) 价值、治理

继上篇主要以区块链三个特徵叙写,下篇笔者将探讨区块链的价值、治理,这篇会是比较实用一点的生活应用面向...

[DAY 12]让BOT 24小时在线(3/3)

今天分享程序码从github更新到replit的步骤还有要注意的点 步骤 replit有自带储存环境...

【Day7】ERP核心模组篇-Purchase

#odoo #开源系统 #数位赋能 #E化自主 昨天我们讨论了销售模组的运作,我们接下来进入到采购模...