gulpfile.js in File-New Project template needs to be improved

[dpaquette]

A few things specifically that should be changed.

1. The Copy task needs to return a stream. Currently it returns nothing which is bad practice and would make it impossible to extend the gulpfile. For example, I would not be able to create a task that runs in sequence after the Copy task. Consider doing something along the lines of the running-task-steps-per-folder recipe (https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md).

2. Is this eval("var project = " + fs.readFileSync("./project.json")); required? When I write it as var project = fs.readFileSync("./project.json"); it still seems to work.

Overall though, I think the file could be improved. When I talk to people in the community about using bower and tasks runners in ASP.NET, one of the big complaints is about all the manual wiring that is needed. It would be really nice if we could design a default gulpfile.js file such that after installing a new bower package, the required files would be automatically copied to the wwwroot/lib folder. If we could do that, we would solve 90% of the problems people are having with this new approach. I know that it won't work in every situation, but we should be able to design something that works most of the time.

Some variation of what is presented in this blog should work (http://blog.simontimms.com/2015/01/22/getting-bower-components-in-gulp/).

I would be happy to help with this but I don't think the project templates are in a public repo. Is there any way for us to contribute to the project templates?

[dpaquette]

For reference, I am referring to the following gulpfile.js that is created by File - New Project:

/// <binding Clean='clean' />

var gulp = require("gulp"),
  rimraf = require("rimraf"),
  fs = require("fs");

eval("var project = " + fs.readFileSync("./project.json"));

var paths = {
  bower: "./bower_components/",
  lib: "./" + project.webroot + "/lib/"
};

gulp.task("clean", function (cb) {
  rimraf(paths.lib, cb);
});

gulp.task("copy", ["clean"], function () {
  var bower = {
    "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
    "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
    "hammer.js": "hammer.js/hammer*.{js,map}",
    "jquery": "jquery/jquery*.{js,map}",
    "jquery-validation": "jquery-validation/jquery.validate.js",
    "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
  }

  for (var destinationDir in bower) {
    gulp.src(paths.bower + bower[destinationDir])
      .pipe(gulp.dest(paths.lib + destinationDir));
  }
});

[glen-84]

Alternatively, the template could switch to using JSPM, and then all packages would be under wwwroot without the need to move them first. As a bonus, the request URLs are versioned, like /jspm_packages/github/rstacruz/nprogress@0.1.6.js.

[Eilon]

@madskristensen @rustd @DamianEdwards

[stimms]

Moving to JSPM seems a bit too opinionated to me but I would agree with all of @dpaquette's points. I'd also suggest that we might consider including js minification as part of the default gulpfile. It is extremely common and the structure of the file with minification included would not change dramatically if a user wanted to swap in a different minification tool.

[devmondo]

jspm support is so essential, it is becoming the de facto for client side management of libs, at least include support for that :)

[MisterJames]

I'm on the same page here, and if we're talking about improvements I'd like to add a bit about the importance of having an out-of-box tool and pattern in place for the bundling & minification.

@Eilon I know you've said that we'll need to rely on gulp/grunt/whichever for this, which is cool, but I think that is should be part of this template. It may end up being opinionated by means of having to select a specific library to do the lifting, but like in other parts of the project templates, a link to a post on http://asp.net/ would suffice to explain what's going on and how to swap out the libraries for something of your own choosing.

Bundling and minification are not going away, even though they are being dropped from ASP.NET. My feeling is that if we're going to be asking devs to start mucking around with gulp tasks, we may as well give them a starting point. Having a task exported that is visible in the Task Runner gives a much lower jump-off point.

[Eilon]

@MisterJames indeed. Pinging @madskristensen @rustd @DamianEdwards again because I vaguely recall that we might have just added some better content on this for the template to show how it's done... but those three guys would have to confirm.

[RehanSaeed]

+1

The default gulpfile is very spartan. My suggestions:

1 - Add CSS minification and concatenation. I am using LESS too but that may be too opinionated.

minifyCss = require("gulp-minify-css")
concat = require("gulp-concat")

2 - Add JavaScript concatenation and minification.

uglify = require('gulp-uglify')

3 - Add image compression:

imagemin = require("gulp-imagemin")
size = require("gulp-size")
gulp.task("compress-images", [], function () {
    var sources = [
        paths.images + "**/*.{png,jpg,jpeg,gif,svg}"
    ];
    gulp.src(sources)
        .pipe(imagemin())
        .pipe(gulp.dest(paths.images))
        .pipe(size());
});

4 - Add a watch to a folder containing an empty css and js file for the site.

[guardrex]

👍 @MisterJames and I hope to get some help with HTML minification, too. Right now, it's hand-to-hand combat (e.g., aspnet/Razor#61 (comment) & aspnet/Razor#423).

[ielcoro]

+1

Having simple minification and bundling in a template would be nice. Also, being opinionated here is a good thing, the template could serve as a sample for some hard decisions the developer needs to do when starting a new project, like do I keep the minified files along source ones inside wwwroot? I copy them over a dist directory? How I deal with testing the release version now that is outside the wwwroot directory? How all of this fits with the publish wizard? and so on...

[RehanSaeed]

Thanks to @dpaquette, I've made improvements to my gulpfile.js.

Only the absolute minimum gets placed in the wwwroot folder. I'm using LESS but you could just as easily use SASS by switching from gulp-less to gulp-sass. I've also added error handling but I'm not entirely certain I've done that correctly.

CSS and JavaScript is concatenated and minified with .map source files included. I also log the sizes of the files before and after minification to the console. Everything is fully commented with links to the Gulp packages too.

I noticed a lot of examples containing duplicate src, concat, minify, dest steps just for slightly different use cases. I have experimented with using gulp-if to get rid of the duplicate code e.g. If the file extension is CSS rather than LESS, don't run gulp-less. I think that is a good approach to take in those situations. All the tasks start with an array of source files which can be easily added to and extended.

[IlyaKhD]

So, to make it clear - what is the recommended way for bundling and minification?

For now project template provides B&M task for user static (I mean .js and .css files) placed in wwwroot/js directory, but what about bower packs, placed in wwwroot/lib? These static files are hosted 'as is', without any compression or combining.

[RehanSaeed]

I think the default you get from File->New Project, where bower packages are dumped in wwwroot is the simplest solution but the wrong one for a real production site. I think this is kind of admitted in this blog post by Scott Hanselman where he says:

At some point you'll want to graduate to a more formal process and want to move your bower client libraries back out
Scott Hanselman

He then goes on to show a better approach which is what the project templates originally did, which was to have a bower_components folder and copy only the required files into the wwwroot.

In my ASP.NET MVC Boilerplate project template, I've gone with this more 'formal' approach right out of the box.

[aspnet-hello]

This issue is being closed because it has not been updated in 3 months.

We apologize if this causes any inconvenience. We ask that if you are still encountering this issue, please log a new issue with updated information and we will investigate.