Gulp

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Gulp представляет инструмент разработки, который использует язык JavaScript и позволяет автоматизировать процесс разработки. В частности, Gulp можно использовать для минификации и бандлинга (объединения) скриптов и ряда других задач.

Для работы с Gulp создадим новый проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller). По умолчанию в ASP.NET Core для бадлинга и минификации применяется встроенный инструмент BundlerMinifier. Однако мы можем использовать и другие инструменты, в том числе и Gulp.

По умолчанию проект ASP.NET Core не имеет поддержки Gulp, и нам ее надо добавить. Gulp распространяется как модуль Node.js, поэтому вначале необходимо добавить поддержку npm. Для этого добавим в проект новый элемент npm Configuration File, который будет представлять конфигурационный файл npm и который назовем package.json:

Изменим этот файл следующим образом:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.2.0",
    "gulp-uglify": "3.0.2",
    "rimraf": "3.0.0"
  }
}

Поскольку функциональность Gulp нам нужна только для разработки - минимизировать и объединять скрипты и стили, то соответствующие пакеты помещаем в узел "devDependencies".

Сохраним файл, и в узле Dependencies/npm мы увидим добавленные зависимости:

Затем нам надо добавить файл конфигурации для самого Gulp. Для этого добавим в корень проекта javascript-файл, который назовем gulpfile.js:

Определим в этом файле следующее содержимое:

"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", gulp.series(["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", gulp.series(["min:js", "min:css"]));

Файл gulpfile.js содержит код JavaScript, который определяет набор задач для менеджера gulp. В начале файла идет вызов функций require, которые регистрируют необходимые модули Node. Это все те модули, которые мы можем увидеть в узле Dependencies/npm (gulp, rimraf, gulp-concat, gulp-cssmin и gulp-uglify). Для каждого модуля определяется своя переменная:

"use strict";

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

• gulp: основной модуль gulp

• rimraf: модуль для удаления

• gulp-concat: модуль для соединения файлов

• gulp-cssmin: модуль минимизации файлов css

• gulp-uglify: модуль минимизации файлов javascript с помощью утилиты UglifyJS

Затем дополнительно определяются пути для файлов CSS и JavaScript:

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";

Параметр paths.js указывает на путь к обрабатываемым js-файлам, а paths.minJs определяет маску для минимизированных файлов js.

paths.css аналогично указывает на обрабатываемые файлы css, а paths.minCss - в какие файлы они будут минимизироваться.

paths.concatJsDest определяет путь к файлу, в который будут объединяться минимизированные js-файлы. Параметр paths.concatCssDest представляет аналогичную опцию для css-файлов.

После этого определяются задачи gulp. По умолчанию определено шесть задач:

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

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

gulp.task("clean", gulp.series(["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", gulp.series(["min:js", "min:css"]));

• clean:js: задача, которая использует модуль rimraf для удаления ненужных файлов javascript

• clean:css: задача, которая использует модуль rimraf для удаления ненужных файлов css

• clean: задача, которая вызывает две ранее определенные задачи clean:js и clean:css

• min:js: задача, которая минифицирует файлы javascript и объединяет их в один файл

• min:css: задача, которая минифицирует файлы css и объединяет их в один файл

• min: задача, которая вызывает две предыдущие задачи min:js и min:css

Причем все задачи будут выполняться именно в том порядке, в котором они объявлены. Каждая задача использует ряд встроенных функций Gulp:

• task: определяет задачу. Имеет следующий синтаксис gulp.task(name[, deps], fn) { }, где name - имя задачи, deps - набор задач, которые будут выполняться перед текущей задачей, и fn - функция, собственно представляющая код задачи

• run: имеет следующий синтаксис gulp.run(tasks) { } и представляет набор выполняемых задач

• watch: имеет синтаксис gulp.watch(glob [, opts], tasks) { }, следит за изменениями в файлах, соответствующих параметру glob, и при наличии изменений выполняет задачу.

• src: имеет синтаксис gulp.src(globs[, options]) и предоставляет файлы, которые соответствуют параметру glob. А параметр options устанавливает дополнительные опции для сопоставления файлов

• dest: имеет следующий синтаксис gulp.dest(path[, options]) { }, с помощью параметра path устанавливает путь к создаваемым файлам

Теперь запустим эти задачи. Для этого нажмем на файл gulpfile.js правой кнопкой мыши и в контекстном меню выберем пункт Task Runner Explorer:

И внизу Visual Studio нам откроется соответствующее окно:

В этом окне отображатся все определенные нами задачи из файла gulpfile.js. Если они не отображаются, то надо нажать на кнопку обновления.

Нажмем в этом окне правой кнопкой мыши на задачу min и в появившемся контекстном меню выберем Run:

После выполнения этой задачи в папках, где хранятся файлы стилей и скриптов приложения, появятся минимизированные версии файлов.

С помощью дополнительных инструментов в Visual Studio мы можем настроить выполнение задач Gulp. Так, опять же нажмем на задачу min и в контекстном меню выберем Bindings -> Before Build:

Данная опция позволит автоматически запускать задачи перед построением проекта. Либо при желании мы можем установить одну из других опций: After Build, Clean и Project Open, либо выбрать сразу несколько опций.