Skip to content

Instantly share code, notes, and snippets.

@spboyer

spboyer/_Layout.cshtml

Created March 6, 2015 18:41
Show Gist options
  • Save spboyer/96339ce687b0c79b8258 to your computer and use it in GitHub Desktop.
Save spboyer/96339ce687b0c79b8258 to your computer and use it in GitHub Desktop.
Download ZIP
Gulp file that installs bower dependencies, moves main files to wwwroot\lib and uses gulp-inject to inject resources into _Layout.cshtml
Raw
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<!-- inject:css -->
<link rel="stylesheet" href="/lib/bootstrap-touch-carousel.css">
<link rel="stylesheet" href="/lib/bootstrap.css">
<!-- endinject -->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<!-- Login, Register Links removed until EF7 full supported for xplat -->
<!--@await Html.PartialAsync("_LoginPartial")-->
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<!-- inject:js -->
<script src="/wwwroot/lib/bootstrap-touch-carousel.js"></script>
<script src="/wwwroot/lib/bootstrap.js"></script>
<script src="/wwwroot/lib/hammer.js"></script>
<script src="/wwwroot/lib/jquery.js"></script>
<script src="/wwwroot/lib/jquery.validate.unobtrusive.js"></script>
<script src="/wwwroot/lib/jquery.validate.unobtrusive.min.js"></script>
<!-- endinject -->
@RenderSection("scripts", required: false)
</body>
</html>
Raw
gulpfile.js
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var $ = require('gulp-load-plugins')({
lazy: true
});
var client = '';
var layoutSource = 'Views/Shared/'
var targetDir = 'wwwroot/lib';
var config = {
client: client,
layoutSource: layoutSource,
index: layoutSource + '_Layout.cshtml',
css: [
targetDir + '/**/*.css'
],
js: [
targetDir + '/**/*.js'
]
}
gulp.task('bower', function () {
return $.bower()
});
gulp.task('default', ['bower'], function () {
return gulp.src(mainBowerFiles())
.pipe(gulp.dest("wwwroot/lib"));
});
gulp.task('inject', function () {
return gulp
.src(config.index)
.pipe($.inject(gulp.src(config.css), {
ignorePath: 'wwwroot'
}))
.pipe($.inject(gulp.src(config.js)))
.pipe(gulp.dest(config.layoutSource));
});
Raw
package,json
{
"version": "0.0.0",
"name": "TestWebApp",
"devDependencies": {
"del": "^1.1.1",
"gulp": "^3.8.10",
"gulp-bower": "0.0.10",
"gulp-inject": "^1.2.0",
"gulp-load-plugins": "^0.8.1",
"main-bower-files": "^2.5.0"
}
}
@johnpapa
Copy link

only big change i suggest is using wiredep instead of main bower files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment