MVC6 new minification and bundling with Bower/NPM

Question

I started getting up to date with the ASP.NET 5 and MVC 6, and I see a lot of internet posts about Bower VS NPM.

• The default started MVC template however uses both , is this required for the taskrunner (gulp) to work or is there another reason?

• Second question is about the resource path, in MVC < 6 you could declare a relative path to research the minified/bundled js/css. This way each MVC View would have its own path to its own specific js/css. How can I do this with gulp?

• In MVC < 6 the js/css would NOT minify when debug enabled (as default setting), so it remains readable. I see the option to use an if-like statement on the environment variable like

  environment names="Development">script path

and another one for production in the view. This seems very cumbersome, is there a simple solution for not minifying in debug instead of having to list all paths twice (one minified and one not)?

Answer 1

Have one version of watch minify your js files and one that doesn't. Either way all of your project paths can just point to the built js file to prevent having to switch back and forth for dev or prod. You would need to break the minify stuff out of the 'scripts' task below and create a task that just does that.

//Concatenate & Minify JS
gulp.task('minscripts', function () {
    return gulp.src(config.alljs, { base: 'public/' })
        .pipe($.concat('all.js'))
        .pipe(gulp.dest('_build'))
        .pipe($.rename('all.min.js'))
        .pipe($.uglify())
        .pipe(gulp.dest(config.build));
});

gulp.task('scripts', function () {
    return gulp.src(config.alljs, { base: 'public/' })
        .pipe($.concat('all.js'))
        .pipe(gulp.dest('_build'))
        .pipe($.rename('all.min.js'))
        .pipe(gulp.dest(config.build));
});

gulp.task('watchWith', function () {
    gulp.watch('public/app/views/*.js', ['lint', 'minscripts']); //<- runs 'scripts' here
    gulp.watch('public/css/*.less', ['less']);
});

gulp.task('watchWithout', function () {
    gulp.watch('public/app/views/*.js', ['lint', 'scripts']);
    gulp.watch('public/css/*.less', ['less']);
});