How can i make browsersync work with my gulp4 config?

Question

I'm trying to include browsersync functionality to my existing gulpfile.js, but i cannot make it work. Browsed too many gulpfile.js examples now i got more confused. I'm new to gulp and can't find my way around. Any help appreciated.

This is my gulpfile.js:

import gulp from 'gulp' //import browserSync from 'browser-sync' import imagemin from 'gulp-imagemin' import fileinclude from 'gulp-file-include' import dartSass from 'sass' import gulpSass from 'gulp-sass' const sass = gulpSass(dartSass) const browserSync = require('browser-sync').create(); function browsersync() { browserSync.init({ server: { baseDir: 'dist/', }, ghostMode: { clicks: false }, notify: false, online: true, }) } // Optimize images gulp.task('imagemin', async () => { gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/assets/img')) }) // File includes gulp.task('fileinclude', async () => { gulp.src(['src/views/**/*.html', '!src/views/**/_*.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); }); // Compile Sass gulp.task('sass', async () => { gulp.src('src/sass/**/*.scss', { sourcemaps: true }) .pipe(sass.sync().on('error', sass.logError)) // scss to css .pipe(gulp.dest('dist/assets/css', { sourcemaps: '../sourcemaps/' })) .pipe(browserSync.stream()) }) // Test gulp.task('default', async () => { return console.log('Gulp is running...') }) // GULP WATCH gulp.task('watch', async () => { gulp.watch('src/sass/**/*.scss', gulp.series('sass')) gulp.watch('src/views/**/*.html', gulp.series('fileinclude')).on('change', browserSync.reload) //gulp.watch('src/images/*', ['imagemin']) })

megavolkan · Accepted Answer · 2022-12-16 13:37:39Z

Nevermind, i have found the solution:

const { src, dest, watch, series } = require('gulp') const cssnano = require('cssnano') const sass = require('gulp-sass')(require('sass')) const postcss = require('gulp-postcss') const terser = require('gulp-terser') const fileinclude = require('gulp-file-include') const browsersync = require('browser-sync').create() // File Includes function fileincludeTask() { return src(['src/views/**/*.html', '!src/views/**/_*.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(dest('dist')) } // Sass Task function scssTask() { return src('src/sass/styles.scss', { sourcemaps: true }) .pipe(sass()) .pipe(postcss([cssnano()])) .pipe(dest('dist/assets/styles', { sourcemaps: '.' })) } // Javascript Task function jsTask() { return src('src/js/script.js', { sourcemaps: true }) .pipe(terser()) .pipe(dest('dist/assets/scripts', { sourcemaps: '.' })) } // Browsersync Tasks function browsersyncServe(done) { browsersync.init({ server: { baseDir: 'dist' } }) done() } function browsersyncReload(done) { browsersync.reload() done() } // Watch Task function watchTask() { watch('dist/*.html', browsersyncReload) watch(['src/sass/**/*.scss', 'src/js/**/*.js', 'src/views/**/*.html', '!src/views/**/_*.html'], series(scssTask, jsTask, fileincludeTask, browsersyncReload)) } // Default Gulp Task exports.default = series( scssTask, jsTask, fileincludeTask, browsersyncServe, watchTask )

Collectives™ on Stack Overflow

How can i make browsersync work with my gulp4 config?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related