使用Gulp BrowserSync呈现PHP文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (174)

我的gulp文件在这里:

// 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']);
提问于
用户回答回答于
  1. 安装AppServ
  2. 将你的项目放到C:\ AppServ \ www目录
  3. 更改 gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "app/build/" } });gulp.task('browser-sync', function() { browserSync({ proxy: "http://localhost/ PUT HERE NAME OF YOUR PROJECT FOLDER/app/build/%NAME OF YOUR PHP FILE%.php" });
用户回答回答于

尝试添加以下几行:

// Reloads the page  
gulp.task('php', browserSync.reload); 

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

  // Watches for .php file changes 
  gulp.watch("./*.php", ['php']); 
});


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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励