Skip to content

Instantly share code, notes, and snippets.

@Jatin-8898
Last active June 20, 2019 07:33
Show Gist options
  • Save Jatin-8898/1d3162cac8e39479244c6cf7a19cfafd to your computer and use it in GitHub Desktop.
Save Jatin-8898/1d3162cac8e39479244c6cf7a19cfafd to your computer and use it in GitHub Desktop.
Simple way to create the gulp file using the version 4.0.0
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
sourcemaps = require("gulp-sourcemaps"),
browserSync = require("browser-sync").create();
var paths = {
styles: {
// By using styles/**/*.sass we're telling gulp to check all folders for any sass file
src: "src/scss/*.scss",
// Compiled files will end up in whichever folder it's found in (partials are not compiled)
dest: "src/css"
}
// Easily add additional paths
// ,html: {
// src: '...',
// dest: '...'
// }
};
function style() {
return gulp
.src(paths.styles.src)
// Initialize sourcemaps before compilation starts
.pipe(sourcemaps.init())
.pipe(sass())
.on("error", sass.logError)
// Use postcss with autoprefixer and compress the compiled file using cssnano
.pipe(postcss([autoprefixer(), cssnano()]))
// Now add/write the sourcemaps
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.styles.dest))
// Add browsersync stream pipe after compilation
.pipe(browserSync.stream());
}
// A simple task to reload the page
function reload() {
browserSync.reload();
}
// Add browsersync initialization at the start of the watch task
function watch() {
browserSync.init({
// You can tell browserSync to use this directory and serve it as a mini-server
server: {
baseDir: "./src"
}
// If you are already serving your website locally using something like apache
// You can use the proxy setting to proxy that instead
// proxy: "yourlocal.dev"
});
gulp.watch(paths.styles.src, style);
// We should tell gulp which files to watch to trigger the reload
// This can be html or whatever you're using to develop your website
// Note -- you can obviously add the path to the Paths object
//gulp.watch("src/*.html", reload);
gulp.watch("src/*.html").on('change', browserSync.reload);
}
// We don't have to expose the reload function
// It's currently only useful in other functions
// Don't forget to expose the task!
exports.watch = watch
// Expose the task by exporting it
// This allows you to run it from the commandline using
// $ gulp style
exports.style = style;
/*
* Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
*/
var build = gulp.parallel(style, watch);
/*
* You can still use `gulp.task` to expose tasks
*/
//gulp.task('build', build);
/*
* Define default task that can be called by just running `gulp` from cli
*/
gulp.task('default', build);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment