1

$ npm install browser-sync gulp-sass sass@1.62.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

gulp.task('copyHTML', function(){ 
  return gulp
    .src('src/**/*.html') 
    .pipe(gulp.dest('dist')) 
    .pipe(browserSync.stream()); //更新到瀏覽器
});

gulp.task('sass', function(){
  return gulp
    .src('src/scss/*.*')
    .pipe(sass()
    .on('error',sass.logError))
    .pipe(gulp.dest('dist/css'));
    .pipe(browserSync.stream()); //更新到瀏覽器
});

gulp.task('watch', function(){
  browserSync.init({
    server: { 
      baseDir: 'dist', //指定伺服器的基本目錄
    },
  });
  gulp.watch('src/**/*.html', gulp.series('copyHTML'));
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

1

$ gulp watch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

gulp.task('copyHTML', function(){ 
  return gulp
    .src('src/*.html') 
    .pipe(gulp.dest('dist')) 
    .pipe(browserSync.stream()); 
});

gulp.task('sass', function(){
  return gulp
    .src('src/scss/**/*.*')
    .pipe(
      sass().on('error',sass.logError)
    )
    .pipe(gulp.dest('dist/css'));
    .pipe(browserSync.stream()); 
});

gulp.task('watch', function(){
  browserSync.init({
    server: {
      baseDir: 'dist',
    },
    port: 3000,
    reloadDelay: 0,
    browser: 'google chrome',
    open: true
  });
  gulp.watch('src/*.html', gulp.series('copyHTML'));
  gulp.watch('src/scss/**/*.*', gulp.series('sass'));
});

gulp.task('default', gulp.series('copyHTML','sass','watch'));

1

$ gulp