在 ASP.NET 5 项目中使用 Visual Studio 2015 安装 Gulp 和 Bower。

• 下载 GulpBowerSliderProject.zip - 11.6 MB

引言

随着 Visual Studio 2015 和 ASP.NET 5 的发布，开发人员能够在其项目中包含一些 JavaScript 工具包，如 Gulp 和 Bower，这使得开发工作流程变得非常轻松。

本文内容

1. 什么是 Gulp。
2. 什么是 Bower。
3. 演示滑块项目。

什么是 Gulp

简而言之，Gulp 是一个任务运行器工具包，用于执行一些重复性任务，如文件清理、文件合并、文件压缩、文件丑化等。它基于 NodeJS 构建，但也被 Java、.Net、PHP 等其他平台使用。

什么是 Bower

Bower 是一个包管理工具。它管理项目中使用的包及其依赖项。它会自动安装 bower.json 文件中配置的包到项目中。

演示滑块项目

演示项目展示了如何在 Asp.Net 5 项目中安装 Gulp 和 Bower。这里使用 KheyaJQSlider 包来实现滑动功能，该包已发布在 GitHub 上。这里使用 Visual Studio 2015 社区版作为 IDE。

步骤如下。

1. 使用 Asp.Net 5 Empty 模板创建一个新项目。下图显示了模板列表。
2. 新创建的解决方案如下所示。
   

   这里的 wwwroot 文件夹包含需要发布的​​文件和文件夹。Dependencies 文件夹包含 package.json 文件中配置的 node 包。这些包尚未配置和下载。project.json 文件包含 asp.net 服务器端包的配置。Startup 类包含 HTTP 请求管道的配置和其他 asp.net 所需的服务器端配置。

3. 要配置项目中所需的 NodeJS JavaScript 包，请在解决方案中添加 package.json 配置文件。下图清晰地说明了这一点。

4. 现在，将 package.json 文件的 devDependencies 部分更改为以下 JSON 对象。

       "devDependencies": {
           "gulp": "3.8.11",
           "gulp-concat": "2.5.2",
           "gulp-cssmin": "0.1.7",
           "gulp-uglify": "1.2.0",
           "rimraf": "2.2.8"
       }
   

   文件保存后，Visual Studio 会自动下载配置的包。下方显示了下载了包的解决方案资源管理器。

   
5. 要在项目中安装 Gulp，请在项目中添加 gulp 配置文件 gulpfile.js。下图清晰地说明了这一点。

   gulpfile 的顶部声明了 gulp 所需的 nodejs 包。

   var gulp = require("gulp");
   var gulp_clean = require("rimraf");
   var gulp_concat = require("gulp-concat");
   var gulp_cssmin = require("gulp-cssmin");
   var gulp_uglify = require("gulp-uglify");
   

   "rimraf" 包用于删除现有文件。"gulp-concat" 包用于连接声明的文件。"gulp-cssmin" 包用于压缩声明的 CSS 文件。"gulp-uglify" 包用于优化 JavaScript 文件。

6. gulpfile 中声明了一些需要经常执行的任务，如下所示。

   gulp.task("CleanJs", function (cb) {
       gulp_clean(gulpPaths.concatJsDest, cb);
   });
   
   gulp.task("CleanCss", function (cb) {
       gulp_clean(gulpPaths.concatCssDest, cb);
   });
   
   gulp.task('CopyJs', function () {
       gulp.src(gulpPaths.copyJs)
       .pipe(gulp.dest('./wwwroot/js'));
   });
   
   gulp.task('CopyCss', function () {
       gulp.src(gulpPaths.copyCss)
       .pipe(gulp.dest('./wwwroot/css'));
   });
   

