Gulp-livereload, -webserver и -embedlr. Как использовать их вместе?

Question

Я пытаюсь понять, как использовать gulp с этими полезными и популярными плагинами. Вот что у меня есть:

• запущенный сервер go(lang) на локальном хосте:8000
• статические / локальные html-файлы в папке приложения, которые используются сервером для формирования страниц
• файлы scss в том же каталоге, которые преобразуются в css и затем автоматически префиксируются

Вот мой gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    livereload = require('gulp-livereload');

// "./" - it's "app" directory
gulp.task('default', function() {
    return gulp.src('./*.scss')
        .pipe(watch('./*.scss'))
        .pipe(sass())
        .pipe(autoprefixer('> 5%'))
        .pipe(gulp.dest('./'));
});

Итак, что мне нужно:

• смотрите html, css/scss файлы на предмет изменений и перезагружайте на localhost:8000 (открытая вкладка chrome)
• будет здорово, если нет необходимости использовать:
  • LiveRload Chrome плагин
  • рамки экспресс
• перезагрузите html-страницы, если они открываются напрямую, как файл без сервера

Я читал, что этого можно добиться с помощью gulp-embedlr и gulp -webserver. Если да, то как это сделать?

Answer 1

Хорошо, лучшее решение, которое я найду, это использование Gulp + BrowserSync! Это отличное решение.

Вот код моего gulpfile.js:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

gulp.task('browserSync', function() {
    browserSync({
        //logConnections: false,
        //logFileChanges: false,
        notify: false,
        open: false,
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(autoprefixer('> 5%'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./css'))
        .pipe(reload({stream:true}));
});

gulp.task('watch', function() {
    gulp.watch('./css/*.scss', ['sass']);
    gulp.watch('./*.html', reload);
});

gulp.task('default', ['watch', 'sass', 'browserSync']);

Нет смысла объяснять код выше. Просто прочитайте это: http://www.browsersync.io/docs/gulp/