2016-04-30 129 views
3

我想嘗試使用gulp,我已經做了一個類似於這個簡單的項目example
我想要做的是服務項目使用不同的端口,我試過按照這個costum-port example瀏覽器同步服務命令與不同的端口

和我gulpfile.js看起來是這樣的:

var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var livereload = require('gulp-livereload'); 
var reload = browserSync.reload; 

// watch files for changes and reload 
gulp.task('serve', function() { 
    livereload.listen(1234); 

    browserSync({ 
    server: { 
     baseDir: 'app', 
    } 
    }); 

    gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload); 
}); 

我也嘗試添加端口server :{porrt : 9999, baseDir:'app'} 但結果卻落得這是3000

012的默認端口

是否可以更改端口?謝謝。瀏覽器的同步選項的

+0

爲什麼你同時使用'browser-sync'和'gulp-livereload'? – qtuan

+0

嗯這裏還是新的,我以爲'gulp-livereload'會改變端口嗎?所以我使用它。 –

+2

你的意思是BrowserSync不同的端口 – BenRacicot

回答

6

使用portoption

browserSync({ 
    port: 9999, 
    server: { 
     baseDir: 'app', 
    } 
    }); 

port是BrowerSync的直接選擇,而不是下server選項子選項。

2

使用ui對象改變默認端口

var gulp = require('gulp'); 
 
var browserSync = require('browser-sync'); 
 
var livereload = require('gulp-livereload'); 
 
var reload = browserSync.reload; 
 

 
// watch files for changes and reload 
 
gulp.task('serve', function() { 
 
    livereload.listen(1234); 
 

 
    browserSync({ 
 
    server: { 
 
     baseDir: 'app', 
 
    }, 
 
    port: 8080 
 
    }); 
 

 
    gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload); 
 
});

+0

它只更改browserSync的UI的端口,我想要的是在瀏覽器中服務時的本地端口 –

+0

您可以使用更改服務端口的端口選項。 –