Конфигурация gulp для синхронизации с браузером

Я пытаюсь улучшить конфигурацию Gulp, чтобы включить синхронизацию с браузером. В настоящее время я использую MAMP Pro, используя local.domain.com для каждого сайта, над которым я работаю (сайты WordPress).

Я хотел бы, чтобы browser-sync работал с этой текущей настройкой (наблюдает за моими файлами SASS и минимизирует CSS при использовании часов).

Кажется, я не могу понять, как заставить синхронизацию браузера работать с использованием домена в моей настройке MAMP Pro.

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var uglifycss = require('gulp-uglifycss');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('lib/themes/domain/styles/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('lib/themes/domain/'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});





gulp.task('uglify', function () {
  gulp.src('lib/themes/domain/style.css')
    .pipe(uglifycss({
      "max-line-len": 80
    }))
    .pipe(gulp.dest('lib/themes/domain/'));
});




// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'sass', 'scripts', 'uglify']);
    gulp.watch('lib/themes/domain/styles/*/*.scss', ['sass']);
    gulp.watch('lib/themes/domain/styles/*.scss', ['sass']);
    gulp.watch('lib/themes/domain/style.css', ['uglify']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'uglify', 'scripts', 'watch']);

gulp browser-sync mamp-pro
person Community    schedule 25.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не буду писать код за вас, вместо этого я покажу вам, как мне нравится это делать. Я запускаю синхронизацию браузера в отдельной задаче, просто наблюдаю за изменениями в ваших файлах сборки.

var browserSync = require('browser-sync').create();
var urlPath = "your-url.com";

gulp.task('browser-sync', function (cb) {
    browserSync.init({
        proxy: urlPath,
    }, function() {
        gulp.watch("Views/**/*.cshtml").on("change", browserSync.reload);
        gulp.watch('Assets/build/scripts/**/*.js').on('change', browserSync.reload);
        gulp.watch('Assets/build/styles/**/*.css').on('change', function () {
            gulp.src('Assets/build/styles/**/*.css')
            .pipe(browserSync.stream());
        });  
        cb();
    });
});

person Alex    schedule 25.03.2016
comment
Благодарю вас! Я поэкспериментирую с этим в течение следующих получаса и дам вам знать, как у меня дела :) - person ; 25.03.2016
comment
Спасибо за вашу помощь - кажется, это отлично работает для меня! Мне пришлось немного подправить его, чтобы заставить его искать изменения sass, минимизировать, а затем перезагружать страницу, но кажется, пока он работает правильно! БЛАГОДАРНОСТЬ! Есть ли способ изменить URL-адрес с localhost: 3000 на фактический локальный домен, над которым я работаю? - person ; 26.03.2016
comment
Кроме того, я не могу заставить другие локальные устройства в той же сети видеть сайт. есть ли способ сделать это или я что-то упустил? * РЕДАКТИРОВАТЬ, на самом деле я разобрался, я не вводил IP с номером порта. БЛАГОДАРЮ ВАС!!! Я буквально играл с тем, чтобы заставить это работать и выключаться в течение нескольких недель. Я бы добавил +1 к вашему ответу, если бы мог, но у меня еще недостаточно представителей. - person ; 26.03.2016
comment
Но если вы можете посоветовать другой мой вопрос о перезаписи домена, чтобы это был не localhost: 3000, а local.domain.dev, который совпадает с WP Db, это было бы очень удобно. - person ; 26.03.2016
comment
Я рад, что смог тебе помочь. Я работал только с URL-адресами локального хоста, но в соответствии с этой веткой: github.com /BrowserSync/browser-sync/issues/646 Это может работать: открыть: «внешний», хост: «domain.dev», прокси: domain.dev, порт: 8080, - person Alex; 27.03.2016
comment
Спасибо, Алекс, я наткнулся на это сегодня утром. Жаль, что нет способа избавиться от номера порта, но мы не можем получить все сразу! В очередной раз благодарим за помощь. Не уверен, где я ошибался, если честно - person ; 27.03.2016