Làm cách nào để nhận gulp + browsersync để làm việc với apache vhost?

Question

Tôi muốn thêm gulp, sass và browsersync vào bộ công cụ của mình. Tôi hiện đang chạy gulp với tác vụ sass và browsersync được định cấu hình.

Tôi đang bôi một ứng dụng php chạy từ vhost trên máy chủ apache cục bộ của mình.

Tôi đang cố chạy trình duyệt đồng bộ từ nhiệm vụ đồng hồ, bằng cách sử dụng tùy chọn proxy của trình duyệt để sử dụng vhost của tôi.

Hiện tại, khi tôi chạy đồng hồ, không có máy chủ nào có thể được tìm thấy trên cổng 3000. Nếu tôi điều hướng đến 'localhost: 3000' tôi nhận được chromes 'không tìm thấy trang web'.

Nếu tôi hướng đến cổng 3001 tôi có thể truy cập vào giao diện người dùng quản trị browsersync của. Vì vậy, tôi biết rằng browserync đang chạy.

ngụm conf của tôi là như sau

/* load plugins */ 
var gulp = require('gulp'), 
    sass = require('gulp-ruby-sass'), 
    browsersync = require('browser-sync') ; 

/* 
* define tasks 
*/ 

gulp.task('sass', function() { 
    return sass('assets/sass/main.sass') ;   
}) ; 


/* 
* browsersync conf 
*/ 

gulp.task('browser-sync', function() { 
    browsersync({ 
    proxy: 'localhost', 
    port: '3000' 
    }); 
}); 

gulp.task('browsersync-reload', function() { 
    browsersync.reload(); 
}); 

gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch('assets/sass/**/*', ['css']); 
}); 


/* Default task */ 
gulp.task('default', ['sass'], function() { 
    gulp.watch("assets/sass/**.*", ['sass']); 
}); 

Answer 1

BrowserSync "proxy" tùy chọn nên được trỏ đến nơi chủ apache của bạn được phục vụ ứng dụng của bạn, không phải là nơi bạn muốn truy cập nó.

Ví dụ, nếu tôi chạy một máy chủ ruby ​​trên localhost: 9000 Tôi sẽ chỉ rằng trong tùy chọn proxy và truy cập thông qua trình duyệt qua url browsersync chí đầu ra cho tôi qua dòng lệnh

Answer 2

sử dụng này để thay thế, thêm vhost ví dụ mysite.local

sau đó

gulp.task('server', function() { 
 
    browserSync.init({ 
 
     proxy: "mysite.local" 
 
    }); 
 
});

Answer 3

Nếu bạn đã cài đặt apache (mẫu với MAMP), bạn phải cấu hình cổng tại 8080

cấu hình của tôi:

browserSync.init({ 
     open: 'external', 
     host: 'local.dev', 
     proxy: 'local.dev', 
     port: 8080 // for work mamp 
});