grunt-cli

What is grunt-cli?

The grunt-cli package is the command line interface for Grunt, a JavaScript task runner. It allows you to automate repetitive tasks such as minification, compilation, unit testing, linting, and more.

What are grunt-cli's main functionalities?

Task Automation

This code sample demonstrates how to automate the task of JavaScript file minification using the 'uglify' plugin. The 'uglify' task reads a source file and outputs a minified version.

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

This code sample shows how to set up a file watcher that monitors JavaScript files for changes and runs the 'jshint' task whenever a change is detected.

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

This code sample demonstrates how to compile Sass files into CSS using the 'sass' plugin. The 'sass' task reads a Sass file and outputs a compiled CSS file.

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-cli

gulp

Gulp is another JavaScript task runner that uses a code-over-configuration approach. It is known for its speed and flexibility, allowing you to use Node.js streams to build automation tasks. Compared to Grunt, Gulp's syntax is more concise and it often performs better due to its use of streams.

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. Unlike Grunt, which is a task runner, Webpack focuses on bundling modules and dependencies, making it more suitable for complex front-end applications.

broccoli

Broccoli is a JavaScript build tool that emphasizes a simple, composable, and fast build pipeline. It is particularly well-suited for large projects and offers a more modern approach compared to Grunt. Broccoli uses a tree-based architecture, which can make it easier to manage complex build processes.

README

grunt-cli

The Grunt command line interface.

Install this globally and you'll have access to the grunt command anywhere on your system.

npm install -g grunt-cli

Note: The job of the grunt command is to load and run the version of Grunt you have installed locally to your project, irrespective of its version. Starting with Grunt v0.4, you should never install Grunt itself globally. For more information about why, please read this.

See the Getting Started guide for more information.

Shell tab auto-completion

To enable tab auto-completion for Grunt, add one of the following lines to your ~/.bashrc or ~/.zshrc file.

# Bash, ~/.bashrc
eval "$(grunt --completion=bash)"

# Zsh, ~/.zshrc
eval "$(grunt --completion=zsh)"

Installing grunt-cli locally

If you prefer the idiomatic Node.js method to get started with a project (npm install && npm test) then install grunt-cli locally with npm install grunt-cli --save-dev. Then add a script to your package.json to run the associated grunt command: "scripts": { "test": "grunt test" } . Now npm test will use the locally installed ./node_modules/.bin/grunt executable to run your Grunt commands.

To read more about npm scripts, please visit the npm docs: https://npmjs.org/doc/misc/npm-scripts.html.