In a typical modern web app, the build process might.
- Bundle and minify JavaScript and CSS files.
- Run tools to call the bundling and minification tasks before each build.
- Compile LESS or SASS files to CSS.
- Compile CoffeeScript or TypeScript files to JavaScript.
A task runner is a tool which automates these routine development tasks and more. Visual Studio provides built-in support for two popular JavaScript-based task runners: Gulp and Grunt.
Gulp
Gulp is a JavaScript-based streaming build toolkit for client-side code. It's commonly used to stream client-side files through a series of processes when a specific event is triggered in a build environment. For instance, Gulp can be used to automate bundling and minification or the cleansing of a development environment before a new build.
A set of Gulp tasks is defined in gulpfile.js. The following JavaScript includes Gulp modules and specifies file paths to be referenced within the forthcoming tasks:
-
- "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";
The above code specifies which Node modules are required. The require function imports each module so that the dependent tasks can utilize their features. Each of the imported modules is assigned to a variable. The modules can be located either by name or path. In this example, the modules named gulp, rimraf, gulp-concat, gulp-cssmin, and gulp-uglify are retrieved by name. Additionally, a series of paths are created so that the locations of CSS and JavaScript files can be reused and referenced within the tasks.