Перезагрузка BrowserSync в реальном времени с набором ‹baseurl›

Я пытаюсь заставить BrowserSync работать с существующим проектом, который уже запущен. Мне нужно только исправить CSS (много), поэтому я не хочу настраивать всю локальную среду.

Первоначально я думал, что могу установить параметр на удаленном сервере для загрузки CSS из http://localhost:3000/my.css, но он не поддерживает Live Reload.

Затем я просто сохранил html-файл с установленным тегом <base href="http://MYSITE/">, но тогда 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']);

}());

person denns    schedule 13.06.2016    source источник


Ответы (1)


В итоге я использовал загрузку файлов и прокси-решение выше. Это теперь работает без проблем.

person denns    schedule 21.06.2016