2016-06-13 9 views
0

私はBrowserSyncがの既存のプロジェクトが既に稼働している状態で動作させようとしています。私はCSS(たくさん)を修正する必要があるので、私はローカル環境全体を設定したくありません。BrowserSyncライブリロード<baseurl>とセット

最初に、私はリモートサーバ上のパラメータをhttp://localhost:3000/my.cssからCSSをロードするように設定できると思っていましたが、それはライブリロードをサポートしていません。

次に、<base href="http://MYSITE/">タグセットを持つhtmlファイルを保存しましたが、BrowserSyncは接続されません。そのタグがなければ、すべて正常に動作しますが、すべての画像が欠落しています。

多分私はすべてをプロキシと思ったが、私は私のローカル変更を示すためにBrowserSyncを得ることができない。

私は間違っていますか?すべてのヒント?

(function() { 
'use strict'; 

var gulp = require('gulp'); 
var postcss = require('gulp-postcss'); 
var sass = require('gulp-sass'); 
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify'); 
var minifyCss = require('gulp-minify-css'); 
var browserSync = require('browser-sync'); 
var del = require('del'); 
var runSequence = require('run-sequence'); 
var autoprefixer = require('autoprefixer'); 
var mergeRules = require('postcss-merge-rules'); 
var duplicates = require('postcss-discard-duplicates'); 

var jsSrc = ['src/js/*.js']; 

gulp.task('source-js', function() { 
    gulp.src(jsSrc) 
     // non minified version 
     .pipe(gulp.dest('dist')) 
     .pipe(browserSync.stream()) 
     // minified version 
     .pipe(uglify()) 
     .pipe(rename({extname: '.min.js'})) 
     .pipe(gulp.dest('dist')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('source-sass', function() { 
    var processors = [ 
     autoprefixer({ 
      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'ios > 7'] 
     }), 
     mergeRules, 
     duplicates 
    ]; 
    gulp.src('src/sass/**/*.scss') 
     .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
     .pipe(postcss(processors)) 
     // non minified version 
     .pipe(gulp.dest('dist/dist')) 
     .pipe(browserSync.stream()) 
     // minified version 
     .pipe(minifyCss()) 
     .pipe(rename({extname: '.min.css'})) 
     .pipe(gulp.dest('dist/dist')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('images', function() { 
    gulp.src('src/**/*.{jpg,png,gif}') 
     .pipe(gulp.dest('dist')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('html', function() { 
    gulp.src('src/**/*.html') 
     .pipe(gulp.dest('dist')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('clean', del.bind(null, ['dist/*'], {dot: true})); 

gulp.task('serve', ['source-js', 'source-sass', 'html', 'images'], function() { 
    browserSync({ 
     proxy: { 
      target: "http://MYURL/" 
     } 
    }); 

    gulp.watch('src/js/*.js', ['source-js']); 
    gulp.watch('src/**/*.scss', ['source-sass']); 
    gulp.watch('src/**/*.html', ['html']); 
    gulp.watch('src/**/*.{jpg,png,gif}', ['images']); 
}); 

gulp.task('build', function (cb) { 
    runSequence('clean', ['source-js', 'source-sass', 'html', 'images'], cb); 
}); 

gulp.task('default', ['build']); 

}()); 

答えて

0

ファイルアップロードと上記のproxy solutionを使用してしまいました。これでシームレスに動作します。

関連する問題