Использование Gulp

Erik Reitan, Scott Addie, Daniel Roth

В создании обычного современного веб приложения процесс сборки может:

  • Связывать и минимизировать JavaScript и CSS файлы.
  • Запускать инструменты, чтобы вызывать задачи по связыванию и минимизации.
  • Компилировать LESS или SASS файлы в CSS.
  • Компилировать CoffeeScript или TypeScript файлы в JavaScript.

task runner - это инструмент, который автоматизирует данные задачи. Visual Studio 2015 предлагает встроенную поддержку для популярных task runner: Gulp и Grunt.

Введение в Gulp

Gulp - это инструментарий для работы с кодом со стороны клиента. Он обычно используется для передачи файлов со стороны клиента через серию процессов, когда вызывается конкретное событие в среде build. Некоторые преимущества использования Gulp заключаются в автоматизации общих задач по разработке, в упрощении повторяющихся задач и уменьшении временных затрат на разработку. Например, Gulp может использоваться для автоматизации bundling and minification или для очистки среды разработки перед новой сборкой.

Шаблон ASP.NET Core Web Application помогает вам начать создавать новое веб приложение в Visual Studio. Он содержит базовый функционал, представляющий различные аспекты ASP.NET. В шаблон также включен Node Package Manager (npm) и Gulp, что упрощает связывание и минимизацию.

Примечание

Вам не обязательно нужен шаблон ASP.NET Core Web Application или Visual Studio, чтобы реализовать связывание и минимизацию. Например, вы можете создать ASP.NET проект, используя Yeoman, отправить его на GitHub, склонировать на Mac, а затем связать и минимизировать проект.

Если вы создаете веб проект с помощью шаблона ASP.NET Core Web Application, Visual Studio включает пакет Gulp.js npm, файл gulpfile.js и набор Gulp зависимостей. Пакет npm содержит все начальные реквизиты для запуска Gulp задач в проекте Visual Studio. Файл gulpfile.js определяет набор Gulp задач, которые можно запускать из окна Task Runner Explorer в Visual Studio. В разделе devDependencies файла package.json определены зависимости, которые нужны именно для разработки. Эти зависимости не разворачиваются с приложением. Вы можете добавить новые зависимости в devDependencies и сохранить файл:

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8"
  }
}

После добавления новой пары имя-значение в devDependencies и сохранения файла Visual Studio скачает и установит соответствующую версию пакета. В Solution Explorer эти пакеты можно найти в Dependencies > npm.

Задачи по запуску Gulp в Visual Studio

Набор задач по запуску Gulp определен в gulpfile.js. Эти задачи удаляют и минимизируют CSS и JavaScript файлы. Следующий JavaScript из первой части gulpfile.js включают модули Gulp и указывает пути к файлам, на которые будут ссылаться будущие задачи:

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

В коде сверху показано, какие Node модули требуются. Функция require импортирует каждый модуль, так что задачи могут использовать их функционал. Каждый импортируемый модуль присваивается переменной. Модули размещаются по имени или пути. В данном случае модули gulp, rimraf, gulp-concat, gulp-cssmin и gulp-uglify извлекаются по имени. Кроме того, здесь создаются пути, так что CSS и JavaScript файлы можно заново использовать внутри задач. В следующей таблице представлены описания модулей, включенных в gulpfile.js.

Имя модуля Описание
gulp Система сборки Gulp. См. gulp.
rimraf Модуль удаления Node. См. rimraf.
gulp-concat Модуль, который соединяет файлы, основываясь на символе новой строки операционной системы. См. gulp-concat.
gulp-cssmin Модуль, уменьшающий CSS файлы. См. gulp-cssmin.
gulp-uglify Модуль, уменьшающий .js файлы, с помощью инструментария UglifyJS. См. gulp-uglify.

После импортирования требуемых модулей в gulpfile.js можно указать задачи. Visual Studio 2015 регистрирует шесть задач, представленных в gulpfile.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"]);

Вот описание этих задач:

