Grunt configuration example.md

GRUNT Configuration Example

Packages used

• grunt
• grunt-browser-sync
• grunt-contrib-clean
• grunt-contrib-concat
• grunt-contrib-copy
• grunt-contrib-cssmin
• grunt-contrib-htmlmin
• grunt-contrib-imagemin
• grunt-contrib-uglify
• grunt-contrib-watch
• grunt-filerev
• grunt-sass
• grunt-usemin
• jit-grunt
• time-grunt

Gruntfile.js:

'use strict';

module.exports = function (grunt) {
  const sass = require('node-sass');

  require('time-grunt')(grunt);

  // The useminPrepare Task will be handled by grunt-usemin Plugin
  require('jit-grunt')(grunt, { useminPrepare: 'grunt-usemin' });

  const expand = true;
  const dot = true;
  const dest = 'dist';

  const sassTask = {
    options: {
      implementation: sass,
      sourceMap: true,
    },
    dist: {
      files: {
        'css/styles.css': 'css/styles.scss',
      },
    },
  };

  const browserSyncTask = {
    dev: {
      bsFiles: {
        src: ['*.html', 'css/*.css', 'js/*.js'],
      },
      options: {
        watchTask: true,
        server: {
          baseDir: './',
        },
      },
    },
  };

  const copyTask = {
    html: {
      files: [
        {
          expand,
          dot,
          cwd: './',
          src: ['*.html'],
          dest,
        },
      ],
    },
    fonts: {
      files: [
        {
          expand,
          dot,
          cwd: 'node_modules/font-awesome',
          src: ['fonts/*.*'],
          dest,
        },
      ],
    },
  };

  const imageminTask = {
    dynamic: {
      files: [
        {
          expand,
          dot,
          cwd: './',
          src: ['img/*.{png, jpg, gif}'],
          dest,
        },
      ],
    },
  };

  const useminPrepareTask = {
    html: {
      dest,
      src: ['*.html'],
    },
    options: {
      flow: {
        steps: {
          css: ['cssmin'],
          js: ['uglify'],
        },
      },
    },
  };

  const filerevTask = {
    options: {
      encoding: 'utf8',
      algorithm: 'md5',
      length: 20,
    },
    release: {
      files: [
        {
          src: ['dist/js/*.js', 'dist/css/*.css'],
        },
      ],
    },
  };

  const useminTask = {
    html: ['dist/*.html'],
    options: {
      assetsDirs: ['dist', 'dist/css', 'dist/js'],
    },
  };

  const htmlminTask = {
    dist: {
      options: {
        collapseWhitespace: true,
      },
      files: [
        {
          expand,
          dot,
          cwd: './dist',
          src: ['*.html'],
          dest,
        },
      ],
    },
  };

  grunt.initConfig({
    sass: sassTask,
    browserSync: browserSyncTask,
    watch: { files: 'css/*.scss', tasks: ['sass'] },
    clean: { build: { src: ['dist/'] } },
    copy: copyTask,
    imagemin: imageminTask,
    useminPrepare: useminPrepareTask,
    concat: { options: { separator: ';' }, dist: {} },
    cssmin: {},
    uglify: {},
    filerev: filerevTask,
    usemin: useminTask,
    htmlmin: htmlminTask,
  });

  // Register tasks.
  grunt.registerTask('default', ['browserSync', 'watch']);
  grunt.registerTask('css', ['sass']);
  grunt.registerTask('build', [
    'clean',
    'copy',
    'imagemin',
    'useminPrepare',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin',
  ]);
};