SASS + CSS Injecting with Gulp and BrowserSync

Question

Просто начинайте работу с BrowserSync, и у меня есть вопрос относительно общих вариантов использования для настройки SSS + CSS.

То, что я немного смущен, это погода, я могу дать server свое собственное имя.

В документах here используются "./app". Могу ли я использовать другое имя, например "./site", или мне разрешено использовать только "./app"?

Вот код

// task 
gulp.task('serve',['sass'], function(){ 

    // static server 
    browserSync.init({ 
     server: "./app" 
    }); 

    // watching html and scss files for changes then reloading browser 
    gulp.watch("app/scss/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload); 

}); 

Answer 1

ОБНОВЛЕНО

Если вы хотите, чтобы настроить browserSync как статический сервер с живой перезагрузки вы в значительной степени прямо с вашим подходом. Вы можете указать браузеры в любую папку в вашем репозитории, используя опцию baseDir. Вы также можете использовать несколько каталогов. Для получения дополнительной информации ознакомьтесь с опциями documentation.

Первый. Я бы хотел разделить задачи, которые у вас есть.

Лично я бы предпочел, чтобы моя задача сервера была чем-то вроде;

gulp.task('serve', ['build'], function(event) { 
    var server = browsersync.create(); 
    server.init({ 
    baseDir: 'app/' 
    }); 
    return server.watch('app/**', function(evt, file) { 
    server.reload(); 
    }); 
}); 

Отметьте как build является зависимостью. Это гарантирует, что все наши обслуживаемые файлы будут установлены, когда мы начнем BrowserSync.

Сохраняя его общий, мы можем разделить задачи, связанные с SCSS, на свои собственные задачи, такие как scss:compile и scss:watch.

gulp.task('scss:compile', function(){ 
    return gulp.src('src/scss/**/*.scss') 
     .pipe(plumber()) 
     .pipe(scss()) 
     .pipe(gulp.dest('app/css/'); 
}); 

и

gulp.task('scss:watch', function() { 
    gulp.watch('src/scss/**/*.scss', ['scss:compile']); 
}); 

Для инъекций CSS. Для этого есть два варианта:

Помните, что впрыск отличается от перезарядки. Если перезагрузка сбросит состояние страницы, инъекция не повлияет на текущее состояние страницы и просто введет стили.

Первый вариант заключается в том, чтобы вызывать browsersync.stream() с конвейерным контентом вашей компиляции SASS следующим образом;

gulp.task('scss:compile', function() { 
    return gulp.src('src/scss/**/*.scss') 
    .pipe(plumber()) 
    .pipe(scss()) 
    .pipe(gulp.dest('app/css') 
    .pipe(browsersync.stream()); 
}); 

Обратите внимание, что последняя труба вносит изменения. Это также требует проверки типа файла в часах BrowserSync только для перезагрузки при изменении файла без CSS.

Эта опция в порядке. Тем не менее, я думаю, что не совсем ясно, что он просто в комплекте в конце и отдельно от кода настройки BrowserSync.

Второй вариант (лично предпочел), чтобы наблюдать за изменениями с BrowserSync и, если CSS файл изменения, используйте vinyl для потоковой передачи этих изменений в BrowserSync.

Что-то вроде следующего имеет тенденцию работать;

var gulp  = require('gulp'), 
    browsersync = require('browser-sync'), 
    vss   = require('vinyl-source-stream'), 
    vb   = require('vinyl-buffer'), 
    vf   = require('vinyl-file'); 

gulp.task('serve', ['build'], function() { 
    var server = browsersync.create(); 
    server.init({ baseDir: 'app/' }); 
    return server.watch('app/**', function(evt, file) { 
    if (evt === 'change' && file.indexOf('.css') === -1) 
     server.reload(); 
    if (evt === 'change' && file.indexOf('.css') !== -1) 
     vf.readSync(file) 
     .pipe(vss(file)) 
     .pipe(vb()) 
     .pipe(server.stream()); 
    }); 
}); 

Надеюсь, что это поможет!