Задача Описание
clean:js Задача использует модуль удаления Node rimraf, чтобы удалить минимизированную версию файла site.js.
clean:css Задача использует модуль удаления Node rimraf, чтобы удалить минимизированную версию файла site.css.
clean Задача вызывает задачу clean:js, за которой следует задача clean:css.
min:js Задача, которая минимизирует и объединяет .js файлы внутри папки js. Файлы .min.js исключаются.
min:css Задача, которая минимизирует и объединяет .css файлы внутри папки css. Файлы .min.css исключаются.
min Задача вызывает задачу min:js, за которой следует задача min:css.

Запуск задач по умолчанию

Если вы еще не создали новое веб приложение, создайте проект ASP.NET Web Application в Visual Studio.

  1. Выберите File > New > Project. Отображается диалоговое окно New Project.

    ../_images/01-NewProjectDB.png
  2. Выберите шаблон ASP.NET Web Application, укажите имя проекта и нажмите OK.

  3. В диалоговом окне New ASP.NET Project выберите шаблон Web Application из ASP.NET 5 Templates и нажмите OK.

  4. В Solution Explorer кликните правой клавишей мышки по gulpfile.js и выберите Task Runner Explorer.

    ../_images/02-SolutionExplorer-TaskRunnerExplorer.png

    Task Runner Explorer показывает список задач Gulp. В шаблоне по умолчанию ASP.NET 5 Web Application в Visual Studio 2015 есть шесть задач из gulpfile.js.

    ../_images/03-TaskRunnerExplorer.png
  5. Под Tasks в Task Runner Explorer кликните правой клавишей мышки по clean и выберите Run из вплывающего меню.

    ../_images/04-TaskRunner-clean.png

Task Runner Explorer создаст новую вкладку clean и выполнит соответствующую clean задачу, поскольку она определена в gulpfile.js.

  1. Далее, кликните правой клавишей по задаче clean и выберите Bindings > Before Build.

    ../_images/05-TaskRunner-BeforeBuild.png

    Опция связывания Before Build делает так, что задача clean запускается автоматически перед каждой сборкой проекта.

Стоит отметить, что связывание, которое вы настраиваете в Task Runner Explorer не хранится в project.json. Оно хранится в форме комментария вверху gulpfile.js. С помощью Task Runner Explorer вы можете настраивать задачи, которые должны быть запущены, используя Visual Studio. Если вы используете другой редактор (например, Visual Studio Code), тогда использование project.json сможет связывать различные этапы разработки (prebuild, build, итд.) и запускать gulp задачи.

Примечание

Стадии разработки project.json по умолчанию не меняются в Visual Studio. Если вы хотите установить эти опции в свойствах проекта Visual Studio: Build tab -> Produce outputs on build. Тогда элемент ProduceOutputsOnBuild будет добавлен в файл .xproj, что заставит Visual studio менять стадии разработки project.json при сборке.

Определение и запуск новой задачи

Чтобы определить новую Gulp задачу, измените gulpfile.js.

  1. Добавьте следующий JavaScript код в конце gulpfile.js:
gulp.task("first", function () {
        console.log('first task! <-----');
});

Задача называется first, и она просто отображает строку.

  1. Сохраните gulpfile.js.

  2. В Solution Explorer кликните правой клавишей мышки по gulpfile.js и выберите Task Runner Explorer.

  3. В Task Runner Explorer кликните правой клавишей мышки по first и выберите Run.

    ../_images/06-TaskRunner-First.png

    Отобразится такой текст.

Определение и запуск задач в сериях

При запуске нескольких задач они запускаются корректно по умолчанию. Однако если вам надо запускать задачи в определенном порядке, вам нужно указать, когда завершает работу конкретная задача, а также какие задачи зависят от запуска других задач.

  1. Чтобы определить серию задач, замените задачу first, которую вы добавили выше в gulpfile.js:
gulp.task("series:first", function () {
        console.log('first task! <-----');
});

gulp.task("series:second", ["series:first"], function () {
        console.log('second task! <-----');
});

gulp.task("series", ["series:first", "series:second"], function () {});

Теперь у вас есть три задачи: series:first, series:second и series. В задачу series:second включен второй параметр, указывающий массив задач, которые должны быть выполнены до запуска series:second. Как показано в коде выше, до запуска series:second должна быть выполнена только series:first.

  1. Сохраните gulpfile.js.

  2. В Solution Explorer кликните правой клавишей мышки по gulpfile.js и выберите Task Runner Explorer, если он еще не открыт.

  3. В Task Runner Explorer кликните правой клавишей мышки по series и выберите Run.

    ../_images/07-TaskRunner-Series.png

