目录
使用 Gulp 轻松改进前端 ASP.NET Core 应用程序开发
BazingaZexus
2022年06月17日 21:30

Gulp 是一个工具包，可帮助 Web 开发人员自动执行许多开发任务，例如缩小和文件转换。我们可以使用 NPM gulp 依赖项创建任务。

在本文中，我们将介绍 gulp 集成。我们将了解一些最常需要的 gulp 任务，这些任务有助于缓解使用 Visual Studio 的前端 Web 开发挑战。

先决条件

1. 安装 Node.js

Node.js 是一个开源和跨平台的运行时环境，用于创建服务器端和网络应用程序。 Node.js 应用是用 JavaScript 编写的，可以在 macOS、Windows 和 Linux 上运行。

我们必须安装 Node.js 来执行我们的 gulp 任务。因此，在实施 gulp 之前下载并安装推荐版本的 Node.js。

将 Node.js 路径设置为环境变量

安装 Node.js 后，将其安装位置设置为环境变量中的路径。为此，打开运行 (Win + R) 并执行“rundll32 sysdm.cpl,EditEnvironmentVariables”。通过双击路径，这将在该打开的路径中打开环境变量。在 Edit environment variable 对话框中，单击 New 并添加 Node.js 的安装位置，默认为 C:\Program Files\nodejs。

2.安装NPM

Node Package Manager (NPM) 是 JavaScript 运行时环境 Node.js 的默认包管理器。它是一个命令行实用程序，用于在您的应用程序中安装、更新和卸载 Node.js 包。

在命令提示符下使用以下命令安装 NPM。

npm install -g npm

要检查是否已安装 Node.js 或 NPM，请执行以下命令。

Node.js: node --version

NPM version: npm --version

3. 创建 package.json 文件

package.json 是一个 JSON 文件，其中包含有关项目所需依赖项的信息。

通过使用命令提示符运行以下命令来创建 package.json 文件。

npm init -y

4.添加gulp.js文件

在 Visual Studio 上打开您的应用并右键单击启动项目。添加一个新项目（添加 -> 新项目）。

使用的 gulp 任务来改进 Web 开发过程

SCSS 到 CSS 转换器

Sassy 级联样式表 (SCSS) 是一个 CSS 预处理器，是 CSS 语法的扩展，也是语法很棒的样式表 (Sass) 的语法之一。它提供了许多功能，如变量创建、代码嵌套和样式文件导入。它减少了 CSS 开发时间。但普通浏览器不处理 SCSS 文件。因此，我们必须将 SCSS 文件转换为 CSS 才能使用它们。

我们将使用 gulp-sass 依赖项创建一个用于 SCSS 到 CSS 转换的 gulp 任务。使用命令提示符运行以下命令以添加此依赖项。

npm install sass gulp-sass --save-dev

注意：安装依赖项后，请确保恢复包。

将以下代码添加到 Gulpfile.js。

代码块
JavaScript
自动换行
复制代码
  
"use strict";
var gulp = require("gulp"),
sass = require('gulp-sass')(require('sass'));
gulp.task('sass-to-css', async function () {
  return gulp.src('./wwwroot/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./wwwroot/css'));
});
  
Scss to css converter watch:
gulp.task('sass-to-css:watch', function () {
    gulp.watch('./wwwroot/scss/**/*.scss', gulp.series('sass-to-css'));
});
复制成功

CSS 和 JS 文件缩小

通常，对于应用程序部署，我们必须将 CSS 和 JS 文件添加到捆绑配置中。使用捆绑配置文件，然后我们将缩小 CSS 和 JS 文件。

我们将使用依赖项为 CSS 和 JS 缩小创建一个 gulp 任务：

gulp-cssmin

gulp-terser

gulp-concat

gulp4-run-sequence

merge-stream

在命令提示符下运行以下命令以添加这些依赖项。

npm install gulp-cssmin gulp-terser gulp-concat gulp4-run-sequence merge-stream --save-dev

代码块
JavaScript
自动换行
复制代码
  
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
jsmin = require("gulp-terser"),
runSequence = require('gulp4-run-sequence'),
bundleconfig = require("./bundleconfig.json"),
merge = require("merge-stream");

const regex = { css: /\.css$/, js: /\.js$/ };

gulp.task('bundle-min', async function () {
      runSequence("min:js", "min:css");
});

gulp.task("min:js", function () {
   var tasks = getBundles(regex.js).map(function (bundle) {
       return gulp.src(bundle.inputFiles, { base: ".", allowEmpty: true })
              .pipe(concat(bundle.outputFileName))
              .pipe(jsmin())
              .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: ".", allowEmpty: true })
              .pipe(concat(bundle.outputFileName))
              .pipe(cssmin())
              .pipe(gulp.dest("."));
     });
     return merge(tasks);
});

function getBundles(regexPattern) {
   return bundleconfig.filter(function (bundle) {
      return regexPattern.test(bundle.outputFileName);
   });
}
复制成功

清理捆绑包

我们可以使用 Clean Bundle 任务清理缩小的 CSS 和 JS 文件。

使用 del 依赖项创建用于包清理的 gulp 任务。在命令提示符下运行以下命令以添加此依赖项。

npm install del --save-dev

代码块
JavaScript
自动换行
复制代码
  
"use strict";
var gulp = require("gulp"),
    del = require("del");

gulp.task("clean-bundle", function () {
    var files = bundleconfig.map(function (bundle) {
       return bundle.outputFileName;
    });
    return del(files);
});
复制成功

图像缩小

图像大小是影响网页速度的主要因素之一。我们尝试使用最小尺寸的图像。

您可以使用 image minify gulp 任务压缩大图像。使用 gulp-imagemin 依赖项创建用于包清理的 gulp 任务。在命令提示符下运行以下命令来安装此依赖项。

npm install gulp-imagemin --save-dev

代码块
JavaScript
自动换行
复制代码
  
"use strict";
var gulp = require("gulp"),
   imagemin = require('gulp-imagemin');

gulp.task('image-min', async function () {
   gulp.src('./wwwroot/images/*')
       .pipe(imagemin())
       .pipe(gulp.dest('./wwwroot/dist/images'));
});
复制成功

如何运行 gulp 任务

打开解决方案资源管理器，右键单击 gulpfile.js，然后选择任务运行器资源管理器。

要运行 gulp 任务，请双击任务或右键单击 gulp 任务并选择运行。

如何自动化 gulp 任务（任务绑定）

Visual Studio 有一个内置的任务运行器，旨在运行 gulp 任务。它有一个自动执行 gulp 任务的选项，因此我们可以根据任务使用情况和他们的需求来绑定它们。

要配置内置任务运行程序，请使用 Ctrl + Alt + Backspace 或从 Visual Studio 视图菜单（视图 -> 其他窗口）的其他窗口列表中选择任务运行程序。

任务运行器窗口将出现在 Visual Studio 的底部。在 Task Runner Explorer 中，您可以看到 gulp 任务的列表。现在，右键单击一个 gulp 任务并选择 Bindings。请参阅以下屏幕截图。

从以下绑定选项中选择一个：

After Build：绑定任务将在构建我们的应用程序后运行。

Before Build：绑定任务将在构建我们的应用程序之前运行。我们可以在其中添加以下任务：“clean-bundle”、“sass-to-css”、“bundle-min”。

Clean Build：绑定任务将在清理我们的应用程序时运行。我们可以在其中添加“Clean-bundle”任务。

Project Open：打开应用程序时将运行绑定任务。我们可以在其中添加“sass-to-css:watch”任务。

C# .NET
cv17151876