Question

我使用Gulp（我是新手）继承了一个静态项目，客户端要求添加服务器端功能。我正在尝试使用php和gulp以及使用浏览器同步进行本地开发。

我已经检查过安装了php，因为gulp-connect-php依赖。这是我的gulpfile.js：

var gulp    = require('gulp');
var connect     = require('gulp-connect-php');
var concat  = require('gulp-concat');
var changed = require('gulp-changed');
var nano    = require('gulp-cssnano');
var browserSync      = require('browser-sync');

gulp.task('default', ['browser-sync']);

gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });

  gulp.watch(["./build/**/*.html","./build/**/*.php", "./build/**/*.js","./build/img/**/*"]).on('change', function () {
    browserSync.reload();
  });
});



gulp.task('watch', ['html-include', 'php', 'css', 'scripts', 'assets', 'fonts'], function() {
    gulp.watch('./source/**/*.html', ['html-include']);
    gulp.watch('./source/**/*.js', ['scripts']);
    gulp.watch('./source/**/*.css', ['css']);
    gulp.watch('./source/img/**/*', ['assets']);
    gulp.watch('./source/fonts/**/*', ['fonts']);
});

gulp.task('html-include', function() {    
    return gulp.src('./source/**/*.html') // Ignores template files
        .pipe(changed('./source/**/*.html'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('php', function() {    
    return gulp.src('./source/**/*.php') // Ignores template files
        .pipe(changed('./source/**/*.php'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
    return gulp.src('./source/js/*.js')
        .pipe(changed('./build/js/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/js/'));
});

gulp.task('assets', function() {
    return gulp.src('./source/img/**/*')
        .pipe(changed('./build/img/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/img'));
});

gulp.task('fonts', function() {
    return gulp.src('./source/fonts/**/*')
        .pipe(changed('./build/fonts/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/fonts'));
});

gulp.task('css', function() {
    return gulp.src('./source/css/*.css')    
        .pipe(concat('cic.min.css'))
        .pipe(nano()) // Only enable for deployment, too slow for development
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream());
});

当我尝试使用此文件运行gulp时，我收到以下错误：

任务'browser-sync'不在您的gulpfile中请检查正确gulpfile格式的文档

正如我所说，我是新手，只想让测试服务器启动并运行本地开发。

有关如何重新格式化代码的任何建议。

由于

更新 - 好的，我已经设法使用以下Gulpfile代码启动并运行服务器：

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var changed     = require('gulp-changed');
var phpConect   = require('gulp-connect-php');
var nano        = require('gulp-cssnano');
var sass        = require('gulp-sass');
var bs          = require('browser-sync');

gulp.task('default', ['browser-sync']);

gulp.task('php', function() {
    phpConect.server({ base: 'build/', port: 8010, keepalive: true});
});

gulp.task('browser-sync', ['php','watch'], function() {
    bs({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
    gulp.watch(["./build/**/*.html","./build/**/*.php","./build/**/*.js","./build/img/**/*"]).on('change', bs.reload);
});

gulp.task('watch', ['html-include', 'php-files', 'sass', 'scripts', 'assets', 'fonts'], function() {
    gulp.watch('./source/**/*.html', ['html-include']);
    gulp.watch('./source/**/*.php', ['php-files']);
    gulp.watch('./source/**/*.js', ['scripts']);
    gulp.watch('./source/**/*.scss', ['sass']);
    gulp.watch('./source/img/**/*', ['assets']);
    gulp.watch('./source/fonts/**/*', ['fonts']);
});

gulp.task('html-include', function() {    
    return gulp.src('./source/**/*.html') // Ignores template files  
        .pipe(changed('./build/**/*'))  
        .pipe(gulp.dest('./build/'));
});

gulp.task('php-files', function() {    
    return gulp.src('./source/**/*.php') // Ignores template files
        .pipe(changed('./build/**/*'))      
        .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
    return gulp.src('./source/js/*.js')
        .pipe(changed('./build/js/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/js/'));
});

gulp.task('assets', function() {
    return gulp.src('./source/img/**/*')
        .pipe(changed('./build/img/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/img'));
});

gulp.task('fonts', function() {
    return gulp.src('./source/fonts/**/*')
        .pipe(changed('./build/fonts/**/*')) // Ignore unchanged files
        .pipe(gulp.dest('./build/fonts'));
});

gulp.task('sass', function() {
    return gulp.src('./source/sass/*.scss') 
        .pipe(sass())
        .pipe(concat('style.min.css'))
        .pipe(nano()) // Only enable for deployment, too slow for development
        .pipe(gulp.dest('./build/css/'))
        .pipe(bs.stream());
});

但现在当我在safai中预览我的文件（并且只有safari）时，视频文件根本没有被提供，即使它们在那里。这是本地环境中php / gulp开发的已知问题吗？

丹

使用Gulp，PHP和浏览器同步设置测试服务器

0 个答案: