如何将 Gulp 与 ASP.NET Core MVC 结合使用

Saineshwar Bageri

4.79/5 (15投票s)

2017 年 1 月 10 日

CPOL

12分钟阅读

49837

468

使用 Gulp.js 最小化和丑化文件，并配置 ASP.NET Core MVC 中的任务运行程序资源管理器

下载源代码和演示 - 4.7 MB

引言

首先想到的问题是，什么是 Gulp.js？

Gulp.js 是一个开源的 JavaScript 工具包，用于自动化开发过程中的任务。

在我们日常的项目中，我们会开发大量的 JavaScript、CSS、HTML 文件，但要对这些文件进行最小化或美化，我们不得不去一些网站，在那里上传文件进行最小化或美化。

如果我们能在 Visual Studio 中自动化这个过程，你的反应会是什么？“哇”，对吧？

让我们来学习如何使用 gulp.js 自动化这个过程，享受它带来的便利。

步骤 1：创建应用程序

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

点击“新建项目”链接后，会弹出一个名为“新建项目”的新对话框。在左侧面板中，选择模板，然后选择Visual C# -> 在其中，选择.NET Core 模板，然后在窗格中间，您会看到 .NET Core 项目模板，从模板中选择“ASP.NET Core Web 应用程序（.NET Core）”项目模板。

选择项目模板后，接下来我们将项目命名为“DemoGulp”，然后最后点击“确定”按钮来创建项目，但这会弹出一个名为“新建 ASP.NET Core Web 应用程序（.NET Core）”的另一个对话框。

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

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

创建项目后，下一步是向项目添加 package.json 文件。

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

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

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

选择后，将出现一个名为“添加新项”的弹出窗口，如下图所示。

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

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

向项目中添加 package.json 文件后，下一步我们将下载 gulp 的包。

步骤 3：下载 gulp 包

我们将下载以下包：

gulp
rimraf
gulp-concat
gulp-cssmin
gulp-uglify
gulp-minify-html
gulp-ext-replace

包的详细信息

要添加到 package.json 的代码片段

这是我们将要添加到 package.json 的 devDependencies 部分的代码片段。

    "devDependencies": {
        "gulp": "^3.9.1",
        "rimraf": "^2.5.4",
        "gulp-concat": "2.6.1",
        "gulp-cssmin": "^0.1.7",
        "gulp-uglify": "^2.0.0",
        "gulp-minify-html": "^1.0.6",
        "gulp-ext-replace": "^0.3.0"
    }

注意

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

package.json 快照

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

下载依赖项后，下一步我们将向项目添加 gulpfile.js 文件。

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

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

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

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

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

点击“添加”按钮后，它将在项目中添加 Gulpfile.js，如下图所示。

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

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

第一步是加载模块。
```
var gulp = require('gulp');
```
在第二步中，让我们看看 task 是如何工作的。
```
      gulp.task('default', function () 
      {
         // place code for your default task here
      });
```
‘default’是任务的名称，您可以在此函数内部编写 task。

现在让我们写一个简单的消息来显示“Welcome to gulp js”。

       var gulp = require('gulp');

       gulp.task('default', function ()
       {
         // place code for your default task here
         console.log('Welcome to gulp js in Visual Studio');
       });

gulpfile.js 快照

现在我们必须运行此任务，它已在 glupfile.js 中编写。为此，我们需要安装“任务运行程序资源管理器”扩展。

步骤 6：在 Visual Studio 中安装“任务运行程序资源管理器”扩展

要安装“任务运行程序资源管理器”，只需右键单击 Visual Studio 的菜单栏，在其中选择“工具”菜单，然后 -> 选择“扩展和更新”。

点击“扩展和更新”后，会弹出一个新对话框，如下图所示。在其中，您需要在左侧选择“联机”选项卡，然后在“搜索结果”中，键入“任务运行程序资源管理器”。

下面是安装“任务运行程序资源管理器”后的快照。

安装后，系统会要求您重新启动 Visual Studio。

重新启动 Visual Studio 后，下一步我们需要打开任务运行程序资源管理器。

