Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My Gulpfile
{
"presets": [
"@babel/env"
]
}
// custom gulp-starter
// https://github.com/marcop135/gulp-starter
'use strict';
// Initialize modules
//
// Import specific gulp API functions lets us write them below as series()
// instead of gulp.series()
import { src, dest, watch, series, parallel } from 'gulp';
// Import all the Gulp-related packages we want to use
import sass from 'gulp-sass'; // run Sass
import postcss from 'gulp-postcss'; // run PostCSS plugins (see next)
import autoprefixer from 'autoprefixer'; // prefix CSS
import cssnano from 'cssnano'; // minify CSS
import imagemin from 'gulp-imagemin'; // compress images and SVGs
import babel from 'gulp-babel'; // transpile JS
import concat from 'gulp-concat'; // contact JS
import uglify from 'gulp-uglify'; // compress JS
import rename from 'gulp-rename'; // e.g. main.css > main.min.css
import browserSync from 'browser-sync'; // run a local server with hot-reloading
// Setup browser-sync
const server = browserSync.create();
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
server: {
baseDir: './dist',
},
});
done();
}
// File paths to watch
const files = {
// all files in src/ (but folders and htaccess.txt file)
rootFilesPath: 'src/*.*',
// all files/folders in /project
projectFilesPath: 'src/projects/**',
// all files/folders in /fonts
fontFilesPath: 'src/assets/fonts/**/**',
// all .scss files in /scss
scssPath: 'src/assets/scss/**/*.scss',
// all .js files in /js
jsPath: 'src/assets/js/**/*.js',
// all files/folders in /images
imagePath: 'src/assets/images/**/*.*'
};
// File copying/renaming tasks
function copyRootFiles() {
return src([
'src/*.*',
'!' + 'src/htaccess.txt', // exclude htaccess.txt
])
.pipe(dest('dist/'))
}
// htaccess.txt > .htaccess
function renameHtaccess() {
return src('src/htaccess.txt')
.pipe(rename('.htaccess'))
.pipe(dest('dist/'));
}
function copyProjectFiles() {
return src('src/projects/**/**')
.pipe(dest('dist/projects/'));
}
function copyFontFiles() {
return src('src/assets/fonts/**/**')
.pipe(dest('dist/assets/fonts/'));
}
// Sass tasks #1
//
// ! always create a sourcemap for main.min.css
function scssMainTask() {
return (
src(
['./src/assets/scss/main.scss'],
// use gulp in-built sourcemaps
{ sourcemaps: true }
)
.pipe(sass())
.pipe(postcss([autoprefixer()]))
.pipe(dest('dist/assets/css'))
.pipe(postcss([cssnano()]))
.pipe(
rename({
suffix: '.min',
})
)
.pipe(dest('dist/assets/css', {
sourcemaps: '.'
}))
);
}
// Sass tasks #2
//
// ! do not create a sourcemap for 'critical.min.css'
// because the final file will be embedded in the <head>,
// and it won't match the source files
function scssCriticalTask() {
return (
src(['./src/assets/scss/critical.scss'])
.pipe(sass())
.pipe(postcss([autoprefixer()]))
.pipe(dest('dist/assets/css'))
.pipe(postcss([cssnano()]))
.pipe(
rename({
suffix: '.min',
})
)
// put final files in dist folder
.pipe(dest('dist/assets/css'))
);
}
// JS task #1
//
// js/app.min.js
function jsTaskApp() {
return (
src(
[
// list all files to include
'./src/assets/js/vendor/modernizr-custom.js',
'./src/assets/js/darkmode.js',
'./src/assets/js/vendor/polyfills/intersection-observer.js',
'./src/assets/js/vendor/polyfills/classList.js',
'./src/assets/js/vendor/lazyload.js',
'./src/assets/js/vendor/focus-visible.js',
'./src/assets/js/vendor/prism.js',
'./src/assets/js/main.js',
],
{ sourcemaps: true }
)
.pipe(babel())
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(dest('dist/assets/js',
{ sourcemaps: '.' }
))
);
}
// JS task #2
//
// js/vendor/ga.js
function jsTaskGa() {
return src(['./src/assets/js/vendor/ga.js'])
.pipe(uglify())
.pipe(concat('ga.min.js'))
.pipe(dest('dist/assets/js/vendor/'));
}
// JS task #3
//
// js/vendor/iubenda.js
function jsTaskIubenda() {
return src(['./src/assets/js/vendor/iubenda.js'])
.pipe(uglify())
.pipe(concat('iubenda.min.js'))
.pipe(dest('dist/assets/js/vendor'));
}
// JS task #4
//
// js/vendor/tiny-slider.js (+ js/tiny-slider-custom-values)
function jsTaskTinySlider() {
return src(
[
'./src/assets/js/vendor/tiny-slider.js',
'./src/assets/js/tiny-slider-custom-values.js',
],
{ sourcemaps: true }
)
.pipe(uglify())
.pipe(concat('tiny-slider-custom.min.js'))
.pipe(dest('dist/assets/js/vendor', { sourcemaps: '.' }));
}
// Image task
//
// compress PNG, JPEG, GIF and SVG images
function imageTask() {
return src(files.imagePath)
.pipe(imagemin()) // compress everything
.pipe(dest('dist/assets/images'));
}
// Watch task
//
// watch all files for changes
// if any change, run copying/renaming, scss, js and image tasks simultaneously
// then reload via browsersync
function watchTask() {
watch(
[
files.rootFilesPath,
files.projectFilesPath,
files.fontFilesPath,
files.scssPath,
files.jsPath,
files.imagePath,
],
series(
parallel(
// copying/renaming
copyRootFiles,
renameHtaccess,
copyProjectFiles,
copyFontFiles,
// sass
scssMainTask, // 1
scssCriticalTask, // 2
// js
jsTaskApp, // 1
jsTaskGa, // 2
jsTaskIubenda, // 3
jsTaskTinySlider, // 4
// images and svgs
imageTask
),
reload
)
);
}
// Export task
//
// export the default Gulp task so it can be run
// runs all tasks simultaneously
// start local server and watch tasks
export default series(
parallel(
copyRootFiles,
renameHtaccess,
copyProjectFiles,
copyFontFiles,
scssMainTask,
scssCriticalTask,
jsTaskApp,
jsTaskGa,
jsTaskIubenda,
jsTaskGa,
jsTaskTinySlider,
imageTask
),
serve,
watchTask
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.