code listings for the blog post /2017/01/19/bundling-in-net-core-mvc-applications-with-gulp

gulp-task-formats.js

// individual task
gulp.task("name:type", function (arguments) {
  // steps that the task should take
});

// group of tasks
gulp.task("name", ["childTaskOneName:type", "childTaskTwoName:type"]);

gulpfile-defining-tasks.js

gulp.task("clean:js", function (cb) {
  rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
  rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
  return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
    .pipe(concat(paths.concatJsDest))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
  return gulp.src([paths.css, "!" + paths.minCss])
    .pipe(concat(paths.concatCssDest))
    .pipe(cssmin())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);
gulp.task('default', ['min']);
gulp.task('watch', function() {
    gulp.watch(paths.css, ['min:css']);
    gulp.watch(paths.js, ['min:js']);
});

gulpfile-setup.js

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
  rimraf = require("rimraf"),
  concat = require("gulp-concat"),
  cssmin = require("gulp-cssmin"),
  uglify = require("gulp-uglify");

var paths = {
  webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulpfile.js

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
  rimraf = require("rimraf"),
  concat = require("gulp-concat"),
  cssmin = require("gulp-cssmin"),
  uglify = require("gulp-uglify");

var paths = {
  webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
  rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
  rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
  return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
    .pipe(concat(paths.concatJsDest))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
  return gulp.src([paths.css, "!" + paths.minCss])
    .pipe(concat(paths.concatCssDest))
    .pipe(cssmin())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);
gulp.task('default', ['min']);
gulp.task('watch', function() {
    gulp.watch(paths.css, ['min:css']);
    gulp.watch(paths.js, ['min:js']);
});

package.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"
  }
}

shell.sh

npm install -D gulp
npm install -D gulp-cli
gulp
[14:19:53] Using gulpfile path/to/gulpfile.js
[14:19:53] Starting 'min:js'...
[14:19:53] Starting 'min:css'...
[14:19:53] Finished 'min:js' after 70 ms
[14:19:53] Finished 'min:css' after 84 ms
[14:19:53] Starting 'min'...
[14:19:53] Finished 'min' after 79 μs
[14:19:53] Starting 'default'...
[14:19:53] Finished 'default' after 109 μs
gulp default
[14:19:53] path/to/gulpfile.js
[14:19:53] Starting 'min:js'...
[14:19:53] Starting 'min:css'...
[14:19:53] Finished 'min:js' after 70 ms
[14:19:53] Finished 'min:css' after 84 ms
[14:19:53] Starting 'min'...
[14:19:53] Finished 'min' after 79 μs
[14:19:53] Starting 'default'...
[14:19:53] Finished 'default' after 109 μs
gulp watch
[14:18:32] path/to/gulpfile.js
[14:18:32] Starting 'watch'...
[14:18:32] Finished 'watch' after 15 ms
[14:27:36] Starting 'min:js'...
[14:27:36] Finished 'min:js' after 8.46 ms
gulp min:css
[14:20:26] Using gulpfile path/to/gulpfile.js
[14:20:26] Starting 'min:css'...
[14:20:26] Finished 'min:css' after 64 ms

tasks.json

{
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": ["--no-color"],
	"showOutput": "always"
}