Fatal编程技术网
  • asp.net-mvc/
  • Asp.net mvc 如何将Gulp与Razor和Layout.cshtml一起使用

Asp.net mvc 如何将Gulp与Razor和Layout.cshtml一起使用

asp.net-mvc asp.net-mvc-4 razor gulp

Asp.net mvc 如何将Gulp与Razor和Layout.cshtml一起使用,asp.net-mvc,asp.net-mvc-4,razor,gulp,Asp.net Mvc,Asp.net Mvc 4,Razor,Gulp,在MVC模板文件中使用Gulp的最佳方法是什么？问题是my layout.cshtml文件包含指向JavaScript文件的链接，gulp需要修改这些文件以指向优化的缩小文件。问题是，我看不出如何使用gulp修改这些文件，以指向优化的文件进行调试和发布，因为源文件需要是目标文件，而机制需要与TFS一起工作。我最好的想法是使用捆绑机制。在投入时间之前，我想看看是否有更简单的选择。这是我的解决方案，请告诉我是否有更好的方法。 我跑： 然后我修改了BundleConfig.cs以包括 var myBu

在MVC模板文件中使用Gulp的最佳方法是什么？问题是my layout.cshtml文件包含指向JavaScript文件的链接，gulp需要修改这些文件以指向优化的缩小文件。问题是，我看不出如何使用gulp修改这些文件，以指向优化的文件进行调试和发布，因为源文件需要是目标文件，而机制需要与TFS一起工作。我最好的想法是使用捆绑机制。在投入时间之前，我想看看是否有更简单的选择。

这是我的解决方案，请告诉我是否有更好的方法。 我跑：

然后我修改了BundleConfig.cs以包括

var myBundle = new ScriptBundle("~/bundle_virtual_path").Include("~/Scripts/CombinedFile.js");
myBundle.Transforms.Add(new HashCacheTransform());
bundles.Add(myBundle);

 @{    
    if (HttpContext.Current.IsDebuggingEnabled)
    {
        <script src = "~/Scripts/App/File1.js" ></script>
        <script src = "~/Scripts/App/File2.js" ></script>
    }
     else
    {
         @Scripts.Render("~/bundle_virtual_path");
    }
 }
然后我修改了_Layout.cshtml以包括

var myBundle = new ScriptBundle("~/bundle_virtual_path").Include("~/Scripts/CombinedFile.js");
myBundle.Transforms.Add(new HashCacheTransform());
bundles.Add(myBundle);

 @{    
    if (HttpContext.Current.IsDebuggingEnabled)
    {
        <script src = "~/Scripts/App/File1.js" ></script>
        <script src = "~/Scripts/App/File2.js" ></script>
    }
     else
    {
         @Scripts.Render("~/bundle_virtual_path");
    }
 }
Gulp文件侦听功能应该附加到Project Open事件中

我找到了一个解决方案，但没有将.net捆绑带到图片中

使用gulp插件gulp rev和名为FileTagger的nuget包

大口喝

var gulp = require('gulp'),
     rimraf = require("rimraf"),
     concat = require("gulp-concat"),
     cssmin = require("gulp-cssmin"),
     uglify = require("gulp-uglify"),
     filter = require("gulp-filter"),
     rename = require("gulp-rename"),
     rev = require('gulp-rev');

var paths = {};
paths.jsSource = mainBowerFiles();
paths.baseReleaseFolder = "app";
///these names get alter by rev()
paths.baseJSReleaseFile = "site.min.js";

gulp.task("min:js", function () {
var jsFilter = filter('**/*.js', { restore: true });
return gulp
    .src(paths.jsSource)
    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile))
    .pipe(rev())
    .pipe(gulp.dest("."))
    .pipe(jsFilter.restore);
});
_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>   
@FileTagger.Render.Script("~/app/site-*.min.js")
</head>
    <body>@RenderBody()</body>
</html>


应用程序
@FileTagger.Render.Script（“~/app/site-*.min.js”）
@RenderBody（）