BrowserSync live reload with <baseurl> set

Question

I'm trying to get BrowserSync to work for an existing project that's already live. I only need to fix CSS (a lot) so I don't want to set up a whole local environment.

Initially I thought I can set a parameter on the remote Server to load a CSS from http://localhost:3000/my.css but that doesn't support Live Reload.

Then I just saved the html file that has the <base href="http://MYSITE/">-Tag set, but then BrowserSync won't connect. Without that Tag everything works fine, but all images are missing.

So thought maybe I proxy everything, but then i can't get BrowserSync to show my local changes.

What am I doing wrong? Any Hints?

(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

I ended up using file upload and the proxy solution above. That now works seamlessly.