7. 下面声明了用作源和目标的 gulp 路径。

   var gulpPaths = {
       webroot: "./wwwroot/"
   };
   
   gulpPaths.copyCss = ['./lib/font-awesome/css/*.css', './lib/KheyaJQSlider/css/*.css'];
   gulpPaths.copyJs = ['./lib/jquery/dist/*min.js', './lib/KheyaJQSlider/js/*.js'];
   gulpPaths.jsSrc = gulpPaths.webroot + "js/**/*.js";
   gulpPaths.minJsSrc = gulpPaths.webroot + "js/**/*.min.js";
   gulpPaths.cssSrc = gulpPaths.webroot + "css/**/*.css";
   gulpPaths.minCssSrc = gulpPaths.webroot + "css/**/*.min.css";
   gulpPaths.concatJsDest = gulpPaths.webroot + "js/site.min.js";
   gulpPaths.concatCssDest = gulpPaths.webroot + "css/site.min.css";
   

   gulpfile 中声明的任务使用这些目录来复制、压缩和合并 CSS 和 JS 文件。

   这里 KheyaJQSlider 是一个上传到 GitHub 的 JavaScript 滑块包，可以使用 Bower 下载。它的依赖项是 font-awesome 和 jquery。我们将在本文后面了解如何使用 Bower 安装此包。

8. 现在右键单击 gulpfile.js 并选择 Task Runner Explorer。Task Runner Explore 是 Visual Studio 的任务管理工具。单击刷新按钮，它将显示已配置的 gulp 任务。

   

   通过右键单击任务然后单击“运行”，可以运行一个任务。

   这里 "RunAll" 任务声明如下：

   gulp.task("RunAll", ["RunClean", "RunMinJsCss"]);
   

   它运行了上面声明的另外两个任务。

   gulp.task("RunClean", ["CleanJs", "CleanJs"]);
   gulp.task("RunMinJsCss", ["ConcatAndMinJs", "ConcatAndMinCss"]);
   
   

   "CleanJs", "CleanJs", "ConcatAndMinJs", "ConcatAndMinCss" 是单独的任务。

9. 现在，要将 Bower 安装到您的项目中，请在解决方案中添加 bower.json 文件。下图显示了这一点。
   

10. 将 bower 文件的 dependencies 属性替换为以下内容。

    "dependencies": {
            "KheyaJQSlider": "*"
        }
    

    保存文件后，Bower 将自动下载配置的包，并下载其依赖项。

    Bower 还需要进行一项更改：展开 bower.json 文件并打开具有 .bowerrc 扩展名的文件，然后将目录更改为仅 lib。现在它会将下载的包保存在解决方案文件夹下的 lib 文件夹中。下图显示了这一点。

    
11. 现在从 Task Runner Explorer 运行 "RunCopy" 任务。它会将 CSS 和 JS 文件从 lib 文件夹复制到 wwwroot 文件夹。下图显示了这一点。
    
12. 现在将 index.html 和 images 文件夹从 KheyaJQSlider 包的 src 文件夹复制到 wwwroot 文件夹。下图显示了这一点。
    
13. 打开 index 页面并更改 CSS 和 JS 文件的链接。
14. 现在右键单击 index 页面并在浏览器中查看。浏览器将显示 "Hello World!"。这是因为项目尚未配置为渲染 html 页面。它正在渲染 Startup 类中 Configure 函数中声明的默认文本。

    public void Configure(IApplicationBuilder app)
    {
         app.UseIISPlatformHandler();
         app.Run(async (context) =>
         {
             await context.Response.WriteAsync("Hello World!");
         });
    }
    

15. 为了使静态文件正常工作，请在 project.json 文件中添加一个新的 .net 包。

    "dependencies": {
            "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
            "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
            "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
        }
    

    最后一个需要下载。保存更改后，新添加的包将自动下载。

16. 现在打开 Startup 文件并将 Configure 函数替换为以下语句。

    public void Configure(IApplicationBuilder app)
    {
          app.UseIISPlatformHandler();
          app.UseStaticFiles();
    }
    

17. 最后再次运行 index 页面，现在您可以看到滑块。图像如下所示。
    

结论

总之，可以说 Gulp 是一个有用的工具，可以管理每次构建之前需要完成的重复性任务。它节省了大量的部署时间，并使开发变得容易。另一方面，Bower 是一个包管理工具，可以轻松地管理项目中的包及其依赖项。