var {src, dest, watch} = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); // Static server function bs() { serveSass(); browserSync.init({ server: { baseDir: "./" } }); watch("./*.html").on('change', browserSync.reload); watch("./scss/**/*.scss", serveSass); watch("./js/*.js").on('change', browserSync.reload); }; // Compile sass into CSS & auto-inject into browsers function serveSass() { return src("./scss/*.scss") .pipe(sass()) .pipe(dest("./css")) .pipe(browserSync.stream()); }; exports.serve = bs;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter