Skip to content

Instantly share code, notes, and snippets.

@notrealdev
Forked from anvit/new-gulpfile.js
Created December 22, 2022 07:01
Show Gist options
  • Save notrealdev/e3248bf797b6560293f01c0267050f33 to your computer and use it in GitHub Desktop.
Save notrealdev/e3248bf797b6560293f01c0267050f33 to your computer and use it in GitHub Desktop.
Gulpfile with module style imports
import gulp from 'gulp'; // Load Gulp!
import terser from 'gulp-terser'; //to uglify the code
import rename from 'gulp-rename'; // to rename
import eslint from 'gulp-eslint'; // chescks for lynt warnings and errors
import browserSync from 'browser-sync';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoPrefixer from 'gulp-autoprefixer'; //older version support
import cssnano from 'gulp-cssnano'; //minify the css
import prettyError from 'gulp-prettyerror'; // looks for errors before compiling
import imagemin from 'gulp-imagemin'; //compresses images
const sass = gulpSass(dartSass);
export const image = function() {
return gulp
.src('./assets/images/*')
.pipe(
imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 5,
svgoPlugins: [
{
removeViewBox: true
}
]
})
)
.pipe(gulp.dest('./build/images'));
}
export const sassCompile = function() {
return gulp
.src('./sass/style.scss') // source path
.pipe(prettyError()) // ADD THIS LINE
.pipe(sass()) //runs compiler
.pipe(autoPrefixer({})) //support for older versions
.pipe(cssnano()) //minify the code
.pipe(rename('style.min.css')) //renames the file
.pipe(gulp.dest('./build/css')); //destination folder
}
export const scripts = function() {
return gulp
.src('./js/*.js') // What files do we want gulp to consume?
.pipe(lint())
.pipe(terser()) // Call the terser function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')); // Where do we put the result?
}
export const lint = function() {
return (
gulp
.src(['./js/*.js'])
// eslint() attaches the lint output to the 'eslint' property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError())
);
}
export const watch = function() {
gulp.watch('./js/*.js', gulp.series(scripts, reload));
gulp.watch('./sass/*.scss', gulp.series(sassCompile, reload));
gulp.watch('./*.html', gulp.series(reload));
gulp.watch('./assets/images/*', gulp.series(reload));
} //watches the files for changes
export const sync = function() {
browserSync.init({
server: { baseDir: './' }
});
} //syncs with browser
export const reload = function(done) {
browserSync.reload();
done();
} // reload function
export const build = gulp.series(sassCompile, image, scripts);
const start = gulp.parallel(build, watch, sync);
export default start;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment