Gulp configuration example.md

Gulp Configuration

Packages used

• gulp
• gulp-clean-css
• gulp-htmlmin
• gulp-imagemin
• gulp-rev
• gulp-sass
• gulp-uglify
• gulp-usemin

gulpfile.js:

'use strict';

// Imports
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const del = require('del');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const usemin = require('gulp-usemin');
const rev = require('gulp-rev');
const cleanCss = require('gulp-clean-css');
const htmlmin = require('gulp-htmlmin');

// local variables
const htmlFilesPaterne = './*.html';
const cssFilesPaterne = './css/*.css';
const jsFilesPaterne = './js/*.js';
const imgFilesPaterne = './img/*.{png,jpg,gif}';

function sassTask() {
  return gulp
    .src('./css/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
}

function sassWatchTask() {
  return gulp.watch('./css/*.scss', gulp.series(['sass']));
}

function copyfontsTask() {
  return gulp
    .src('./node_modules/font-awesome/fonts/*.*')
    .pipe(gulp.dest('./dist/fonts').on('error', (err) => console.log(err)));
}

function imageminTask() {
  const options = {
    optimizationLevel: 3,
    progressive: true,
    interlaced: true,
  };

  return gulp
    .src(imgFilesPaterne)
    .pipe(imagemin(options).on('error', (err) => console.log(err)))
    .pipe(gulp.dest('dist/img'));
}

function useminTask() {
  const options = {
    css: [rev],
    html: [() => htmlmin({ collapseWhitespace: true })],
    js: [uglify, rev],
    inlinejs: [uglify],
    inlinecss: [cleanCss, 'concat'],
  };

  return gulp
    .src(htmlFilesPaterne)
    .pipe(usemin(options))
    .pipe(gulp.dest('dist/'));
}

const browserSyncOptions = {
  files: [htmlFilesPaterne, cssFilesPaterne, jsFilesPaterne, imgFilesPaterne],
  server: { baseDir: './' },
};

gulp.task('sass', sassTask);
gulp.task('sass:watch', sassWatchTask);
gulp.task('browser-sync', () => browserSync.init(browserSyncOptions));
gulp.task('default', gulp.parallel(['sass:watch', 'browser-sync']));
gulp.task('clean', () => del(['dist']));
gulp.task('copyfonts', copyfontsTask);
gulp.task('imagemin', imageminTask);
gulp.task('usemin', useminTask);
gulp.task('build', gulp.series(['clean', 'copyfonts', 'imagemin', 'usemin']));