问使用Gulp BrowserSync渲染PHP文件

EN

// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var flatten = require('gulp-flatten');
var browserSync = require('browser-sync').create();

// Live reload (HTML Only)
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: "app/build/"
    }
  });
  gulp.watch("app/scss/*.scss", ['minify-css']);
});

// Sass Compile
gulp.task('sass', function(){
  return gulp.src('app/src/scss/**/*.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/build/css/'))
    .pipe(browserSync.stream())
});

// Minify CSS after Scss Compile
gulp.task('minify-css', ['sass'], function() {
  return gulp.src('app/build/css/*.css')
    .pipe(gulp.dest('app/build/css/'))
});

// Compress JS
gulp.task('minify-js', ['flatten'], function() {
  return gulp.src('app/src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('app/build/js/'))
});

gulp.task('flatten', function() {
  gulp.src('bower_components/**/')
    .pipe(flatten({ includeParents: [1, 1]}))
    .pipe(gulp.dest('app/build/js/'))
});

gulp.task('watch', ['browser-sync'], function (){
  gulp.watch('app/src/scss/*.scss', ['minify-css']);
  gulp.watch('app/src/js/*.js', ['minify-js', browserSync.reload])
})

gulp.task('default', ['watch']);