IntelliSense

IntelliSense может дополнять код, дает описания параметров и предлагает другой функционал, что увеличивает эффективность и уменьшает число ошибок. Задачи Gulp пишутся на JavaScript, поэтому IntelliSense может помочь нам при разработке. Когда вы работаете с JavaScript, IntelliSense перечисляет объекты, функции, свойства и параметры, доступные в текущем контексте. Выберите из выпадающего меню подходящую опцию, предложенную IntelliSense, чтобы завершить код.

Среды Development, Staging и Production

Когда Gulp используется для оптимизации файлов для staging и production, обрабатываемые файлы сохраняются локально. Файл _Layout.cshtml использует tag helper environment, чтобы предоставить две различные версии CSS файлов. Одна версия CSS файлов предназначена для development, а вторая оптимизирована для staging и production. В Visual Studio когда вы устанавливаете переменную среды Hosting:Environment на Production, Visual Studio соберет приложение и сделает ссылки на оптимизированные CSS файлы. Далее представлены tag helpers environment, содержащие тэги link на CSS файлы Development и минимизированные CSS файлы Staging и Production.

<environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
                        asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                        asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Переключение между средами

Чтобы переключиться между средами, измените значение переменной среды Hosting:Environment.

  1. В Task Runner Explorer проверьте, чтобы задача min запускала Before Build.

  2. В Solution Explorer кликните правой клавишей мышки по имени проекта и выберите Properties.

    Отображается набор свойств для веб приложения.

Нажмите на вкладку Debug.

  1. Установите значение переменной среды Hosting:Environment на Production.

  2. Нажмите F5, чтобы запустить приложение в браузере.

  3. В окне браузера кликните правой клавишей мышки по странице и выберите View Source, чтоб просмотреть HTML.

    Обратите внимание, что ссылки таблицы стилей указывают на минимизированные CSS файлы.

  4. Закройте браузер, чтобы остановить приложение.

  5. В Visual Studio вернитесь к набору свойств для веб приложения и поменяйте значение переменной среды Hosting:Environment обратно на Development.

  6. Нажмите F5, чтобы запустить приложение в браузере.

  7. В окне браузера кликните правой клавишей мышки по странице и выберите View Source, чтоб просмотреть HTML.

    Обратите внимание, что ссылки таблицы стилей указывают на полные CSS файлы.

См. Работа с несколькими средами.

Элементы задач и модулей

Задача Gulp регистрируется с именем функции. Вы можете указать зависимости, если другие задачи должны запускаться перед текущей задачей. Дополнительные функции позволяют вам запускать и просматривать Gulp задачи, а также настраивать src и dest для измененных файлов. Вот первичные функции Gulp API:

Gulp функция Синтаксис Описание
task gulp.task(name[, deps], fn) { } Функция task создает задачу. Параметр name определяет имя задачи. Параметр deps содержит массив задач, которые должны быть выполнены до запуска этой задачи. Параметр fn представляет функцию обратного вызова, которая выполняет операции задачи.
watch gulp.watch(glob [, opts], tasks) { } Функция watch отслеживает файлы и запускает задачи при изменении файла. Параметр glob является string или array, и он определяет, какие файлы отслеживать. Параметр opts предоставляет дополнительные опции по отслеживанию файлов.
src gulp.src(globs[, options]) { } Функция src предоставляет файлы, которые соответствуют значениям glob. Параметр glob является string или array, и он определяет, какие файлы нужно считывать. Параметр options предоставляет дополнительные опции.
dest gulp.dest(path[, options]) { } Функция dest определяет местоположение, куда можно записать файлы. Параметр path является строкой или функцией, которая определяет папку назначения. Параметр options - это объект, который указывает опции результирующей папки.

См. Gulp Docs API.

Резюме

Gulp - это основанный на JavaScript инструментарий, который может использоваться для связывания и минимизации. Visual Studio автоматически устанавливает Gulp, а также набор Gulp плагинов. Gulp поддерживается на GitHub. См. Документацию по Gulp на GitHub.

Поделись хорошей новостью с друзьями!
Следи за новостями!