65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET Core MVC 中的 Grunt.js 使用方法

Saineshwar Bageri
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (7投票s)

2017年1月25日

CPOL

13分钟阅读

viewsIcon

25542

downloadIcon

37

如何使用 Grunt.js 在 ASP.NET Core MVC 中进行 HTML 压缩和 JS 混淆，以及配置 Task Runner Explorer

什么是 Grunt.js？

Grunt.js 是一个开源的 JavaScript 工具集，用于自动化开发过程中的重复性任务。它类似于 Gulp.js。

Grunt 插件已经提供了许多现成的任务。您只需使用它们来自动化您的流程。

让我们学习如何使用 Grunt.js 自动化重复性任务。

主题

  1. 创建应用程序
  2. 为项目添加 package.json 文件
  3. 下载 Grunt js 的依赖项
  4. 为项目添加 Gruntfile.js 文件
  5. 编写基本任务以了解如何开始使用 Grunt.js
  6. 在 Visual Studio 中安装 "Task Runner Explorer" 扩展
  7. 编写任务以压缩 HTML 文件
  8. 编写任务以合并 JavaScript 文件
  9. 编写任务以混淆和压缩 JavaScript
  10. 编写任务以压缩层叠样式表
  11. 编写任务以压缩/优化图像
  12. 编写任务以将文件从一个文件夹复制到另一个文件夹
  13. 使用 Grunt.js 按顺序运行多个任务

步骤 1：创建应用程序

现在，让我们创建一个 .NET Core Web 应用程序。从开始页打开 Visual Studio IDE。点击“新建项目”链接。

点击新建项目链接后，会弹出一个名为“新建项目”的新对话框。在左侧面板中，选择模板，然后在其中选择“Visual C#”，再选择“.NET Core”，然后在中间面板中，您将看到 .NET Core 项目模板，在这些模板中选择“ASP.NET Core Web Application (.NET Core)”项目模板。

选择项目模板后，接下来我们将项目命名为“DemoGrunt”。点击“确定”按钮创建项目，它将弹出另一个名为“新建 ASP.NET Core Web Application (.NET Core)”的对话框。

在此对话框中，我们将选择“Web 应用程序”项目模板来创建“ASP.NET Core Web 应用程序”，然后点击“确定”按钮创建项目。

下面是新创建的完整项目视图

创建项目后，接下来的事情是向项目添加 package.json 文件。

步骤 2：在项目中添加 package.json 文件

我们将向项目添加 package.json 文件，以便从 Node 包管理器下载包。

要添加 package.json，只需右键单击“DemoGrunt”项目，然后从菜单列表中选择“添加”->然后在其中选择“新建项”。

选择后，会弹出一个名为“添加新项”的新对话框，如下所示。

在此对话框中，我们将选择“npm 配置文件”，然后点击“添加”按钮。

点击“添加”按钮后，您可以看到 package.json 文件已添加到项目中，如下所示。

步骤 3：下载 Grunt 包

我们将下载以下包：

  • grunt
  • grunt-contrib-concat
  • grunt-contrib-uglify
  • grunt-contrib-copy
  • grunt-minify-html
  • grunt-contrib-cssmin
  • grunt-tinyimg

添加到 package.json 的代码片段

在 devDependencies 部分的 package.json 文件中添加包，用于下载这些包。

{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
    "devDependencies": 
{
        "grunt": "1.0.1",
        "grunt-contrib-concat": "1.0.1",
        "grunt-contrib-uglify": "2.0.0",
        "grunt-contrib-copy": "1.0.0",
        "grunt-minify-html": "2.1.0",
        "grunt-replace": "1.0.1",
        "grunt-contrib-cssmin": "1.0.2",
        "grunt-tinyimg": "1.0.0"
    }
}

