Question

我正在努力让BrowserSync适用于已经存在的现有项目。我只需要修复CSS（很多）所以我不想建立一个完整的本地环境。

最初我以为我可以在远程服务器上设置一个参数来加载来自http://localhost:3000/my.css的CSS但不支持Live Reload。

然后我刚刚保存了设置了<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']);

}());

Answer 1

我最终使用了文件上传和上面的proxy solution。现在可以无缝地工作了。

BrowserSync使用<baseurl> set进行实时重新加载

1 个答案: