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 就成功啦~~

但 browser-sync 还有一个功能
(自动重新整理)

可于 jade , sass , babel 加上

  .pipe(browserSync.stream())

加上结果

// jadegulp.task('jade', function() {    gulp.src('./source/**/*.jade')    .pipe($.plumber())    .pipe($.jade({        pretty: true    }))    .pipe(gulp.dest('./public/'))    .pipe(browserSync.stream())});

// sassgulp.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())});

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

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