注意

  • folder/*.js - 将匹配 folder 中的所有 JavaScript 文件
  • folder/*.css - 将匹配 folder 中的所有 CSS 文件
  • folder/*.html - 将匹配 folder 中的所有 HTML 文件

在 package.json 文件中添加依赖项后，只需保存此文件或整个项目，一旦保存，它将开始从Node 包管理器 (NPM) 下载包。

下载完依赖项后，接下来，我们将向项目添加 Gruntfile.js 文件。

步骤 4：在项目中添加 Gruntfile.js 文件

在此步骤中，我们将向项目添加 Gruntfile.js 文件。

要添加 Gruntfile.js 文件，只需右键单击“DemoGrunt”项目，然后从菜单列表中选择“添加”->然后在其中选择“新建项”。

选择后，会弹出一个名为“添加新项”的新对话框，如下所示。

在此对话框中，我们将选择“Grunt 配置文件”，然后点击“添加”按钮。

点击“添加”按钮后，它会将 Gruntfile.js 添加到项目中，如下所示。

您可以在 Gruntfile.js 文件中看到一些默认代码。

步骤 5：编写基本任务以了解如何开始使用 Grunt.js

  1. 现在，让我们编写一个简单的消息来显示“欢迎来到 Visual Studio 中的 Grunt js”。

    ‘default’是任务的名称。

    以下是 Gruntfile.js 的完整代码片段。

    module.exports = function (grunt)
{
    // A very basic default task.
    grunt.registerTask('default', 'Task Description', function () {
        grunt.log.write('Welcome to Grunt js in Visual Studio');
    });
};

    现在我们需要运行在 Gruntfile.js 中编写的任务。为此，我们需要安装“Task Runner Explorer”扩展。

步骤 6：在 Visual Studio 中安装 "Task Runner Explorer" 扩展

要安装“Task Runner Explorer”，只需右键单击 Visual Studio 的菜单栏，然后在其中选择“工具”菜单，在其内部选择“扩展和更新”。

点击“扩展和更新”后，会弹出一个新对话框，如下图所示，您需要在左侧选择“在线”选项卡，然后在搜索结果中输入“Task Runner Explorer”

以下是安装“Task Runner Explorer”后的快照。

安装后，它会要求您重启 Visual Studio。

重启 Visual Studio 后，接下来，我们需要打开Task Runner Explorer。

要打开Task Runner Explorer，只需从 Visual Studio 的工具菜单中选择Task Runner Explorer菜单。

Task Runner Explorer 的快照

Task Runner Explorer 包含 Gruntfile.js 中的所有任务，在任务下，您会找到我们创建的“default”任务。

现在，我们将运行默认任务。要运行它，只需右键单击任务名称（default），然后会出现两个选项，选择运行选项（带有绿色播放按钮的选项）。

以下是运行任务后的快照。

太棒了，我们完成了第一个任务的运行。很简单，不是吗？

完成任务后，接下来，我们将学习如何使用 gruntfile.js 压缩 HTML 文件。

深入了解 Grunt 属性

此信息来自 https://grunt.node.org.cn/configuring-tasks。

步骤 7：编写任务以压缩 HTML 文件

在此步骤中，我们将编写一个用于压缩 HTML 文件的任务。为此，我将首先在 wwwroot 文件夹中添加一个名为 Htmlfiles 的文件夹，并在该文件夹中添加一个名为 demo.html 的 HTML 文件。

文件夹结构

接下来，我将在同一个 wwwroot 文件夹中添加另一个名为 Compressedfiles 的文件夹。在这里，我们将存储压缩后的 HTML 文件。

文件夹结构

添加 HomePage.html 文件后，现在在该文件中添加一些带空格的文本。

HomePage.html 文件快照

添加了带空格的 HTML 文件后，接下来我们将编写一个任务来压缩此 HTML 文件并将其写入另一个位置（Compressedfiles）文件夹。

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt) {
    grunt.initConfig({
        // minifyHtml is Task
        minifyHtml:
           {
               //## minifyHtml task configuration goes here ##
               // Html is target
               Html: {
                   src: ['wwwroot/Htmlfiles/**/*.html'],
                   dest: 'wwwroot/Compressedfiles/',
                   expand: true,
                   flatten: true
                    }
           }
    });
    // Load the plugin that provides the "minify html" task.
    grunt.loadNpmTasks("grunt-minify-html");
};