要打开任务运行程序资源管理器，只需单击 Visual Studio 的“工具”菜单，然后从菜单中选择“任务运行程序资源管理器”。

任务运行程序资源管理器快照

任务运行程序资源管理器包含 Gulpfile.js 的所有任务，在任务中，您会找到我们创建的“default”任务。

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

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

哇，我们完成了第一个任务的运行。很简单，对吧？

完成任务后，下一步，我们将学习如何使用 gulpfile.js 最小化 HTML 文件。

步骤 7：编写任务以最小化 HTML 文件

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

文件夹结构

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

文件夹结构

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

demo.html 文件快照

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

gulpfile.js 的完整代码片段

var gulp = require('gulp');

//Using package to minify html 
minifyHtml = require("gulp-minify-html");

var paths = {
    webroot: "./wwwroot/"
};
//Getting Path of Htmlfiles to Minifying
paths.html = paths.webroot + "Htmlfiles/**/*.html";

//Path to Writing minified Files after Minifying
paths.Destination = paths.webroot + "Compressedfile";

gulp.task('minify-html', function ()
{   // path to your files
     gulp.src(paths.html)
    // Minifying files
    .pipe(minifyHtml())
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

// Main task to Call for Minifying html files
gulp.task("demo", ["minify-html"]);

理解 gulpfile.js 代码片段

在第一步中，我们将加载模块。

var gulp = require('gulp');

//Using package to minify html 
minifyHtml = require("gulp-minify-html");

在第二步中，我们将声明一个名为“paths”的变量，该变量将存储“wwwroot”的路径。
```
var paths = {
    webroot: "./wwwroot/"
};
```

在第三步中，我们将声明一个路径来从“Htmlfiles”文件夹获取文件。

//Getting Path of Htmlfiles to Minifying
paths.html = paths.webroot + "Htmlfiles/**/*.html";

在第四步中，我们将声明一个路径来将最小化后的文件写入“Compressedfile”文件夹。
```
//Path to Writing minified Files after Minifying
paths.Destination = paths.webroot + "Compressedfile";
```

在第五步中，我们将编写任务（‘minify-html’）来获取所有 HTML 文件，使用 minify 包对它们进行最小化，然后将其写入我们创建的目标文件夹。

gulp.task('minify-html', function ()
{   // path to your files
     gulp.src(paths.html)
    // Minifying files
    .pipe(minifyHtml())
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

在第六步中，我们将编写主任务，以便我们可以按顺序运行另一个任务。
```
gulp.task("demo", ["minify-html"]);
```

最后，保存 gulpfile.js 并打开任务运行程序资源管理器。

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

任务运行程序资源管理器快照

运行任务后，我们将在 Compressedfile 文件夹中看到存储的最小化 HTML 文件。

文件夹结构

压缩文件输出

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

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

文件夹结构

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

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

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

文件夹结构

gulpfile.js 的完整代码片段

var gulp = require('gulp');

//Using package to concat files 
concat = require("gulp-concat");

var paths = {
    webroot: "./wwwroot/"
};

//Getting Path of Javascript files 
paths.js = paths.webroot + "js/**/*.js";

//Path to Writing concatenated Files after concatenating
paths.Destination = paths.webroot + "ConcatenatedJsfiles";

var newconcat = "concatmain.js"; // Name of new file

// Task Name [concatfiles]
gulp.task('concatfiles', function ()
{   // path to your files
     gulp.src(paths.js)
    // concat files
    .pipe(concat(newconcat))
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

// Main task to Call for concatenating js files
gulp.task("demo", ["concatfiles"]);

理解 gulpfile.js 代码片段

在第一步中，我们将加载模块。

var gulp = require('gulp');

//Using package to concat files 
concat = require("gulp-concat");

在第二步中，我们将声明一个名为“paths”的变量，该变量将存储“wwwroot”的路径。
```
var paths = {
    webroot: "./wwwroot/"
};
```
在第三步中，我们将声明一个路径来从“Js”文件夹获取 JavaScript 文件。
```
//Getting Path of Javascript files 
paths.js = paths.webroot + "js/**/*.js";
```
在第四步中，我们将声明一个路径来将合并后的文件存储在“ConcatenatedJsfiles”文件夹中。
```
//Path to Writing concatenated Files after concatenating
paths.Destination = paths.webroot + "ConcatenatedJsfiles";
```
在第五步中，我们将声明一个名为 newconcat 的变量，并将新 JavaScript 文件（concatmain.js）的名称赋给此变量。
```
var newconcat = "concatmain.js"; // Name of new file
```

在第六步中，我们将编写任务（‘concatfiles’）来获取所有 JavaScript 文件，使用 concat 包将它们合并，然后将其写入我们创建的目标文件夹。

// Task Name [concatfiles]
gulp.task('concatfiles', function ()
{   // path to your files
     gulp.src(paths.js)
    // concat files
    .pipe(concat(newconcat))
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

在第七步中，我们将编写 Main 任务，以便我们可以按顺序运行另一个任务。
```
gulp.task("demo", ["concatfiles"]);
```

最后，保存 gulpfile.js 并打开任务运行程序资源管理器。

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

任务运行程序资源管理器快照

运行任务后，我们将在“ConcatenatedJsfiles”文件夹中看到存储的已合并 JavaScript 文件。

文件夹结构

合并后的 JavaScript 文件输出

步骤 9：编写任务以最小化 JavaScript

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

文件夹结构

要最小化的 JavaScript 文件

gulpfile.js 的完整代码片段

var gulp = require('gulp');

//Using package to minifying files 
uglify = require("gulp-uglify");

var paths = {
    webroot: "./wwwroot/"
};

//Getting Path of Javascript files 
paths.js = paths.webroot + "js/**/*.js";

//Path to Writing minified Files after minifying
paths.Destination = paths.webroot + "MinifiedJavascriptfiles";

// Task Name [MinifyingTask]
gulp.task('MinifyingTask', function () {   // path to your files
    gulp.src(paths.js)
   // concat files
   .pipe(uglify())
   // Writing files to Destination
   .pipe(gulp.dest(paths.Destination));
});

理解 gulpfile.js 代码片段

在第一步中，我们将加载模块。

var gulp = require('gulp');

//Using package to minifying files 
uglify = require("gulp-uglify");

在第二步中，我们将声明一个名为“paths”的变量，该变量将存储“wwwroot”的路径。
```
var paths = {
    webroot: "./wwwroot/"
};
```
在第三步中，我们将声明一个路径来从“Js”文件夹中获取 JavaScript 文件。
```
//Getting Path of Javascript files 
paths.js = paths.webroot + "js/**/*.js";
```
在第四步中，我们将声明一个路径来在最小化后将最小化后的文件存储在“MinifiedJavascriptfiles”文件夹中。
```
//Path to Writing minified Files after minifying
paths.Destination = paths.webroot + "MinifiedJavascriptfiles";
```

在第五步中，我们将编写任务（‘MinifyingTask’）来获取所有 JavaScript 文件，使用 uglify 包对 JavaScript 文件进行最小化，然后将其写入我们创建的目标文件夹。

// Task Name [MinifyingTask]
gulp.task('MinifyingTask', function () 
{   // path to your files
    gulp.src(paths.js)
   // concat files
   .pipe(uglify())
   // Writing files to Destination
   .pipe(gulp.dest(paths.Destination));
});

最后，保存 gulpfile.js 并打开任务运行程序资源管理器。

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

任务运行程序资源管理器快照

运行任务后，我们将在“MinifiedJavascriptfiles”文件夹中看到存储的最小化 JavaScript 文件。

文件夹结构

最小化后的 JavaScript 文件输出

步骤 10：编写任务以最小化 CSS

在此步骤中，我们将编写一个用于最小化 CSS 文件的任务。为此，我将首先在 wwwroot 文件夹中添加一个名为 MinifiedCssfiles 的文件夹。此文件夹将存储所有最小化后的 CSS 文件，我们将从“css”文件夹获取所有 CSS 文件进行最小化。

要最小化的 CSS 文件

gulpfile.js 的完整代码片段

var gulp = require('gulp');

//Using package to minifying css files 
cssmin = require("gulp-cssmin");
        
var paths = {
    webroot: "./wwwroot/"
};

//Getting Path of Javascript files 
paths.css = paths.webroot + "css/**/*.css";

//Path to Writing minified Files after minifying
paths.Destination = paths.webroot + "MinifiedCssfiles";

// Task Name [MinifyingTask]
gulp.task('Minifying-Css-Task', function () {   // path to your files
    gulp.src(paths.css)
   .pipe(cssmin())
   // Writing files to Destination
   .pipe(gulp.dest(paths.Destination));
});

理解 gulpfile.js 代码片段

在第一步中，我们将加载模块。

var gulp = require('gulp');

//Using package to minifying css files 
cssmin = require("gulp-cssmin");

在第二步中，我们将声明一个名为“paths”的变量，该变量将存储“wwwroot”的路径。
```
var paths = {
    webroot: "./wwwroot/"
};
```
在第三步中，我们将声明一个路径来从“css”文件夹中获取 CSS 文件。
```
//Getting Path of cascading style sheets files 
paths.css = paths.webroot + "css/**/*.css";
```
在第四步中，我们将声明一个路径来在最小化后将最小化后的文件存储在“MinifiedCssfiles”文件夹中。
```
//Path to Writing minified Files after minifying
paths.Destination = paths.webroot + "MinifiedCssfiles";
```

在第五步中，我们将编写任务（‘Minifying-Css-Task’）来获取所有 CSS 文件，使用 cssmin 包对 CSS 文件进行最小化，然后将其写入我们创建的目标文件夹。

// Task Name [Minifying-Css-Task]
gulp.task('Minifying-Css-Task', function () {   // path to your files
    gulp.src(paths.css)
   .pipe(cssmin())
   // Writing files to Destination
   .pipe(gulp.dest(paths.Destination));
});

最后，保存 gulpfile.js 并打开任务运行程序资源管理器。

要运行，只需右键单击“Minifying-Css-Task”，然后从菜单列表中选择“运行”菜单。

任务运行程序资源管理器快照

运行任务后，我们将在“MinifiedCssfiles”文件夹中看到存储的最小化 CSS 文件。

最小化后的 JavaScript 文件输出

注意：如果您想按顺序运行多个任务，可以使用以下语法。

步骤 11：编写任务以更改 JavaScript 文件和 CSS 文件的扩展名

在此步骤中，我们将编写一个任务来更改 CSS 文件和 JavaScript 文件的扩展名。为此，我将首先在 wwwroot 文件夹中添加一个名为 Changedextensionfiles 的文件夹。在此文件夹中，将存储所有更改了扩展名的 CSS 文件和 JavaScript 文件。

我们将从“css”文件夹获取 CSS 文件，从“js”文件夹获取 JavaScript 文件。

文件夹结构

gulpfile.js 的完整代码片段

var gulp = require('gulp');

//Using package to minifying files 
ext_replace = require("gulp-ext-replace");

var paths = {webroot: "./wwwroot/"};

//Getting Path of Javascript files 
paths.js = paths.webroot + "js/**/*.js";

//Getting Path of cascading style sheets files 
paths.css = paths.webroot + "css/**/*.css";

//Path to Writing Changed extensions files
paths.Destination = paths.webroot + "Changedextensionfiles";

// Task Name [Changing Extension Javascript]
gulp.task('ChangingExtensionJavascriptTask', function () {
    // path to your files
    gulp.src(paths.js)
    // change file extension from .js to .min.js
    .pipe(ext_replace('.min.js'))
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

// Task Name [Changing Extension Css]
gulp.task('ChangingExtensionCssTask', function () {
    // path to your files
    gulp.src(paths.css)
    // change file extenstion from css to .min.css
    .pipe(ext_replace('.min.css'))
    // Writing files to Destination
    .pipe(gulp.dest(paths.Destination));
});

//Syntax If you want to run more than one task sequentially
gulp.task("MainTask", ["ChangingExtensionJavascriptTask", "ChangingExtensionCssTask"]);

最后，保存 gulpfile.js 并打开任务运行程序资源管理器。

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