Learn how to use GULP as an automation tool for new frontend projects

Introduction

Creating the Blizzard landing page was useful to implement GULP as a toolkit to automate & enhance your workflow, basically is possible to speed up the development process by including this library in your new projects.

JavaScript flexibility made it possible to automate slow, and repetitive workflows. You can use your JavaScript experience to create tasks in the gulpfile to automate your code based on libraries that you use, for example, SASS.

Learning GULP

• NodeJS and Yarn, are useful tools to implement the GULP library.
• Using the GULP Sass function to get all files from the folder SCSS and compile these files into a minified CSS file. Basically, you can use autoprefixer to create code for the older versions of CSS in case the current browsers do not support it.
• It is possible to concatenate all plugins CSS/JS and minify them automatically.
• Using GULP Watch and BrowserSync you can create a local server that will update automatically whenever happens a change in the code.
• Using Babel to compile modern JS code.

Have a look at how a gulpfile.js would look like

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create(); // create local server
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// Compile Sass Function
function compilaSass(){
    return gulp.src('scss/*.scss') // get all files from folder scss
    .pipe(sass({outputStyle : 'compressed'})) //minified css
    .pipe(autoprefixer({ // create autoprefixer
        overrideBrowserslist: ['last 2 versions'],
        cascade: false,
    })) 
    .pipe(gulp.dest('css/')) // destination folder
    .pipe(browserSync.stream()); // inject css into the page
}
gulp.task('sass', compilaSass); // task (need a name)  default for all execute

// Concat all plugins CSS
function pluginsCSS(){
    return gulp.src('css/lib/*.css')
    .pipe(concat('plugins.css'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.stream())
}
gulp.task('plugincss', pluginsCSS);

// Concat all JS 
function gulpJS(){
    return gulp.src('js/scripts/*.js')
    .pipe(concat('all.js')) // put all files in the scripts folder to one single file
    .pipe(babel({ // compile modern JS
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('js/'))
    .pipe(browserSync.stream()); // inject js into the page
}
gulp.task('allJS', gulpJS);

// Concat all plugins JS
function pluginsJS(){
    return gulp
    .src(['./js/lib/aos.min.js', './js/lib/swiper.min.js']) // name of files
    .pipe(concat('plugins.js')) // all these files will be going into plugins.js
    .pipe(gulp.dest('js/'))
    .pipe(browserSync.stream())
}
gulp.task('pluginjs', pluginsJS);

// Browser Function
function browser(){
    browserSync.init({
        server: {
            baseDir: './'
        }
    })
}
gulp.task('browser-sync', browser);

// Watch Function
function watch(){
    gulp.watch('scss/*.scss', compilaSass); // gulp.series('name-of-task') or use parrallel
    gulp.watch('css/lib/*.css', pluginsCSS);
    gulp.watch('*.html').on('change', browserSync.reload); // refresh html when changes made
    gulp.watch('js/scripts/*.js', gulpJS);
    gulp.watch('js/lib/*.js', pluginsJS);
}
gulp.task('watch', watch);

// Gulp default
gulp.task('default', gulp.parallel('watch', 'browser-sync', 'sass','plugincss', 'allJS', 'pluginjs'));

New Features learned during the development stage

• Dropdown menu using only HTML, CSS, and JS.
• Modal Login.
• Progress Slide Bar Hero for the slideshow.
• Tab pagination using the games card as a filtering feature.

Section Hero

Have a look below in the section hero of the landing page:

Check the resources

🌍 Check the Project online: https://ruivergani.github.io/lp-blizzard/

🌍 GULP Library: https://gulpjs.com/

🌍 SASS Library: https://sass-lang.com/

🌍 SEO Metatags: https://metatags.io/

🌍 AOS Animate: AOS Animate

🌍 Swiper Slide JS: https://swiperjs.com/

Contact me

• E-mail: ruiverganineto@gmail.com
• LinkedIn
• GitHub

1. * Website developed in 2022 for learning and training purposes, by Rui Vergani Neto