Grunt 是一个 JavaScript 任务运行器，它可以帮助我们自动化那些枯燥且重复的任务，例如代码压缩、编译、单元测试、代码检查等。Grunt 拥有数百个插件可供选择，我们可以利用 Grunt 以最少的精力来自动化几乎任何事情。

本文旨在让我们从零开始接触 Grunt，并学习如何自动压缩我们的 JavaScript 文件以及使用 JSHint 对其进行验证。

安装 Grunt-CLI

首先，我们需要全局安装 Grunt 的命令行界面 (CLI)，这样我们就可以在任何地方使用它。

$ npm install -g grunt-cli

创建一个新的 Grunt 项目

我们需要创建一个新项目，也可以使用现有的项目。让我们把它命名为 grunt_app。

现在，我们需要在项目中添加两个文件：INLINECODE1060809f 和 INLINECODE9a588d5e。

package.json：它存储了项目的各种开发依赖项（devDependencies）和依赖项（dependencies）以及一些元数据。我们将在这个文件中把 grunt 和项目所需的 Grunt 插件列为 devDependencies。
Gruntfile：这是 grunt 的配置文件。它可以命名为 INLINECODEe59d1654 或 INLINECODE9a4c7942。

在项目的根目录下运行以下命令：

// 生成一个 package.json 文件
$ npm init

// 安装 grunt 并添加到 package.json
$ npm install grunt --save-dev

现在，在目录中创建一个名为 Gruntfile.js 的文件，并将以下内容复制进去：

module.exports = function(grunt) {
    // Do grunt-related things in here
};

这就是“包装”函数，所有的 Grunt 代码都必须在里面指定。它包括项目配置和任务配置。

现在，让我们再创建两个文件：INLINECODE6459176c 和 INLINECODE76518bda。

index.html

    
Hello World
    

main.js

function greet() {  
    alert("Hello GeeksForGeeks");  
}

我们将使用 grunt-contrib-uglify 插件，通过 UglifyJS 来压缩 JavaScript 文件。

安装 grunt-contrib-uglify

$ npm install grunt-contrib-uglify --save-dev

按照如下方式更新你的 Gruntfile：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        uglify: {
            build: {
                src: ‘main.js‘,
                dest: ‘main.min.js‘
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
};

现在，我们可以运行 INLINECODE075fe050 来压缩文件了。我们还可以为 grunt 设置默认任务，这样每当运行 INLINECODE1b6bb8f2 时就会执行这些任务。

为了验证我们的 JavaScript 文件，我们将使用 grunt-contrib-jshint。使用 INLINECODEc84caed8 安装该插件。我们可以通过运行 INLINECODE3be31e1a 来使用它。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        uglify: {
            build: {
                src: ‘main.js‘,
                dest: ‘main.min.js‘
            }
        },
        jshint: {
            options: {
                curly: true,
                eqeqeq: true,
                eqnull: true,
                browser: true,
                globals: {
                    jQuery: true
                },
            },
            uses_defaults: [‘*.js‘]
        },
    });
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
    
    // Default task(s).
    grunt.registerTask(‘default‘, [‘uglify‘]);
};