Как настроить Gulp так что б при изменения в sass файле, browsersync автоматически обновлял страницу?

Question

[LastGeneral]

const { src, dest, parallel, watch } = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();

function css() {
return src('src/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(minifyCSS())
.pipe(dest('src/css'))
.pipe(browserSync.stream());
}

function js() {
return src('src/js/*.js')
.pipe(concat('app.min.js'))
.pipe(dest('src/js'))
}

exports.js = js;
exports.css = css;
exports.default = parallel( css, js);

Answer 1

[Alexander]

Нужно прописать watch и browser-sync. Пропишите вот этот код.

function browser () {
   browserSync.init({
      server: {
         baseDir: 'путь к папке проекта'
      },
      notify: false,
   })
}

function watchFiles () {
   watch ('путь к отслеживаемому файлу', css)
}

exports.default = series(
   parallel(css, js),
   series(browser, watchFiles)
)

Comments

[LastGeneral]

const { src, dest, parallel, watch } = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();

function css() {
return src('src/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(minifyCSS())
.pipe(dest('src/css'))
.pipe(browserSync.stream());
}

function js() {
return src('src/js/*.js')
.pipe(concat('app.min.js'))
.pipe(dest('src/js'))
}

function watch() {
gulp.watch(paths.source 'src/sass/styles.sass' ,sass);
}
exports.watch = watch;
exports.js = js;
exports.css = css;
exports.default = parallel( css, js);

[LastGeneral]

Не работает

[Alexander]

LastGeneral, проверьте мой код еще раз.

[LastGeneral]

[LastGeneral]

Ругается и не работает

[Alexander]

LastGeneral, покажите полностью, что он написал

[Alexander]

LastGeneral, в baseDir указывайте просто src

[LastGeneral]

[Alexander]

LastGeneral, exportS

[LastGeneral]

Исправил, все равно не хочет работать

[LastGeneral]

Я с этой проблемой 2 день вожусь

[Alexander]

LastGeneral, покажите полность, что пишется в консоли после команды запуска. На скринах не все отображено.

[LastGeneral]

[Alexander]

LastGeneral, ну теперь все понятно, пропишите series в фигурных скобках, вот тут

const { src, dest, parallel, watch } = require('gulp');

[LastGeneral]

[Alexander]

LastGeneral, где-то упустили закрывающую круглую скобку, внимательно посмотрите в exports

[Alexander]

LastGeneral, замените Ваш exports вот на этот

exports.default = series(
   parallel(css, js),
   series(browser, watchFiles)
)

[LastGeneral]

Ошибку не выдает но, осталась все та же проблема когда произвожу изменения в index.html или styles.sass ничего не происходит браузер не перезапускается

[Alexander]

LastGeneral, если хотите наблюдать за изменениями в sass, тогда пропишите в watch путь к файлу sass в котором ведете работу. Для наблюдения за html пропишите отдельный watch, как для sass.