在上面的代码片段中，我们使用 ["grunt-minify-html"] 插件来压缩 HTML 文件，此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径获取 HTML 文件进行压缩，压缩后，我们将把它写入项目中的另一个文件夹（目标）。

理解 Gruntfile.js 的代码片段

  1. 第一步包含包装函数，所有 Grunt 相关代码都必须写在这个函数里面。
    module.exports = function (grunt) {
    // Do grunt-related things in here
};
  2. 在第二步中，我们将初始化一个配置对象。
    module.exports = function (grunt) {
    grunt.initConfig({

   });
};
  3. 在第三步中，我们将在 initConfig 方法中编写一个名为“minifyHtml”的任务。
    module.exports = function (grunt) {
    grunt.initConfig({
     
   minifyHtml:
        {
             // minifyHtml is Task

                 }
   });
};
  4. 在第四步中，我们将在“minifyHtml”任务中编写目标（“Html”）。
    module.exports = function (grunt) {
    grunt.initConfig({
     
   minifyHtml:
        {
          Html: {
               // Html is Target
                }
                 }
   });
};

    注意：一个任务可以包含多个目标。

  5. 在第五步中，我们将配置属性 source [src]、destination [dest]、expand 和 flatten。
    module.exports = function (grunt) {
    grunt.initConfig({
        // minifyHtml is Task
        minifyHtml:
           {
               //## minifyHtml task configuration goes here ##
               // Html is target
               Html: {
                   src: 'wwwroot/Htmlfiles/**/*.html',
                   dest: 'wwwroot/Compressedfiles/',
                   expand: true,
                   flatten: true
                    }
           }
    });
};
  6. 加载 Grunt 插件和任务“grunt-minify-html”。
    module.exports = function (grunt) {
    grunt.initConfig({
        // minifyHtml is Task
        minifyHtml:
           {
               //## minifyHtml task configuration goes here ##
               // Html is target
               Html: {
                   src: 'wwwroot/Htmlfiles/**/*.html',
                   dest: 'wwwroot/Compressedfiles/',
                   expand: true,
                   flatten: true
                    }
           }
    });
    // Load the plugin that provides the "minify html" task.
    grunt.loadNpmTasks("grunt-minify-html");
};

选项

  • Source [Src] = 从 Htmlfiles 文件夹获取所有 HTML 文件进行压缩的路径。
  • Destination [Dest] = 在 Compressedfiles 文件夹中存储所有压缩 HTML 文件输出的路径。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击“minifyHtml”任务，然后在任务列表中选择运行。

运行任务后，让我们看一下 Compressedfile 文件夹，其中存储着压缩后的 HTML 文件。

文件夹结构

压缩文件 / 压缩文件输出

步骤 8：编写任务以合并 JavaScript 文件

在这一部分，我们将学习如何合并 JavaScript 文件。为此，我们将把四个 JavaScript 文件放在一个文件夹中，然后我们将把所有 JavaScript 文件合并成一个单独的 JavaScript 文件。

文件夹结构

在每个 JavaScript 文件中，我将添加一个单独的 JavaScript 函数，以便我们了解它是如何合并文件的。

在所有 JavaScript 文件中编写完函数后，现在让我们在 Gruntfile.js 上编写合并所有这些文件到一个文件的任务。

我们在这里遗漏了一点，那就是我们将把所有合并的 JavaScript 文件存储在哪里。为了存储该文件，我将创建一个名为“ConcatenatedJsfiles”的新文件夹，用于存储所有合并的 JavaScript 文件。

文件夹结构

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt) {
    grunt.initConfig({
        // concat is Task
        concat:
          {
              // all is Target
              all:
             {
                 src: ['wwwroot/js/**/*.js'],
                 dest: 'wwwroot/ConcatenatedJsfiles/combined.js'
             }
          }
    });
    // Load the plugin that provides the "concat files" task.
    grunt.loadNpmTasks("grunt-contrib-concat");
};
  • Source [Src] = 从 JS 文件夹获取所有 JavaScript 文件进行合并的路径。
  • Destination [Dest] = 在 ConcatenatedJsfiles 文件夹中存储所有合并 JavaScript 文件输出的路径。

