как добавить браузер-синхронизацию в gulp-4 - PullRequest
Новая
       45

как добавить браузер-синхронизацию в gulp-4

0 голосов
/ 07 июня 2019

// Импорт файлов gulp в переменные 

    const { src , dest , watch , series , parallel } = require('gulp');
    const autoprefixer = require('autoprefixer');
    const cssnano = require('cssnano');
    const concat = require('gulp-concat');
    const postcss = require('gulp-postcss');
    const replace = require('gulp-replace');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const uglify = require('gulp-uglify');
    const browserSync = require ('browser-sync').create();

// Переменные пути к файлу в папке моих проектов 

    const files = {
    scsspath:'assets/scss/**/*.scss' , 
    jspath:'assets/js/**/*.js'}

// Sass Task 

    function scssTask(){
    return src(files.scsspath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('assets/css'))
    .pipe(browsersync.stream());}

// JsTask 

    function jsTask(){
    return src(files.jspath)
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(dest('assets/js')).pipe(browsersync.stream());}

// WatchTask 

   function watchTask(){
   watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}

// DefaultTask // Я не знаю, как использовать синхронизацию браузера в gulp-4 

   exports.default = series(parallel(scssTask,jsTask) , cashBustTask , 
   watchTask,browsersync);

Ответы [ 2 ]

0 голосов
/ 23 июля 2019

Быстрое решение:

Добавить функцию для запуска BrowserSync: 

function reload(){
    browserSync.reload();
}

Измените вашу watchTask() функцию на: 

function watchTask(){
    browserSync.init({
        server: { baseDir: "./dist" }
    });
    gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}

Измените ваш exports на: 

exports.default = watchTask;
0 голосов
/ 10 июня 2019

Создайте отдельную задачу для синхронизации с браузером.Вот пример того, как я настроил это: 

const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');

function browserSync() {
  // Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
  serveSass();

  bs.init({
    // Dev server will run at localhost:8080
    port: 8080,
    server: {
      // I'm using 'src' as my base directory
      baseDir: 'src',
    },
  });

  // These watch for changes to files and reload in the browser
  watch('src/*.html').on('change', bs.reload);
  watch('src/scss/*.scss', serveSass);
  watch('src/js/*.js').on('change', bs.reload);
}

// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
  // My dev Sass files are found in 'src/scss/'
  return src('src/scss/*.scss')
    .pipe(sass())
    // My dev CSS files are found in 'src/css/'
    .pipe(dest('src/css))
    .pipe(bs.stream());
}

// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;

Моя полная настройка Gulp здесь , если вы хотите больше контекста.

...