1

我已经使用 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 时，出现以下错误：

任务“浏览器同步”不在您的 gulpfile 中请检查文档以了解正确的 gulpfile 格式

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

关于如何重新格式化我的代码以使其工作的任何建议。

谢谢

更新 - 好的，我已经设法使用以下 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 开发的已知问题吗？

担

4

0 回答 0