在上面的代码片段中，我们使用 ["grunt-contrib-concat"] 插件来合并 JavaScript 文件，此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径获取 JavaScript 文件进行合并，合并后，它将把它写入项目中的不同文件夹（目标）。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击“concat”任务，然后在菜单列表中选择运行菜单。

Task Runner Explorer 的快照

运行任务后，让我们看一下“ConcatenatedJsfiles”文件夹，其中存储着合并的 JavaScript 文件。

文件夹结构

合并的 JavaScript 文件输出

步骤 9：编写任务以混淆和压缩 JavaScript

在此步骤中，我们将编写一个用于混淆和压缩 JavaScript 文件的任务。为此，我将首先在 wwwroot 文件夹中添加一个名为 MinifiedJavascriptfiles 的文件夹，所有混淆和压缩的 JavaScript 文件将存储在此文件夹中，我们将从“Js”文件夹获取所有 JavaScript 文件进行混淆和压缩。

文件夹结构

要压缩的 JavaScript 文件

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt)
{
    grunt.initConfig({
        // uglify is Task
        uglify:
           {
               // js is Target 
               js:
                  {
                      //Source of files
                      src: ['wwwroot/js/**/*.js'],
                      //Destination of files
                      dest: 'wwwroot/MinifiedJavascriptfiles/Calculation.js'
                  }
           }
    });
    // Load the plugin that provides the "uglify|Minify" task.
    grunt.loadNpmTasks("grunt-contrib-uglify");
};

在上面的代码片段中，我们使用 ["grunt-contrib-uglify"] 插件来混淆和压缩 JavaScript 文件，此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径获取 JavaScript 文件进行混淆和压缩，混淆和压缩后，它将把它写入项目中的不同文件夹（目标）。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击“uglify”任务，然后在菜单列表中选择运行菜单。

Task Runner Explorer 的快照

运行任务后，让我们看一下“MinifiedJavascriptfiles”文件夹，其中存储着压缩后的 JavaScript 文件。

文件夹结构

压缩后的 JavaScript 文件输出

步骤 10：编写任务以压缩层叠样式表

在此步骤中，我们将编写一个用于压缩层叠样式表文件的任务。为此，我将首先在 wwwroot 文件夹中添加一个名为 MinifiedCssfiles 的文件夹，所有压缩的层叠样式表文件将存储在此文件夹中，我们将从“css”文件夹获取所有层叠样式表文件进行压缩。

要压缩的层叠样式表文件

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt) {
    grunt.initConfig({
        // cssmin is Task
        cssmin:
           {
               // css is Target 
               css:
                  {
                      //Source of files
                      src: ['wwwroot/css/**/*.css'],
                      //Destination of files
                      dest: 'wwwroot/MinifiedCssfiles/site.min.css'
                  }
           }
    });
    // Load the plugin that provides the "Minify" task.
    grunt.loadNpmTasks("grunt-contrib-cssmin");
};

在上面的代码片段中，我们使用 ["grunt-contrib-cssmin"] 插件来压缩 CSS (层叠样式表) 文件，此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径获取 CSS (层叠样式表) 文件进行压缩，压缩后，它将把它写入项目中的一个不同文件夹（目标）。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。要运行，只需右键单击“Cssmin”，然后在菜单列表中选择运行菜单。

Task Runner Explorer 的快照

运行任务后，我们需要查看“MinifiedCssfiles”文件夹，其中存储着压缩后的层叠样式表文件。

文件夹结构

压缩后的 CSS 文件输出

步骤 11：编写任务以压缩/优化图像

