2016-04-30 11 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

を変更するためのブラウザ同期オプションのUIオブジェクト。

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

port BrowerSyncの直接のオプションではなく、serverオプションの下のサブオプションです。

2

使用portoptionを使用して、デフォルトのポート

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

サービングポートを変更するportオプションを使用できます。 –

関連する問題