3

最近 gulp を使い始めてワークフローがうまくいきましたが、新しいプロジェクトに gulpfile を追加するとgulp、元のプロジェクト ディレクトリから実行するたびに最新のプロジェクトが提供され、自分が何をしたかわかりません。

これは、私の gulpfile の関連コンテンツである必要があります。

var gulp = require('gulp');
/* etc. */ 

gulp.task('default', function(callback) {
  runSequence(['connect-sync'],
    callback
  )
});

gulp.task('connect-sync', function() {
  connect.server({
    base: 'app' /* tried ./app */
  }, function (){
    browserSync({
      injectChanges: true,
      proxy: '127.0.0.1:8000'
    });
  });

  gulp.start('sass');
  gulp.start('watch');

});

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sourcemaps.init())
    .pipe(sass()) // Passes it through a gulp-sass
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app/css')) // Outputs it in the css folder
    .pipe(browserSync.stream({match: '**/*.css'}));
});

// Watchers
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/css/**/*.css', ['css']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/*.php', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('css', function() {
  return gulp.src('app/css/**/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

proxyオプションを次のように変更するproxy: '127.0.0.1:4000と、プロセスは完了せず、停止します。

[14:02:41] Using gulpfile ~/original_project/gulpfile.js
[14:02:41] Starting 'default'...
[14:02:41] Starting 'connect-sync'...
[14:02:41] Starting 'sass'...
[14:02:41] Starting 'watch'...
[14:02:41] Finished 'watch' after 27 ms
[14:02:41] Finished 'connect-sync' after 52 ms
[14:02:41] Finished 'default' after 54 ms
[Tue Apr 12 14:02:42 2016] Failed to listen on 127.0.0.1:8000 (reason: Address already in use)
[Tue Apr 12 14:02:42 2016] 127.0.0.1:53340 [200]: /
[14:02:42] Finished 'sass' after 287 ms
[14:02:42] Starting 'css'...
[BS] [info] Proxying: http://127.0.0.1:4000
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://10.180.90.37:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://10.180.90.37:3001
 -------------------------------------
[BS] 7 files changed (bootstrap.min.css, font-awesome.min.css, main.css, normalize.css, pe-icon-7-stroke.css, responsive.css, style.css)
[14:02:42] Finished 'css' after 568 ms

何かが間違っているかどうかはわかりませんが、文字通り唯一の変更は、別のポートを選択しようとすることです。構成内のポートが使用されている場合、タスクは使用可能なポートを自動的に選択すると思っていましたが、複数のプロジェクトで gulp を使用する方法がわかりません。

ポート 8000 の vhost 設定や、ホスト ファイルに干渉する可能性のあるものがないため、競合が発生することはありません。

BrowsersyncのドキュメントによるとProxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.、既存の設定がどちらのプロジェクトでも機能した理由がわかりません。

アップデート

gulp-connect-php docsをもう一度見て、これを試してみましたが、うまくいくようです：

gulp.task('connect-sync', function() {
  connect.server({
    base: 'app',
    port: 4000
  }, function (){
    browserSync({
      injectChanges: true,
      proxy: '127.0.0.1:4000'
   });
  });

  gulp.start('sass');
  gulp.start('watch');

});

しかし、可能であれば、ポートのハードコーディングを避けたいと思っています。

sass のいずれかを変更すると、単に注入するのではなく、ページを注入してリロードするようになりました。

4

0 に答える 0