在此步骤中，我们将压缩图像。为此，我将使用“grunt-tinyimg”插件。接下来，我们将在 wwwroot 文件夹中创建一个名为 Compressimages 的文件夹。所有压缩的图像将存储在此文件夹中，我们将从“images”文件夹获取所有图像进行压缩。

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt) {
    grunt.initConfig({
        // tinyimg is Task
        tinyimg:
           {
               // minifyimage is Target
               minifyimage:
                  {
                      // Source of files
                      src: ['wwwroot/images/**/*.{png,jpg,gif,svg}'],
                      // Destination of files
                      dest: 'wwwroot/Compressimages/',
                      expand: true,
                      flatten: true
                  }
           }
    });
    // Load the plugin that provides the "tinyimg" task.
    grunt.loadNpmTasks("grunt-tinyimg");
};

在上面的代码片段中，我们使用 ["grunt-tinyimg"] 插件来压缩图像文件。此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径获取图像进行压缩，压缩后，它将把它写入项目中的不同文件夹（目标）。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击“tinyimg”，然后在菜单列表中选择运行菜单。

Task Runner Explorer 的快照

压缩前的图像快照

压缩后的图像快照

步骤 12：编写任务以将文件从一个文件夹复制到另一个文件夹

在此步骤中，我们将编写一个用于将文件从一个文件夹复制到另一个文件夹的任务。

为了演示，我将展示如何将 HTML 文件从一个文件夹复制到项目中的另一个文件夹。

使用的包是“grunt-contrib-copy”。

我在 wwwroot 文件夹中添加了 Htmlfiles 文件夹，我需要将 HTML 文件从位于 wwwroot 文件夹外部的 TempHtmlFiles 文件夹移动到该文件夹。

以下是 Gruntfile.js 的完整代码片段。

module.exports = function (grunt) {
    grunt.initConfig({
        // copy is Task
        copy: {
            // html is Target 
            html:
                {
                    //Source of files
                    src: 'TempHtmlFiles/**/*.html',
                    //Destination of files
                    dest: 'wwwroot/Htmlfiles/',
                    // Options
                    expand: true,
                    flatten: true,
                    filter: 'isFile'
                }
        }
    });
    // Load the plugin that provides the "copy" task.
    grunt.loadNpmTasks("grunt-contrib-copy");
};

在上面的代码片段中，我们使用 ["grunt-contrib-copy"] 插件来复制文件，此外，我们还提供了 src（源）和 dest（目标）文件夹路径，它将从源路径复制文件，复制后，它将把它写入项目中的不同文件夹（目标）。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击“copy”任务，然后在菜单的任务列表中选择运行菜单。

Task Runner Explorer 的快照

Htmlfiles 文件夹中复制文件的快照

步骤 13：使用 Grunt.js 按顺序运行多个任务

在此步骤中，我们将学习如何按特定顺序运行一个以上的任务。

为此，我们将使用 Grunt.js 的 registerTask() 方法，该方法有三个重载。

参数

  • name：任务的名称
  • Callback：任务执行时运行的函数
  • Message：记录一条消息
  • Array：任务名称的字符串数组

下面是代码片段快照，展示了如何使用 Grunt.js 按顺序运行多个任务。

在上面的代码片段中，我们使用两个插件 ["grunt-contrib-copy, grunt-contrib-uglify"]，一个用于复制文件，另一个用于混淆 JavaScript 文件。

我们将按顺序运行两个任务，首先是复制文件任务，然后是混淆 JavaScript 文件任务。在复制文件任务中，我们将把文件从一个文件夹复制到另一个文件夹，在 uglify 任务中，我们将混淆和压缩 JavaScript 文件，然后将其写入项目中的一个不同文件夹。

最后，保存 Gruntfile.js 并打开 Task Runner Explorer。

要运行，只需右键单击别名任务“all”，然后在菜单列表中选择运行菜单。

Task Runner Explorer 的快照

Htmlfiles 文件夹中复制文件的快照

最后，我们完成了使用 Grunt js 和 ASP.NET Core MVC 的简短学习之旅，希望您已从中受益。

通过使用 Grunt 插件，您可以创建各种工具，这些工具将有助于日常工作流程，并减少在项目核心流程上花费的时间。

历史

  • 2017年1月25日：初始版本
© . All rights reserved.