BrowserSync實時刷新<baseurl>集

Question

我試圖讓BrowserSync爲已有的項目生效。我只需要修復CSS（很多），所以我不想建立一個完整的本地環境。

最初我以爲我可以在遠程服務器上設置一個參數來從http://localhost:3000/my.css加載一個CSS，但不支持Live Reload。

然後我只保存了具有<base href="http://MYSITE/"> -Tag設置的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']); 

}()); 

Answer 1

我結束了使用上面的文件上傳和proxy solution。現在可以無縫工作。