Introduction to grunt-cli

Grunt-cli is the command line interface for Grunt, a popular task runner for automating routine tasks in web development. With grunt-cli, developers can streamline workflows, ensure consistent builds, and reduce repetitive work. This guide will walk you through several useful grunt-cli APIs and provide a practical app example using these APIs.

Installing grunt-cli

 $ npm install -g grunt-cli 

This command will install grunt-cli globally, enabling you to run the grunt command from anywhere on your system.

Gruntfile.js Configuration

The Gruntfile.js is the configuration file where all task definitions and configurations are specified.

 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), clean: ['dist'], copy: { main: { files: [ { expand: true, cwd: 'src/', src: ['**'], dest: 'dist/' } ] } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today('yyyy-mm-dd') %> */
' }, build: { src: 'src/js/*.js', dest: 'dist/js/app.min.js' } } });
// Load the plugins grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s). grunt.registerTask('default', ['clean', 'copy', 'uglify']); }; 

Running Grunt Tasks

To run the default task, simply use the following command:

 $ grunt 

API Examples

Here are some examples of useful APIs and tasks you can define in your Gruntfile.js.

Concatenation with grunt-contrib-concat

 concat: { options: { separator: ';' }, dist: { src: ['src/js/file1.js', 'src/js/file2.js'], dest: 'dist/js/built.js' } } 

CSS Minification with grunt-contrib-cssmin

 cssmin: { target: { files: [{ expand: true, cwd: 'src/css', src: ['*.css', '!*.min.css'], dest: 'dist/css', ext: '.min.css' }] } } 

Image Optimization with grunt-contrib-imagemin

 imagemin: { dynamic: { files: [{ expand: true, cwd: 'src/images/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/images/' }] } } 

App Example

Below is an example of a simple app using grunt-cli for various tasks.

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), clean: ['dist'], copy: { main: { files: [ { expand: true, cwd: 'src/', src: ['**'], dest: 'dist/' } ] } }, concat: { options: { separator: ';' }, dist: { src: ['src/js/file1.js', 'src/js/file2.js'], dest: 'dist/js/built.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today('yyyy-mm-dd') %> */
' }, build: { src: 'dist/js/built.js', dest: 'dist/js/built.min.js' } }, cssmin: { target: { files: [{ expand: true, cwd: 'src/css', src: ['*.css', '!*.min.css'], dest: 'dist/css', ext: '.min.css' }] } }, imagemin: { dynamic: { files: [{ expand: true, cwd: 'src/images/', src: ['**/*.{png,jpg,gif}'], dest: 'dist/images/' }] } } });
grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['clean', 'copy', 'concat', 'uglify', 'cssmin', 'imagemin']); }; 

By following this example, you can efficiently manage tasks in your app development process using grunt-cli.

Hash: aa636c0f311f4c9834026ea26de086e0b0fd54d47e6b1848e7a7334dcb5891fe