Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp 4 Sass BrowserSync Kickstart Example
// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const sasslint = require('gulp-sass-lint');
const cache = require('gulp-cached');
const notify = require('gulp-notify');
const beeper = require('beeper');
// Compile CSS from Sass.
function buildStyles() {
return src('scss/styles.scss')
.pipe(plumbError()) // Global error handler through all pipes.
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7']))
.pipe(sourcemaps.write())
.pipe(dest('css/'))
.pipe(browsersync.reload({ stream: true }));
}
// Watch changes on all *.scss files, lint them and
// trigger buildStyles() at the end.
function watchFiles() {
watch(
['scss/*.scss', 'scss/**/*.scss'],
{ events: 'all', ignoreInitial: false },
series(sassLint, buildStyles)
);
}
// Init BrowserSync.
function browserSync(done) {
browsersync.init({
proxy: 'blog.localhost', // Change this value to match your local URL.
socket: {
domain: 'localhost:3000'
}
});
done();
}
// Init Sass linter.
function sassLint() {
return src(['scss/*.scss', 'scss/**/*.scss'])
.pipe(cache('sasslint'))
.pipe(sasslint({
configFile: '.sass-lint.yml'
}))
.pipe(sasslint.format())
.pipe(sasslint.failOnError());
}
// Error handler.
function plumbError() {
return plumber({
errorHandler: function(err) {
notify.onError({
templateOptions: {
date: new Date()
},
title: "Gulp error in " + err.plugin,
message: err.formatted
})(err);
beeper();
this.emit('end');
}
})
}
// Export commands.
exports.default = parallel(browserSync, watchFiles); // $ gulp
exports.sass = buildStyles; // $ gulp sass
exports.watch = watchFiles; // $ gulp watch
exports.build = series(buildStyles); // $ gulp build
{
"name": "gulp4_sass_browsersync",
"description": "Gulp 4 Sass BrowserSync Kickstart Example",
"author": {
"name": "Norman Kämper-Leymann",
"mail": "norman.leymann@gmail.com"
},
"repository": {
"type": "git",
"url": "git@gist.github.com:8f6a75e8ad5055276a71d2901813726e.git"
},
"license": "MIT",
"dependencies": {
"autoprefixer": "^9.4.6",
"beeper": "^1.1.1",
"browser-sync": "^2.26.3",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-cached": "^1.1.1",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0",
"gulp-shell": "^0.6.5",
"gulp-sourcemaps": "^2.6.4",
},
"scripts": {
"postinstall": "./node_modules/.bin/gulp build"
}
}
@ivan-vilches

This comment has been minimized.

Copy link

@ivan-vilches ivan-vilches commented Dec 3, 2019

Where do you put the html files? Thanks

@leymannx

This comment has been minimized.

Copy link
Owner Author

@leymannx leymannx commented Dec 3, 2019

@ivan-vilches – What?

@bixgomez

This comment has been minimized.

Copy link

@bixgomez bixgomez commented Apr 29, 2020

Wonderful, thank you for posting this! This came in very handy tonight as I was approaching a brick wall...

@ArtemVPankov

This comment has been minimized.

Copy link

@ArtemVPankov ArtemVPankov commented Nov 10, 2020

Thank U! Insert this <script async="" src="/browser-sync/browser-sync-client.js"></script> before </ body > if this script will not working when u use proxy in browserSync

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment