grunt

What is grunt?

Grunt is a JavaScript task runner that automates repetitive tasks such as minification, compilation, unit testing, linting, and more. It is highly configurable and uses a Gruntfile to define tasks and load plugins.

What are grunt's main functionalities?

Task Automation

This feature allows you to automate tasks such as minification. The provided code sample demonstrates how to configure Grunt to use the 'uglify' plugin to minify JavaScript files.

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

File Watching

Grunt can watch files and execute tasks when they change. The code sample shows how to configure Grunt to watch JavaScript files and run the 'jshint' task whenever a file changes.

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      scripts: {
        files: ['**/*.js'],
        tasks: ['jshint'],
        options: {
          spawn: false,
        },
      },
    },
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['watch']);
};

Compilation

Grunt can compile preprocessor languages like Sass into CSS. The code sample demonstrates how to configure Grunt to compile a Sass file into a CSS file using the 'grunt-contrib-sass' plugin.

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'main.css': 'main.scss'
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.registerTask('default', ['sass']);
};

Other packages similar to grunt

gulp

Gulp is another JavaScript task runner that uses a code-over-configuration approach, making it more flexible and easier to read than Grunt. It uses streams and code to define tasks, which can result in faster build times.

webpack

Webpack is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding loaders are included. It is more powerful and complex than Grunt, often used for modern JavaScript applications.

broccoli

Broccoli is a JavaScript build tool that focuses on fast rebuilds and a simple, composable API. It is particularly well-suited for large projects where build performance is critical.

README

Grunt: The JavaScript Task Runner

Documentation

Visit the gruntjs.com website for all the things.

Support / Contributing

Before you make an issue, please read our Contributing guide.

Release History

See the CHANGELOG.

License

MIT