ASP.NET предлагает хорошую инфраструктуру для серверного кода, но веб-приложения - это ещё и фронтенд. Клиентский код нужно процессить, упаковывать, минифицировать, разбивать на пакеты и т.п. В мире .NET популярен так же Nuget, который содержит множество полезных пакетов. Но в JavaScript мире эту роль выполняет Bower. Поэтому давайте попробуем подключить Grunt (для автоматизации работы с клиентским кодом) и Bower (в качестве пакетного менеджера для JavaScript).
Подключение к проекту ASP.NET MVC
К сожалению, ASP.NET MVC не имеет встроенной поддержки Grunt и Bower. Поэтому для их корректной работы предварительно необходимо установить несколько nuget-пакетов:
Install-Package Npm
Install-Package Grunt
Install-Package Bower
Эти пакеты подтянут остальные зависимости, необходимые для работы. В результате установки пакетов, в папке проекта появится папка .bin - не удаляйте её. Эта папка содержит файлы для запуска Grunt и Bower.
Этого уже достаточно, чтобы запускать grunt и bower в ручном режиме - для этого необходимо запускать соответствующие файлы из папки .bin.
Если требуется делать то же самое при сборке проекта, то необходимо немного модифицировать файл проекта - в самый конец файла .csproj дописываем директивы для запуска npm, grunt и bower:
<Target Name="NpmBuild" BeforeTargets="Build">
<Exec Command=".bin\npm install" />
</Target>
<Target Name="BowerInstall" AfterTargets="NpmBuild">
<Exec Command=".bin\bower install" />
</Target>
<Target Name="GruntBuild" AfterTargets="BowerInstall">
<Exec Command=".bin\grunt" />
</Target>
</Project>
Теперь при сборке ASP.NET MVC проекта будут также запускаться инструменты для сборки клиентского кода.
Инициализация файлов
Для работы Grunt и Bower требуется создать несколько файлов - package.json и bower.json, а так же сам скрипт для сборки - gruntfile.js.
Необходимо открыть консоль Windows и перейти в папку проекта. После этого последовательно запускаем:
npm init
После этого нужно будет ответить на несколько вопросов в интерактивном режиме (имя проекта, версия и т.п.). На этом шаге будет создан файл package.json.
bower init
Все то же самое, но результате создается файл bower.json. При установке пакетов из Bower они будут попадать в папку bower_components. Если вас это не устраивает, то можно добавить в проект файл с именем .bowerrc и переопределить это поведение:
{
"directory": "Scripts/.bower_components"
}
И последнее - нужно добавить в папку проекта файл gruntfile.js - это скрипт, который будет выполняться при запуске grunt. Пустой скрипт может выглядеть так:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json")
});
grunt.registerTask("default", []);
};
Более подробно о содержимом этого файла можно почитать на официальном сайте Grunt.
Подключение пакетов
Теперь, когда grunt и bower установлены и подключены к проекту, самое время попробовать установить пакеты из общего репозитория.
Установка пакетов - это прописывание соответствующих директив в package.json/bower.json с последующим запуском этих инструментов. Поэтому существует два способа подключения пакетов - вручную добавить их в указанные файлы, либо воспользоваться инструментами и подключить их из командной строки. Попробуем сделать это.
Подключим, для начала, пакет grunt-contrib-clean. Это пакет, который занимается очисткой папок перед сборкой. В командной строке выполняем
npm install grunt-contrib-clean --save-dev
Если заглянуть теперь в package.json, то будет видно, что туда добавился новый элемент:
"devDependencies":
{
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0"
}
Кроме того, в папке проекта появилась папка node_modules, которая содержит код этого пакета. На практике эти папки не распространяются с исходным кодом. Т.е. мы можем спокойно удалить папку node_modules и передать код коллеге. Все что нужно сделать в этом случае, на новом месте запустить:
npm install
При запуске этой команды Npm создаст папку node_modules и установит туда все зависимости, которые сейчас находятся в файл package.json. Поскольку мы добавили соответствующие директивы в файл проекта .csproj, запуск этой команды вручную не потребуется - все зависимости будут загружены автоматически при сборке проекта.
Похожа ситуация и с Bower. Подключение пакета:
bower install -S jquery
В bower.json добавляется при этом нужна зависимость:
"dependencies":
{
"jquery": "~2.1.1",
}
Распространять вместе с проектом папку bower_components тоже не обязательно. Для того, чтобы скачать все подключенные пакеты достаточно запустить следующую команду:
bower install
Так же как и для Npm, пакеты Bower будут подтягиваться автоматически при сборке проекта, поэтому запускать эту команду вручную необязательно.
Как видно, логика подключения пакетов из Npm и Bower очень похожа на Nuget. Напоследок, предлагаю посмотреть как при помощи этих инструментов решаются практические задачи.
Минификация кода
Предположим у нас есть JavaScript-код, который требуется упаковать в один файл и минифицировать. Для каждой задачи по автоматизации нужно найти подходящий пакет в официальном репозитории. В нашем случае подойдет пакет grunt-contrib-uglify.
Подключаем пакет к проекту:
npm install grunt-contrib-uglify --save-dev
Добавляем в скрипт gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
"WebApp27": {
files: {
"dist/result.js": [
"Scripts/controller1.js",
"Scripts/controller2.js"]
}
}
}
});
Смысл скрипта заключается в том, что мы берем файлы controller1.js и controller2.js, минифицируем их, а результат складываем в result.js.
Когда это готово, вызовом метода loadNpmTasks загружаем пакет Uglify при сборке и запускаем его вместе с остальными задачами:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
"WebApp27": {
files: {
"dist/result.js": [
"Scripts/controller1.js",
"Scripts/controller2.js"]
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.registerTask("default", ["uglify"]);
};
Теперь при запуске grunt из командной строки или при сборке ASP.NET проекта, задача по минификации будет также запущена и файл result.js будет содержать минифицированный вариант.
Подробнее о синтаксисе этого скрипта можно почитать на официальном сайте Grunt.
Сборка LESS
Другой задачей, часто решаемой при помощи Grunt является сборка LESS-файлов. Аналогично предыдущему примеру установим пакет grunt-contrib-less и добавим его директиву в gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
// ...
less: {
styles: {
files: [
{
"dist/styles.css": "styles/styles.less"
}
]
}
}
});
// ...
grunt.loadNpmTasks("grunt-contrib-less");
grunt.registerTask("default", [/*...*/, "less"]);
};
Добавим файл styles/styles.less в проект:
@color1: #fff;
body {
background-color: @color1;
}
И запустим сборку. В итоге в файле dist/styles.css будет содержаться результат компиляции LESS-файла:
body {
background-color: #ffffff;
}