[Tips & Tricks] Example of grunt file

For a long time, I use grunt in my work to automate several processes, such as compile SASS to CSS, merge different images into a sprite, make CSS styles universal for all browsers. In fact, for different projects, I use both grunt and gulp. The reason is simple. Often, I am hired by agencies whose teams have their own standards and tools. In this short article, we will not say which is better. I just want to share the file that I use, maybe it will be useful to someone. I will not describe each line step by step, the purpose of this article is to make a cheat sheet, not a manual.

A package.json file is the best way to manage locally installed npm packages.

Lists the packages that your project depends on
Allows you to specify the versions of a package that your project can use using semantic versioning rules
Makes your build reproducible and therefore much easier to share with other developers

A Gruntfile.js file is used to configure or define tasks and load Grunt plugins.

An easy way to use this.

Put both files, for example, in the directory of your theme
Install project dependencies with npm install.
Run Grunt with grunt.

More detailed documentation on the official website.

Here is also a similar article with an example for gulp.

File

package.json

{
  "name": "EasyDrupal",
  "version": "1.0.0",
  "author": "Ruslan P",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "grunt": "^1.0.1",
    "grunt-contrib-imagemin": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-notify": "^0.4.5",
    "grunt-postcss": "^0.9.0",
    "grunt-spritesmith": "^6.3.1",
    "jit-grunt": "^0.10.0",
    "time-grunt": "^1.4.0"
  }
}

File

Gruntfile.js

module.exports = function (grunt) {
 
  'use strict';
 
  // Time how long tasks take. Can help when optimizing build times.
  require('time-grunt')(grunt);
 
  // Automatically load required grunt tasks.
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    sprite: 'grunt-spritesmith'
  });
 
 
  // Configurable.
  var config = {};
 
  // Project configuration.
  grunt.initConfig({
 
    // Config.
    config: config,
 
    // Create sprite.
    sprite: {
      development: {
        src: 'images/sprite-src/*.png',
        dest: 'images/sprite.png',
        destCss: 'scss/_sprite.scss',
        padding: 2
      }
    },
 
    // Optimize images.
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'images/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'images/'
        }]
      }
    },
 
    // Compiles Sass to CSS and generates necessary files if requested.
    sass: {
      development: {
        options: {
          style: 'expanded',
          unixNewlines: true,
          sourcemap: 'file'
        },
        files: [{
          expand: true,
          cwd: 'scss',
          src: ['*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      }
    },
    postcss: {
      options: {
        map: {
          inline: false
        },
        processors: [
          require('autoprefixer')({browsers: 'last 3 versions'})
        ]
      },
      dist: {
        src: ['css/landing-page.css', 'css/style.css']
      }
    },
    // Watches files for changes and runs tasks based on the changed files.
    watch: {
      sprite: {
        files: ['images/sprite-src/*.png'],
        tasks: ['sprite']
      },
      sass: {
        files: ['scss/*.scss'],
        tasks: ['sass:development']
      },
      postcss: {
        files: ['css/*.css'],
        tasks: ['postcss']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      js: {
        files: ['js/*.js'],
        options: {
          livereload: true
        }
      }
    }
  });
 
  // Force load tasks which can not be loaded by 'jit-grunt' plugin.
  grunt.loadNpmTasks('grunt-notify');
  grunt.loadNpmTasks('grunt-postcss');
 
  grunt.registerTask('default', ['watch']);
};

Comments

Example of grunt file

An easy way to use this.

Ruslan Piskarov

Tags