Bower gulp: Зачем используют Bower с Gulp? — Хабр Q&A — Программирование на Python и Objective-C в Mac OS

Содержание

Уcтанавливаем NodeJS, Bower, Gulp на Centos Linux

Данная заметка описывает шаги установки NodeJS, Bower, Gulp на Centos Linux.

Что такое NodeJS

Node или Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи node-webkit и AppJS для Linux, Windows и Mac OS) и даже программировать микроконтроллеры (например, tessel и espruino). В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом. Материал из Википедии — свободной энциклопедии.

Что такое Bower

Bower — это система управления пакетами для управления веб-фреймворками, библиотеками, утилитами. Подручный инструмент любого профессионального веб-разработчика.

Что такое Gulp

Gulp — это потоковая система сборки пакетов. Очень быстрая, простая и эффективная. Использует всю мощь streams в node.js.

Обновление системы

Переда началом надо убедится, что операционная система и все ее пакеты актуальны, это можно сделать выполнив следующую команду.

Установка необходимых компонентов

Надо убедится, что операционная система имеет набор компонентов и пакетов необходимых для дальнейшей работы.

yum install yum-utils bzip2 bzip2-devel wget curl tar
yum groupinstall «Development Tools»

yum install yum-utils bzip2 bzip2-devel wget curl tar

yum groupinstall «Development Tools»

Установка NodeJS

Последнюю версию можно найти по ссылке http://nodejs.org/dist/latest/. Необходимо выполнять установку NodeJS имея предустановленный python версии не ниже 2.6.

Стандартная последовательность команд:

cd /opt
wget http://nodejs.org/dist/v0.12.2/node-v0.12.2.tar.gz
tar zxvf node-v0.12.2.tar.gz
cd node-v0.12.2
./configure —prefix=/usr/local
make
make install
node -v

cd /opt

wget http://nodejs.org/dist/v0.12.2/node-v0.12.2.tar.gz

tar zxvf node-v0.12.2.tar.gz

cd node-v0.12.2

./configure —prefix=/usr/local

make

make install

node -v

Установка Bower

npm install bower -g
bower -v

npm install bower -g

bower -v

Во время установки bower иногда могут возникать ошибки типа «shasum check failed for»

npm ERR! Linux 2.6.18-348.1.1.el5
npm ERR! argv «/usr/local/bin/node» «/usr/local/bin/npm» «install» «bower» «-g»
npm ERR! node v0.12.2
npm ERR! npm v2.7.4

npm ERR! shasum check failed for /tmp/npm-3741-a3faf1af/registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz
npm ERR! Expected: 6e9d7f8514a3467fa5e9f82cc158ecfc1d5ac76f
npm ERR! Actual: 9bdbc015ace6107911a8b4a326d8383af6338d9e
npm ERR! From: https://registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR! /opt/node-v0.12.2/npm-debug.log

npm ERR! Linux 2.6.18-348.1.1.el5

npm ERR! argv «/usr/local/bin/node» «/usr/local/bin/npm» «install» «bower» «-g»

npm ERR! node v0.12.2

npm ERR! npm v2.7.4

npm ERR! shasum check failed for /tmp/npm-3741-a3faf1af/registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz

npm ERR! Expected: 6e9d7f8514a3467fa5e9f82cc158ecfc1d5ac76f

npm ERR! Actual: 9bdbc015ace6107911a8b4a326d8383af6338d9e

npm ERR! From: https://registry.npmjs.org/handlebars/-/handlebars-2.0.0.tgz

npm ERR!

npm ERR! If you need help, you may report this error at:

npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:

npm ERR! /opt/node-v0.12.2/npm-debug.log

в этом случае самым простым решением может быть достаточно явно установить нужную версию пакета, например handlebars-2.0.0.tgz

npm cache clean handlebars
npm install -g [email protected]

npm cache clean handlebars

npm install -g [email protected]

и повторить установку заново

Установка Gulp

Предварительно должен быть установлен Node.JS и npm.

Установка Grunt

Настройка Node.js приложений — Azure App Service

06/02/2020

Чтение занимает 9 мин

В этой статье

Node.js приложения должны быть развернуты со всеми необходимыми зависимостями NPM. Модуль развертывания службы приложений автоматически запускается npm install --production при развертывании репозитория Gitили ZIP-пакета с включенной автоматизацией сборок. Однако при развертывании файлов с помощью FTP/Sнужные пакеты необходимо загрузить вручную.

Это краткое описание содержит основные понятия и инструкции для Node.js разработчиков, развернутых в службе приложений. Если вы никогда не использовали службу приложений Azure, сначала следуйте инструкциям в кратком руководстве поNode.js и Node.js с MongoDB .

Показывать Node.js версию

Чтобы отобразить текущую версию Node.js, выполните следующую команду в Cloud Shell:

az webapp config appsettings list --name <app-name> --resource-group <resource-group-name> --query "[?name=='WEBSITE_NODE_DEFAULT_VERSION'].value"

Чтобы отобразились сведения обо всех поддерживаемых версиях Node.js, выполните следующую команду в Cloud Shell:

az webapp list-runtimes | grep node

Чтобы отобразить текущую версию Node.js, выполните следующую команду в Cloud Shell:

az webapp config show --resource-group <resource-group-name> --name <app-name> --query linuxFxVersion

Чтобы отобразились сведения обо всех поддерживаемых версиях Node.js, выполните следующую команду в Cloud Shell:

az webapp list-runtimes --linux | grep NODE

Задать версию Node.js

Чтобы настроить для приложения поддерживаемую версию Node.js, выполните следующую команду в Cloud Shell , чтобы установить WEBSITE_NODE_DEFAULT_VERSION поддерживаемую версию:

az webapp config appsettings set --name <app-name> --resource-group <resource-group-name> --settings WEBSITE_NODE_DEFAULT_VERSION="10.15"

Этот параметр определяет используемую версию Node.js во время выполнения и во время автоматического восстановления пакета во время автоматизации сборки службы приложений.

Примечание

Необходимо задать версию Node.js в проекте package.json . Модуль развертывания выполняется в отдельном процессе, который содержит все поддерживаемые версии Node.js.

Чтобы настроить приложение на поддерживаемую версию Node.js, выполните следующую команду в Cloud Shell:

az webapp config set --resource-group <resource-group-name> --name <app-name> --linux-fx-version "NODE|10.14"

Этот параметр определяет используемую версию Node.js как во время выполнения, так и при автоматическом восстановлении пакетов в KUDU.

Примечание

Необходимо задать версию Node.js в проекте package.json . Модуль развертывания выполняется в отдельном контейнере, который содержит все поддерживаемые версии Node.js.

Получение номера порта

Для получения входящих запросов приложение Node.js должно прослушивать правильный порт.

В службе приложений в Windows Node.js приложения размещаются с помощью IISNode, а Node.js приложение должно прослушивать порт, указанный в process.env.PORT переменной. В следующем примере показано, как это сделать в простом приложении Express:

Служба приложений устанавливает переменную среды PORT в контейнере Node.js и перенаправляет входящие запросы в контейнер по этому номеру порта. Чтобы получать запросы, приложение должно прослушивать этот порт с помощью process.env.PORT . В следующем примере показано, как это сделать в простом приложении Express:

const express = require('express')
const app = express()
const port = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Настройка автоматизации сборки

Если приложение развертывается с использованием Git или ZIP-пакетов с включенной автоматизацией сборки, то автоматизация сборки cлужбы приложений проходит в такой последовательности:

Запустите пользовательский скрипт, если он указан PRE_BUILD_SCRIPT_PATH.
Запустите npm install без флагов, включая NPM preinstall и postinstall сценарии, а также устанавливает devDependencies .
Выполните, npm run build Если в package.jsна выбран скрипт сборки.
Выполните npm run build:azure , если сборка: Скрипт Azure указан в package.jsна.
Запустите пользовательский скрипт, если он указан POST_BUILD_SCRIPT_PATH.

Примечание

Как описано в документах NPM, скрипты с именами prebuild и postbuild выполняются до и после build , соответственно, если они указаны. preinstall и postinstall выполняются до и после install соответственно.

PRE_BUILD_COMMAND и POST_BUILD_COMMAND являются переменными среды, которые по умолчанию пустые. Чтобы выполнить команды перед сборкой, определите PRE_BUILD_COMMAND. Чтобы выполнить команды после сборки, определите POST_BUILD_COMMAND.

В следующем примере указываются две переменные для ряда команд, разделенных запятыми.

az webapp config appsettings set --name <app-name> --resource-group <resource-group-name> --settings PRE_BUILD_COMMAND="echo foo, scripts/prebuild.sh"
az webapp config appsettings set --name <app-name> --resource-group <resource-group-name> --settings POST_BUILD_COMMAND="echo foo, scripts/postbuild.sh"

Дополнительные переменные среды для настройки автоматизации сборки см. в статье Конфигурация Oryx.

Дополнительные сведения о том, как служба приложений работает и создает Node.js приложений в Linux, см. в документации по Орикс: как обнаруживаются и строятся приложения Node.js.

Настройка сервера Node.js

Контейнеры Node.js поставляются с PM2, диспетчером рабочих процессов. Вы можете настроить приложение для запуска с PM2 или с помощью NPM или с помощью пользовательской команды.

Выполнить пользовательскую команду

Служба приложений может запустить приложение с помощью пользовательской команды, такой как исполняемый файл, например Run.sh. Например, чтобы выполнить npm run start:prod , выполните следующую команду в Cloud Shell:

az webapp config set --resource-group <resource-group-name> --name <app-name> --startup-file "npm run start:prod"

Запустить NPM запуск

Чтобы запустить приложение с помощью npm start , просто убедитесь, что start сценарий находится в package.js файле. Пример:

{
  ...
  "scripts": {
    "start": "gulp",
    ...
  },
  ...
}

Чтобы использовать в проекте настраиваемый package.js , выполните следующую команду в Cloud Shell:

az webapp config set --resource-group <resource-group-name> --name <app-name> --startup-file "<filename>.json"

Запуск с помощью PM2

Контейнер автоматически запускает приложение с PM2, когда в проекте обнаруживается один из общих файлов Node.js:

bin/www
server.js
app.js
index.js
hostingstart.js
Один из следующих файлов PM2: process.json и ecosystem.config.js

Можно также настроить пользовательский файл запуска со следующими расширениями:

JS -файл
Файл PM2 с расширением JSON, .config.js, YAML или . yml

Чтобы добавить пользовательский начальный файл, выполните следующую команду в Cloud Shell:

az webapp config set --resource-group <resource-group-name> --name <app-name> --startup-file "<filname-with-extension>"

Удаленная отладка

Примечание

Удаленная отладка сейчас доступна в предварительной версии.

Вы можете выполнить удаленную отладку приложения Node.js в Visual Studio Code , если он настроен для работы с PM2, за исключением случая, когда он выполняется с помощью * .config.js, *. yml или . YAML.

В большинстве случаев для приложения не требуется дополнительная настройка. Если приложение запускается с process.js файла (по умолчанию или настраиваемого), оно должно иметь script свойство в корне JSON. Пример:

{
  "name"        : "worker",
  "script"      : "./index.js",
  ...
}

Чтобы настроить Visual Studio Code для удаленной отладки, установите расширение службы приложений. Следуйте инструкциям на странице расширение и войдите в Azure в Visual Studio Code.

В Azure Explorer найдите приложение, которое нужно отладить, щелкните его правой кнопкой мыши и выберите команду запустить удаленную отладку. Нажмите кнопку Да , чтобы включить его для приложения. Служба приложений запускает прокси-сервер туннеля и присоединяет отладчик. Затем можно выполнить запросы к приложению и увидеть, что отладчик приостанавливается в точках останова.

После завершения отладки закройте отладчик, выбрав Отключить. При появлении запроса нажмите кнопку Да , чтобы отключить удаленную отладку. Чтобы отключить его позже, снова щелкните свое приложение в Azure Explorer и выберите Отключить удаленную отладку.

Доступ к переменным среды

В Службе приложений можно задать параметры приложения вне кода приложения. Затем к ним можно получить доступ с помощью стандартного шаблона Node.js. Например, для доступа к параметру приложения с именем NODE_ENV используйте следующий код:

process.env.NODE_ENV

Запуск grunt/Bower/gulp

По умолчанию Автоматизация сборки службы приложений выполняется npm install --production при обнаружении Node.jsного приложения, которое развертывается с помощью Git или ZIP-развертывания с включенной автоматизацией сборки. Если приложению требуются какие-либо популярные средства автоматизации, такие как grunt, Bower или gulp, необходимо предоставить Пользовательский скрипт развертывания для его запуска.3.9.1″,
…
}

В окне терминала перейдите в каталог корня репозитория и выполните следующие команды:

npm install kuduscript -g
kuduscript --node --scriptType bash --suppressPrompt

Корневой каталог репозитория теперь содержит два дополнительных файла: . Deployment и deploy.sh.

Откройте deploy.sh и найдите Deployment раздел, который выглядит следующим образом:

##################################################################################################################################
# Deployment
# ----------

Этот раздел завершается выполнением npm install --production . Добавьте раздел кода, в котором необходимо запустить требуемое средство в конце Deployment раздела:

См. пример в примере MEAN.js, где скрипт развертывания также выполняет пользовательскую npm install команду.

Bower

Этот фрагмент кода выполняется bower install .

if [ -e "$DEPLOYMENT_TARGET/bower.json" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval ./node_modules/.bin/bower install
  exitWithMessageOnError "bower failed"
  cd - > /dev/null
fi

Gulp

Этот фрагмент кода выполняется gulp imagemin .

if [ -e "$DEPLOYMENT_TARGET/gulpfile.js" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval ./node_modules/.bin/gulp imagemin
  exitWithMessageOnError "gulp failed"
  cd - > /dev/null
fi

Grunt

Этот фрагмент кода выполняется grunt .

if [ -e "$DEPLOYMENT_TARGET/Gruntfile.js" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval ./node_modules/.bin/grunt
  exitWithMessageOnError "Grunt failed"
  cd - > /dev/null
fi

Обнаружение сеанса HTTPS

В Службе приложений завершение SSL-запросов происходит в подсистеме балансировки нагрузки сети, поэтому все HTTPS-запросы достигают вашего приложения в виде незашифрованных HTTP-запросов. Если логика вашего приложения проверяет, зашифрованы ли пользовательские запросы, проверяйте заголовок X-Forwarded-Proto.

Популярные веб-платформы позволяют получить доступ к информации X-Forwarded-* в стандартном шаблоне приложения. В Expressможно использовать Доверенные прокси-серверы. Пример:

app.set('trust proxy', 1)
...
if (req.secure) {
  // Do something when HTTPS is used
}

Доступ к журналам диагностики

Чтобы получить доступ к журналам консоли, созданным в коде приложения в Службе приложений, включите ведение журнала диагностики, выполнив следующую команду в Cloud Shell:

az webapp log config --resource-group <resource-group-name> --name <app-name> --application-logging true --level Verbose

Возможные значения для --level: Error, Warning, Info и Verbose. Каждый последующий уровень включает предыдущий уровень. Например: Error включает только сообщения об ошибках, а Verbose включает все сообщения.

Включив ведение журнала диагностики, выполните следующую команду, чтобы просмотреть поток данных журнала:

az webapp log tail --resource-group <resource-group-name> --name <app-name>

Если журналы консоли не отображаются, проверьте еще раз через 30 секунд.

Примечание

Вы также можете проверить файлы журнала в браузере на странице https://<app-name>.scm.azurewebsites.net/api/logs/docker.

Чтобы остановить потоковую передачу журналов, нажмите клавиши Ctrl+C.

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

Сначала включите ведение журнала контейнера, выполнив следующую команду:

az webapp log config --name <app-name> --resource-group <resource-group-name> --docker-container-logging filesystem

Замените <app-name> и <resource-group-name> именами, подходящими для вашего веб-приложения.

После включения ведения журнала контейнера, выполните следующую команду, чтобы просмотреть поток данных журнала.

az webapp log tail --name <app-name> --resource-group <resource-group-name>

Если журналы консоли не отображаются, проверьте еще раз через 30 секунд.

Чтобы остановить потоковую передачу журналов, нажмите клавиши CTRL+C.

Вы также можете проверить файлы журнала в браузере на странице https://<app-name>.scm.azurewebsites.net/api/logs/docker.

Мониторинг с помощью Application Insights

Application Insights позволяет отслеживать производительность приложения, исключения и использование без внесения изменений в код. Чтобы подключить агент App Insights, перейдите к веб-приложению на портале и выберите Application Insights в разделе Параметры, а затем выберите включить Application Insights. Затем выберите существующий ресурс App Insights или создайте новый. Наконец, нажмите кнопку Применить в нижней части страницы. Инструкции по инструментированию веб-приложения с помощью PowerShell см. здесь .

Этот агент отслеживает Node.js приложение на стороне сервера. Чтобы отслеживать клиентский сценарий JavaScript, добавьте в проект пакет SDK для JavaScript.

Дополнительные сведения см. в заметках о выпуске расширения Application Insights.

Устранение неполадок

Когда работающий Node.js приложение работает иначе в службе приложений или с ошибками, попробуйте выполнить следующие действия.

Получите доступ к потоку журнала.
Протестируйте приложение локально в рабочем режиме. Служба приложений запускает приложения Node.js в рабочем режиме, поэтому вам необходимо убедиться в том, что проект работает надлежащим образом локально в рабочем режиме. Пример:
- В зависимости от package.jsв рабочем режиме могут быть установлены различные пакеты ( dependencies VS devDependencies ).
- Некоторые веб-платформы в рабочем режиме могут выполнять другие операции при развертывании статических файлов.
- Некоторые веб-платформы могут использовать специальные скрипты запуска в рабочем режиме.
Запустите приложение в службе приложений в режиме разработки. Например, в MEAN.jsможно настроить приложение в режиме разработки в среде выполнения, задав NODE_ENV параметр приложения.

robots933456 в журналах

В журналах контейнера может отобразиться следующее сообщение:

2019-04-08T14:07:56.641002476Z "-" - - [08/Apr/2019:14:07:56 +0000] "GET /robots933456.txt HTTP/1.1" 404 415 "-" "-"

Это сообщение можно проигнорировать. /robots933456.txt — это фиктивный URL-путь, с помощью которого Служба приложений проверяет, может ли контейнер обслуживать запросы. Ответ 404 означает, что путь не существует. При этом он информирует Службу приложений о том, что контейнер работоспособен и готов отвечать на запросы.

Дальнейшие действия

javascript — Каковы различия между Grunt, Gulp.js и Bower? Почему & когда их использовать?

По сути и с большим количеством ручного отказа от деталей, Gulp и Grunt — это обе системы для автоматизации серий взаимозависимых задач, обычно используемые для определения« сборки »вашего проекта, как современный подход к make. Обычно проект использует один из них или другой, но не оба одновременно (для одних и тех же частей в любом случае).

Bower отличается от других и часто используется с Gulp или Grunt: это менеджер пакетов для клиентских библиотек, облегчающий поддержку эти библиотеки в актуальном состоянии, стандартизированно укажите их и их зависимости и т. д.

Однострочник Gulp с их сайта:

Автоматизируйте и улучшите свой рабочий процесс

Grunt однострочный от их:

JavaScript Task Runner

И Бауэр:

Менеджер пакетов для Интернета

Почему & когда их использовать?

Я думаю, что вышеописанное относится и к Gulp и Grunt: если у вас есть задачи, которые вы хотите автоматизировать (например, создание окончательной версии веб-сайта с минификацией, объединением, сжатием и т. д .; или просмотр файлов на предмет изменений и повторный запуск) задачи, когда они изменяются для поддержки быстрой разработки), вы можете использовать Gulp и Grunt для этого.

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

Bower полезен для управления клиентскими библиотеками в ваших проектах. Вы можете использовать Bower для установки, скажем, последней версии Bootstrap, и она поместит соответствующие файлы в стандартные места вашего проекта. Bower может обновить эти файлы, если выйдет более новая Bootstrap. Если библиотека зависит от других библиотек (например, JS Bootstrap использует jQuery), Bower помогает управлять этим деревом. Для Grunt есть полезные задачи (и я полагаю, для Gulp), которые могут даже автоматизировать добавление тегов сценария и ссылки в ваш HTML-код для этих библиотек благодаря наличию заполнителя в исходном HTML-коде, который в основном гласит «поместите библиотеки Bower здесь» /р>

bower — main-bower-files gulp возвращает пустой массив

Я пытаюсь использовать плагин main-bower-files, но мне кажется, что он не может извлечь каталог из bower_components.

Его сообщение об отладке показывает, что у него есть нужные файлы, но оно не возвращает массив

#here you can see the debug finding the places
PackageCollection add        angular bower_components/angular
PackageCollection add        json3 bower_components/json3
PackageCollection add        es5-shim bower_components/es5-shim
PackageCollection add        jquery bower_components/jquery
PackageCollection add        angular-resource bower_components/angular-resource
PackageCollection add        angular-cookies bower_components/angular-cookies
PackageCollection add        angular-sanitize bower_components/angular-sanitize
PackageCollection add        angular-animate bower_components/angular-animate
PackageCollection add        angular-touch bower_components/angular-touch
PackageCollection add        angular-ui-router bower_components/angular-ui-router

[22:25:31] [] #< this is the result of calling require('main-bower-files')()

Вот моя задача глотка для инъекции

var bowerFiles = require('main-bower-files')


gulp.task('inject', function() {
  util.log(bowerFiles({debugging:true}))
  gulp.src('app/index.jade')
    .pipe(jade({pretty: true}))
    .pipe(inject(gulp.src(bowerFiles()), {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}))
    .pipe(inject(gulp.src('.tmp/**/*.js', {read: false}), {starttag: '<!-- inject:files:{{ext}}-->', endtag: '<!-- endinject-->'}))
    .pipe(connect.reload())
    .pipe(gulp.dest('.tmp'))
})

MikaAK

20 Июл 2014 в 09:30

2 ответа

Лучший ответ

Вам необходимо установить Bower и запустить Bower install

Так :

Установите Node и npm, думаю, все готово
запустите npm install, чтобы подготовить проект к npm, и установите то, что находится в package.json
установить беседку: sudo npm install -g bower
запустите bower install, чтобы скопировать зависимости bower.json в каталог ./bower_components
установить gulp: npm install -g gulp
создайте свой проект: gulp build
проверьте это: gulp serve и вы готовы к этому

Ну, почти автоматическая сборка …

Nicolas Zozol
28 Июл 2014 в 14:47

Если у вас есть зависимости как devDependencies в bower.json, вам нужно добавить ‘includeDev:true

Увидеть

includeDev Тип: смешанный По умолчанию: false
Вы можете включить свои devDependencies двумя способами:
Установите для этого параметра значение inclusive или true, чтобы добавить devDependencies к вашим> зависимостям, или используйте exclude, чтобы исключить ваши зависимости.

Community
20 Июн 2020 в 09:12

Создание социконок с помощью Gulp, stylus, bower, font-awesome, yeoman MODX

Создание рабочей папки проекта с помощью Yeoman

Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.

При успешном запуске Yeoman у вас должна получится такая картинка:

После выполнения этих команд у вас получится приблизительно такая структура:

Запустим Gulp командой:

gulp serve

Остальные команды вы можете просмотреть в файле .gulpfile.

При успешном запуске у вас должна получится следующая картинка:

кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:

Перейдём к нашему главному шаблону app/index.jade и вставим туда код для социконок, у меня получился такой:

Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:

Он наблюдает за изменениями файлов jade в папке app

Конвертирует все файлы .jade в .html, сжимает и передаёт их в папку dist

Установка и подключение Font-awesome

Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:

bower install font-awesome

Укажем стили в index.jade:

После этого в браузере у вас должны отобразится иконки:

Создание стилей с помощью Stylus

В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:

Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.

В результате этого должны получится вот такие иконки:

Код для вставки в ваш сайт можете найти в dist/index.html и dist/styles/main.css

Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:

Демо можете увидеть внизу на этом сайте. Как обычно — не стесняйтесь задавать вопросы и давать замечания в комментариях.

Asyncee · Django, webpack, bower и gulp

В наше время сборка фронтенда становится актуальным и всё более интересным вопросом. Если раньше собирать особо ничего и не требовалось, так как проекты состояли лишь из набора стилей и скриптов, то сейчас, с развитием javascript, появляется всё больше возможностей и интересных технологий.

Фронтенд меняется, а вместе с ним должны меняться и мы.

В качестве демонстрационного проекта буду рассматривать мой шаблон проекта для Django.

Итак, у нас в проекте используются технологии:

стили в scss, с трансляцией в css
скрипты на javascript (ES2015, ES7, JSX), с трансляцией в ES5
для сборки скриптов (и стилей) в бандл используется webpack
для установки зависимостей для сборки проекта используется npm
для установки библиотек от вендоров (статика) — bower
для задач по сборке фронтенда используется gulp
gulpfile использует синтаксис ES2015 и требует Node 6.

Полезные ссылки

Привожу все ссылки на исходники вначале статьи, так как дальше кода не будет, а будет общее описание подхода.

Структура директорий

Приведу частичную структуру директорий, касающуюся только фронтенда.

.
├── assets
│   ├── js
│   │   └── index.js
│   └── sass
│       └── index.scss
├── .bowerrc
├── bower.json
├── gulpfile.js
├── package.json
├── src
│   ├── manage.py
│   ├── project_name
│   │   ├── __init__.py
│   │   ├── static
│   │   │   ├── build
│   │   │   ├── css
│   │   │   ├── vendor
│   │   │   ├── img
│   │   │   └── js
│   │   ├── templates
│   │   ├── urls.py
│   │   └── views.py
└── webpack.config.js

Итак, как видно у нас две основные директории — src с исходниками приложения (бэкенда) и assets с исходниками графического интерфейса (фронтенд).

Преобразованные исходные файлы собираются в бандлы и кладутся в директорию проекта project_name/static/build, откуда и подключаются. Таким образом сборка прозрачно интегрируется с подсистемой статических файлов Django (django.contrib.staticfiles).

Зависимости проекта

Все зависимости для сборки проекта описаны в файле package.json. При развёртывании они устанавливаются с помощью команды npm install.

Также используется bower для управления статикой, а конкретно для удобной установки и обновления библиотек. Все либы ставятся в project_name/static/vendor/ и коммитятся в репозиторий.

Стили

Стили лежат в директории assets/scss и импортируются в файл index.scss. Сборка происходит с помощью тасков в gulp: sass:dev и sass:prod. В область видимости sass добавлена директория node_modules, так что исходники их сторонних пакетов можно импортировать прямо оттуда.

Пример подключения bootstrap-sass:

$ cat assets/sass/index.scss

@import "bootstrap-sass/assets/stylesheets/bootstrap";

Для дополнительного удобства разработки, в gulp подключен Browsersync, так что менять стилевое оформление можно прямо «на ходу». Разумеется, всё запускается автоматически, одной командой, но об этом позже.

Скрипты

Скрипты лежат соответственно в assets/js и подключаются в index.js. Сборка происходит с помощью webpack. Кстати сборщик умеет автоматически подключать нужные стили прямо в runtime (аттачит их в head страницы).

Поддерживается синтаксис ES2015 с фичами из ES7, а также JSX. За транспайлинг отвечает babel.

Задачи для сборки проекта

Для сборки проекта используется два типа задач — сборка в продакшн и девелопмент-сборка. Отличие сборок заключается в том, что для боевой сборки мы используем минификацию и прочие оптимизации, а для локальной — нет. На скорости это тоже отражается, так как пересборка изменений происходит на лету, при изменении исходных файлов — за этим следит gulp.

Вот список наших задач:
— js:dev и js:prod — сборка яваскрипта
— sass:dev и sass:prod — сборка стилей
— django-runserver — запуск сервера django
— browser-sync — запуск сервера browsersync
— watch — слежение за изменёнными исходниками и запуск пересборки. Отслеживаются только стили, так как javascript сжимается вебпаком, который работает в режиме наблюдения (watch). Такое разделение обусловлено тем, что вебпак знает как эффективнее пересобрать изменившийся файл.
— default — запуск сборки стилей, скриптов, сервера django, browsersync и слежения за изменениями. Команды запускаются для сборки разрабатываемой версии.
— deploy — сборка стилей и скриптов в режиме для продакшена.

Интеграция django и gulp

Ребята из CaktusGroup в своём блоге описали опыт по интеграции сборки ассетов в Django−проекте. Вместо того, чтобы привязываться к конкретным инструментам Django (pipeline или compressor), они решили инвертировать процесс — и научили gulp запускать Django-проект (runserver) вместе с другими задачами.

Этот подход реализован и у нас, и, должен сказать — работает превосходно. Для того, чтобы приступить к полноценной разработке, достаточно одной команды — gulp. Всё запустится автоматически и будет готово к работе через несколько секунд. А благодаря Browsersync ещё и вкладка с сайтом откроется в браузере автоматически 🙂

Единственный нюанс в том, чтобы настроить работу Browsersync на порту 8000, а Django запускать на другом, например, 3000 и проксировать запросы от первого ко второму. Тогда для разработчика вообще всё будет прозрачно.

Итого

Данный подход позволяет нам ускорить процесс разработки и сделать его более удобным. Отсутствие ограничений в выборе используемых технологий и настройке сборки позволяет максимально гибко подстраиваться под меняющиеся реалии веб-разработки.

Одно могу сказать точно — пока в Django не появится крутой asset pipeline, мы будем использовать описанный в статье подход к разработке фронтенда.

[Перевод] Введение в Gulp, Grunt, Bower, и поддержка npm в Visual Studio

Вступление
Веб разработка, а именно фронт-энд разработка становится, как и традиционная бэк-энд разработка, все комплекснее и мудренее. Множество проектов нуждаются в большем, нежели банальная закачка пары JS и CSS файлов по FTP. Сейчас мы можем наблюдать так называемый процесс сборки фронт-энда, который может включать компиляцию SASS и LESS, сжатие CSS/JS, запуск JSHint или JSLint и многое другое. Эти сборочные задачи и процессы координируются такими инструментами как Gulp или Grunt. Так же клиентскими библиотеками можно управлять используя различные системы управления пакетами как npm или bower.Для чего ASP.NET клиентские системы управления пакетами? Почему не NuGet? Почему не MSBuild?
Некоторые из вас задаться вопросом — «а почему же не использовать JavaScript с NuGet?». Или например, «почему бы не написать еще одно расширение MSBuild для сборки CSS/JS?».Все просто. Потому что уже существует богатая экосистема заточенная под такого рода задачи. NuGet хорош для серверных библиотек (ну иногда и для клиентских может сгодится), но существует чертовски больше CSS и JS библиотек под npm и bower, приспособленных под это дело. MSBuild хорош для сборок ориентированных на стороне сервера, но может быть большим излишеством для сборки клиентских приложений.

Ну так как насчет использовать оба решения. Для этого есть предусмотренные инструменты. Добавление поддержки Gulp, Grunt, Bower и npm (ну и других плюшек, если понадобится в будущем) означает более адаптированную среду для фронт-энд разработчиков, работающих с ASP.NET. А так же это открывает двери для разработчиков ASP.NET в познании и использовании JS и CSS библиотек которые повседневно используются фронт-энд сообществом.

Введение в диспетчер запуска задач (Task Runner Explorer)
Мы получили целую тонну запросов касающихся поддержки Grunt/Gulp от многих из вас и так же от сообщества в целом. Мы работаем над высококачественной поддержкой обоих менеджеров Grunt и Gulp в Visual Studio »14», с полной расширяемостью. Сейчас мы готовы представить вашему вниманию предварительную версию, вышеописанной поддержки, в виде расширения для VS2013 и мы будем рады если вы поможете нам, знакомясь и тестируя данное расширение.Сегодня мы представляем предварительно-ознакомительную версию нашего Диспетчер Запуска Задач в виде VSIX — расширения. Мы так же рекомендуем вам, два других VSIX — расширения для более удобного использования, представленного нами, функционала.

На заметку:
Большинство функционала, включенного в эти несколько VSIX — расширений будут включены в Visual Studio, таким образом, вам не придется все их ставить в будущем. Все таки для данной предварительно-ознакомительной версии для VS2013 нам необходимы все эти расширения для того что бы представить вам наше решение в короткие сроки. Так же обратите внимание что на сегодняшний момент в Visual Studio Express будет работать только Task Runner Explorer, но начиная с VS14 весь функционал будет работать в свободной версии Visual Studio.Рассматривайте выше-переставленный набор функций как предварительную, DevLabs версию нежели чем что-то финальное и готовое решение из раздела VS Productivity Power Tools. Все это будет достигнуто в финальной версии продукта.

Что вам нужно?
Для начала, обзаведитесь Visual Studio 2013.3 — что подразумевает три бесплатных обновления.TRX расширение для Visual Studio Express
Расширение поддерживающее NPM/NBower — А именно поиск пакетов и автозаполнение
Необязательное расширение Gulp Launcher — добавляет npm install в контекстное меню дерева проектаБез данного расширения установка и удаление пакетов npm должны выполнятся извне
Если вы все же установили это расширение вам нужно будет выполнить правый клик на packages.json и нажать на npm install перед тем как запустить задачи grunt/gulp

Для того что бы открыть TRX (Task Runner Explorer), просто выполните правый щелчок мышью на gruntfile.js файле в вашем проекте:

TRX обычно находится на нижней панели в VS и выглядит вот так:

Здесь видно что gruntfile.js был найден в корне одного и более проектов в решении. Здесь так же отображается функционал который позволяет вам запускать задачи реагируя на 4 разных события Visual Studio.

Для ассоциации цели или задачи с событием Visual Studio, просто выполните нажатие правой кнопки мышкой и выполните связывание:

Для запуска цели или задачи просто кликните на последней и пред вами предстанет следующий терминал:

После установки расширения автозаполнения для менеджера пакетов вы заметите как легко добавить или обновить тот или иной пакет при правке вашего package.json для bower или npm.

Вы так же сможете лицезреть асинхроные всплывающие подсказки заполненные мета-данными.

Когда вы начнете тестирование помните что вам нужно запустить npm install перед использованием TRX для запуска задач Grunt.

Несколько слов от переводчика
Спасибо всем за внимание, это мой первый перевод так что буду рад конструктивным замечаниям.Вот ссылка на оригинал

Бауэр против глотка | Какие отличия?

Bower vs gulp: в чем различия?

Что такое Бауэр? Менеджер пакетов для Интернета . Bower — это менеджер пакетов для Интернета. Он предлагает универсальное, однозначное решение проблемы внешнего управления пакетами, в то же время раскрывая модель зависимостей пакетов через API, который может быть использован более самоуверенным стеком сборки. Нет общесистемных зависимостей, никакие зависимости не являются общими для разных приложений, а дерево зависимостей является плоским.

Что такое глоток? Система потоковой сборки . Сборка системы автоматизирует задачи: минификация и копирование всех файлов JavaScript, статических изображений. Больше возможностей для просмотра файлов для автоматического повторного запуска задачи при изменении файла.

Bower можно отнести к категории «Front End Package Manager» , тогда как gulp сгруппирован в «JS Build Tools / JS Task Runners» .

Некоторые из функций, предлагаемых Bower:

Bower работает на более низком уровне, чем предыдущие попытки управления пакетами на стороне клиента, такие как Jam, Volo или Ender.Эти менеджеры могли использовать Bower как зависимость.

Цель

Bower — просто установить пакеты, разрешить зависимости из bower.json, проверить версии, а затем предоставить API, который сообщает об этих вещах. Ничего больше. Это серьезное отклонение от прошлых попыток управления пакетами браузера.
Bower предлагает универсальное, неоправданное решение проблемы управления пакетами, одновременно предоставляя API, который может быть использован более самоуверенным стеком сборки.

С другой стороны, gulp предоставляет следующие ключевые функции:

Предпочитая код конфигурации, gulp упрощает простые вещи и делает сложные задачи управляемыми.
Используя мощь потоков узла, вы получаете быстрые сборки, которые не записывают промежуточные файлы на диск.

Строгие правила для плагинов

gulp гарантируют, что плагины остаются простыми и работают так, как вы ожидаете.

«Управление пакетами» , «Открытый исходный код» и «Простой» являются ключевыми факторами, по которым разработчики рассматривают Bower; тогда как «Скорость сборки» , «Читабельность» и «Конфигурация кода поверх» являются основными причинами, по которым предпочтение отдается gulp.

Bower и gulp — это инструменты с открытым исходным кодом. gulp с 31,3 тыс. звездочек GitHub и 4,41 тыс. форков на GitHub оказался более популярным, чем Bower с 15,2 тыс. звездочек GitHub и 1,97 тыс. вилок GitHub.

Согласно сообществу StackShare, gulp имеет более широкое одобрение, упоминается в 1163 стеках компаний и 706 стеках разработчиков; по сравнению с Bower, который указан в 803 стеках компаний и 396 стеках разработчиков.

Инструменты · Bower

Bower используется вместе с другими инструментами для интеграции со всевозможными установками и рабочими процессами.

Грунт

grunt-bower-concat
Задача Grunt для автоматического объединения всех установленных компонентов Bower.

grunt-wiredep
Внедрите компоненты Bower прямо в HTML с помощью Grunt.

grunt-bower-requirejs
Автоматически подключите установленные компоненты Bower к вашей конфигурации RequireJS.Также доступен как отдельный инструмент CLI.

grunt-bower-task
Плагин Grunt для автоматизации команд Bower; разрешить конфигурацию необходимых файлов, позволяющую отфильтровать минимальное в проекте.

grunt-preen
Плагин Grunt для удаления нежелательных файлов и папок из пакетов, установленных через Bower.

Глоток

gulp-google-cdn
Заменяет ссылки на скрипты ссылками на Google CDN на основе bower.json

main-bower-files
Обходит зависимости и возвращает массив файлов, определенных в основном свойстве пакетов bower.json .

preen
Модуль Node.js для удаления нежелательных файлов и папок из пакетов, установленных через Bower. Preen также можно использовать через интерфейс командной строки.

gulp-bower-normalize
Подключаемый модуль gulp для копирования файлов в нормализованную файловую структуру, упорядоченную по имени пакета и типу ресурса.

Рельсы и Ruby

bower-rails
граблей для Bower on Rails.

d-i / half-pipe
Gem для замены конвейера ресурсов Rails рабочим процессом на основе Grunt, обеспечивающим зависимости через Bower.

Rails Assets
Rails Assets — это беспрепятственный прокси между Bundler и Bower.

ruby-bower
Привязка Ruby для команд Bower (использует node / execjs вместо обстрела)

spagalloco / bower
Интеграция Bower для ваших приложений Ruby (звездочки).

Ява

Dandelion
Dandelion обеспечивает интеграцию с Bower. Все компоненты Bower сканируются и автоматически преобразуются в комплекты поставщиков. См. Сообщение в блоге.

Приложения и IDE

CodeKit
CodeKit — это приложение для Mac, которое помогает создавать веб-сайты быстрее и лучше.

Telerik AppBuilder
Создавайте гибридные приложения для iOS, Android и Windows Phone 8 с помощью единой чистой кодовой базы HTML5, CSS и JavaScript.См. Сообщение в блоге.

Webstorm
Благодаря встроенному диспетчеру пакетов Bower вы сможете с легкостью искать, устанавливать и управлять клиентскими библиотеками и фреймворками для своего проекта прямо в среде IDE.

NetBeans
Netbeans может разрешать зависимости Bower за вас из среды IDE. См. Сообщение в блоге

Visual Studio 2015
Visual Studio имеет встроенную поддержку для поиска, установки и управления пакетами Bower.Это включает в себя расширенное автоматическое завершение в bower.json для конкретных команд Bower и элементов пользовательского интерфейса в обозревателе решений.

Пакет Intellisense для Visual Studio 2013
NPM и пакет Bower Intellisense непосредственно в редакторе Visual Studio JSON. См. Сообщение в блоге.

Все остальное

alfred-workflows
Набор рабочих процессов Alfred, включающий интеграцию с Bower.

bowerder
Загрузчик компонентов bower для браузеров.Легко импортируйте основные файлы компонентов в свой проект.

Bowcat
npm упаковка. Быстро объедините зависимости вашего проекта bower. Как grunt-bower-concat, но без веса и сложности grunt.

BowerStatic
Обслуживание статических ресурсов, управляемых Bower, с использованием Python WSGI

Pyramid_BowerStatic
Использование Bower через BowerStatic со структурой Pyramid

cakephp-bower
Плагин CakePHP для Bower.

kooshy-fe
Интегрирует веб-интерфейс для Bower.

paulmillr / read-components
читает корневой файл bower.json, открывает bower.json всех пакетов и их зависимостей и автоматически вычисляет порядок конкатенации.

SpBowerBundle
Интеграция Bower с symfony2.

octo-linker / github-linker
Расширение Google Chrome, которое связывает зависимости, перечисленные в bower.json на GitHub, со страницами своего проекта.

sublime-bower
Плагин Sublime-текстового редактора для Bower.

broccoli-bower
Загрузите пакеты Bower в Broccoli.

less-plugin-bower-resolve
Импортировать меньше файлов из пакетов Bower.

requirejs-plugin-bower
Плагин Requirejs для автоматического создания и загрузки конфигураций Path / Shim из зависимостей bower.json (InBrowser и InBuild)

flask-bower
Flask-Bower — это расширение flask для обслуживания установленных пакетов bower — также на Github

кронштейны-навесы
Удлинители навесов для кронштейнов.Он позволяет вам управлять зависимостями вашего приложения: искать, устанавливать, обновлять, удалять и т. Д. Поддержка файлов bower.json и .bowerrc.

Django-bower
Простой способ использования bower с вашим проектом Django

vsts-bower
Расширение Bower для сборок непрерывной интеграции Visual Studio Team Services — также на Github.

Инструменты · Bower

Грунт

grunt-bower-concat
Задача Grunt для автоматического объединения всех установленных компонентов Bower.

grunt-wiredep
Внедрите компоненты Bower прямо в HTML с помощью Grunt.

grunt-bower-requirejs
Автоматически подключите установленные компоненты Bower к вашей конфигурации RequireJS. Также доступен как отдельный инструмент CLI.

grunt-preen
Плагин Grunt для удаления нежелательных файлов и папок из пакетов, установленных через Bower.

Глоток

gulp-google-cdn
Заменяет ссылки на скрипты ссылками на Google CDN на основе bower.json

preen
Узел.js для удаления ненужных файлов и папок из пакетов, установленных через Bower. Preen также можно использовать через интерфейс командной строки.

Рельсы и Ruby

bower-rails
граблей для Bower on Rails.

Rails Assets
Rails Assets — это беспрепятственный прокси между Bundler и Bower.

ruby-bower
Привязка Ruby для команд Bower (использует node / execjs вместо обстрела)

spagalloco / bower
Интеграция Bower для ваших приложений Ruby (звездочки).

Ява

Приложения и IDE

CodeKit
CodeKit — это приложение для Mac, которое помогает создавать веб-сайты быстрее и лучше.

NetBeans
Netbeans может разрешать зависимости Bower за вас из среды IDE. См. Сообщение в блоге

Visual Studio 2015
Visual Studio имеет встроенную поддержку для поиска, установки и управления пакетами Bower. Это включает в себя расширенное автоматическое завершение в bower.json для конкретных команд Bower и элементов пользовательского интерфейса в обозревателе решений.

Все остальное

alfred-workflows
Набор рабочих процессов Alfred, включающий интеграцию с Bower.

bowerder
Загрузчик компонентов bower для браузеров. Легко импортируйте основные файлы компонентов в свой проект.

BowerStatic
Обслуживание статических ресурсов, управляемых Bower, с использованием Python WSGI

Pyramid_BowerStatic
Использование Bower через BowerStatic со структурой Pyramid

cakephp-bower
Плагин CakePHP для Bower.

kooshy-fe
Интегрирует веб-интерфейс для Bower.

SpBowerBundle
Интеграция Bower с symfony2.

sublime-bower
Плагин Sublime-текстового редактора для Bower.

broccoli-bower
Загрузите пакеты Bower в Broccoli.

less-plugin-bower-resolve
Импортировать меньше файлов из пакетов Bower.

flask-bower
Flask-Bower — это расширение flask для обслуживания установленных пакетов bower — также на Github

Django-bower
Простой способ использования bower с вашим проектом Django

vsts-bower
Расширение Bower для сборок непрерывной интеграции Visual Studio Team Services — также на Github.

Инструменты · Bower

Грунт

grunt-bower-concat
Задача Grunt для автоматического объединения всех установленных компонентов Bower.

grunt-wiredep
Внедрите компоненты Bower прямо в HTML с помощью Grunt.

grunt-bower-requirejs
Автоматически подключите установленные компоненты Bower к вашей конфигурации RequireJS. Также доступен как отдельный инструмент CLI.

grunt-preen
Плагин Grunt для удаления нежелательных файлов и папок из пакетов, установленных через Bower.

Глоток

gulp-google-cdn
Заменяет ссылки на скрипты ссылками на Google CDN на основе bower.json

Рельсы и Ruby

bower-rails
граблей для Bower on Rails.

Rails Assets
Rails Assets — это беспрепятственный прокси между Bundler и Bower.

ruby-bower
Привязка Ruby для команд Bower (использует node / execjs вместо обстрела)

spagalloco / bower
Интеграция Bower для ваших приложений Ruby (звездочки).

Ява

Приложения и IDE

CodeKit
CodeKit — это приложение для Mac, которое помогает создавать веб-сайты быстрее и лучше.

NetBeans
Netbeans может разрешать зависимости Bower за вас из среды IDE. См. Сообщение в блоге

Visual Studio 2015
Visual Studio имеет встроенную поддержку для поиска, установки и управления пакетами Bower. Это включает в себя расширенное автоматическое завершение в bower.json для конкретных команд Bower и элементов пользовательского интерфейса в обозревателе решений.

Все остальное

alfred-workflows
Набор рабочих процессов Alfred, включающий интеграцию с Bower.

bowerder
Загрузчик компонентов bower для браузеров. Легко импортируйте основные файлы компонентов в свой проект.

BowerStatic
Обслуживание статических ресурсов, управляемых Bower, с использованием Python WSGI

Pyramid_BowerStatic
Использование Bower через BowerStatic со структурой Pyramid

cakephp-bower
Плагин CakePHP для Bower.

kooshy-fe
Интегрирует веб-интерфейс для Bower.

SpBowerBundle
Интеграция Bower с symfony2.

sublime-bower
Плагин Sublime-текстового редактора для Bower.

broccoli-bower
Загрузите пакеты Bower в Broccoli.

less-plugin-bower-resolve
Импортировать меньше файлов из пакетов Bower.

flask-bower
Flask-Bower — это расширение flask для обслуживания установленных пакетов bower — также на Github

Django-bower
Простой способ использования bower с вашим проектом Django

vsts-bower
Расширение Bower для сборок непрерывной интеграции Visual Studio Team Services — также на Github.

javascript — В чем разница между Grunt, Gulp.js и Bower? Зачем и когда их использовать?

По сути, Gulp и Grunt — это системы для автоматизации серий взаимозависимых задач, которые обычно используются для определения «сборки» вашего проекта, как современная интерпретация модели . инструмент.Обычно в проекте используется один из них, но не оба одновременно (во всяком случае, для одних и тех же частей).

Bower отличается и часто используется с Gulp или Grunt: это менеджер пакетов для клиентских библиотек, позволяющий легко поддерживать эти библиотеки в актуальном состоянии, указывать их и их зависимости стандартизированным способом и т. Д.

The Gulp однострочный со своего веб-сайта:

Автоматизируйте и оптимизируйте рабочий процесс

The Grunt однострочник из их:

Средство выполнения задач JavaScript

И Бауэр:

Менеджер пакетов для Интернета

Почему и когда их использовать?

Я думаю, что вышесказанное относится к Gulp и Grunt: если у вас есть задачи, которые вы хотите автоматизировать (например, создание версии веб-сайта с минимизацией, объединением, сжатием и т. Д.); или просмотр файлов на предмет изменений и повторный запуск задач, когда они меняются, для поддержки быстрой разработки), вы можете использовать для этого Gulp и Grunt.

Но дело не только в сборках. Вы можете использовать Gulp и Grunt для любой серии задач, которые вам нужно автоматизировать.

Bower полезен для управления клиентскими библиотеками в ваших проектах. Вы можете использовать Bower для установки, скажем, последней версии Bootstrap, и он поместит соответствующие файлы в стандартные места вашего проекта. Bower может обновить эти файлы, если выйдет более новый Bootstrap.Если библиотека зависит от других библиотек (например, JS Bootstrap полагается на jQuery), Bower помогает управлять этим деревом. Есть полезные задачи для Grunt (и, я полагаю, для Gulp), которые могут даже автоматизировать добавление тегов script и ссылок в ваш HTML для этих библиотек, имея заполнитель в исходном HTML, который в основном говорит: «Поместите сюда библиотеки Bower».

javascript — Для чего нужны npm, bower, gulp, Yeoman и grunt?

Вы рядом!
Добро пожаловать в JavaScript 🙂

Позвольте мне дать вам краткое описание и одну функцию, над которой большинство разработчиков тратят некоторое время.

беседка
Ориентирован на пакеты, которые используются в браузере. Каждая установка bower указывает ровно на один файл, который нужно включить (можно загрузить больше). Из-за успеха webpack, browserify и babel он в основном устарел как первоклассный менеджер зависимостей.

Обновление 2018: bower в основном устарел в пользу NPM

нпм
Исторически фокусируется на коде NodeJS, но уступает место браузерным модулям.Не позволяйте никому вводить вас в заблуждение: NPM огромен. NPM также загружает МНОГО файлов в ваш проект, и новая установка npm всегда является хорошим поводом заварить новую чашку кофе. NPM прост в использовании, но может нарушить работу вашего приложения при изменении среды из-за слабого способа ссылки на версии и произвольности публикации модулей. Термоусадочная пленка Research и установка npm --save-exact

Обновление 2018: NPM выросло! Было реализовано множество улучшений в отношении безопасности и воспроизводимости.

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

2018 Обновление: grunt в основном устарел. Его убили простые в написании конфигурации веб-пакетов.

глоток
Делает то же самое, что и ворчание, но быстрее.

npm сценарий запуска
Возможно, вам вообще не понадобятся программы для выполнения задач. Сценарии NodeJS действительно легко писать, поэтому большинство сценариев использования позволяют настраивать рабочий процесс автоматизации задач. Запускайте сценарии из контекста вашего файла package.json с помощью npm run-script

веб-пакет
Не пропустите веб-пакет. Особенно, если вы чувствуете себя потерянным во многих способах преобразования JavaScript в согласованный модульный код.Webpack упаковывает файлы .js в модули и делает это великолепно. Webpack отличается высокой расширяемостью и также предлагает хорошую среду разработки: webpack-dev-server
Используйте вместе с babel для получения наилучших возможностей JavaScript на сегодняшний день.

Йомен
Строительные леса. Чрезвычайно ценный для команд с разным опытом, поскольку он обеспечивает управляемую общую основу для архитектуры ваших проектов. Есть даже подмости для строительных лесов.

Введение в Bower, Grunt и Gulp в Visual Studio

Microsoft осознала, что веб-интерфейс, особенно JavaScript и CSS, может быть таким же сложным, как и любой другой аспект веб-приложения.Несколько лет назад я сам участвовал в создании одностраничного приложения на JavaScript, и могу поручиться за тот факт, что эти веб-интерфейсы могут быть действительно сложными. В то время не было решения Visual Studio (VS), поэтому я использовал Node.js, который имеет множество инструментов веб-разработки, как отдельное приложение.

Однако Microsoft теперь добавила новые функции в Visual Studio 2015 (VS2015), которые делают существующие веб-инструменты, используемые общим сообществом веб-разработчиков, доступными внутри Visual Studio.Многие из этих инструментов включаются автоматически, если вы создаете новое приложение ASP.NET 5 / MVC6, теперь известное как ASP.NET Core 1.0, как я буду называть его в этой статье. Однако те же инструменты доступны и для существующих проектов ASP.NET MVC5, если вы знаете, как их разблокировать. Об этом и говорится в этой статье — о разблокировке и использовании этих новых веб-инструментов.

Примечание : хотя в этой статье рассказывается о VS2015, она также применима к VS2013, поскольку те же функции Bower, Grunt и Gulp доступны для VS2013 через дополнительные расширения.Если у вас VS2013, прочтите статью Скотта Хансельмана о том, какие пакеты вам нужны.

Мне лично потребовалась мощь этих инструментов в проекте электронной коммерции ASP.NET MVC5, который близится к завершению, и мы делаем довольно радикальные вещи для дизайна и интерфейса JavaScript. Я не хотел обновляться до ASP.NET Core 1 на столь позднем этапе проекта, тем более что ASP.NET Core 1 сильно отличается от MVC5 и все равно еще не выпущен. Поэтому я начал использовать эти инструменты в существующем проекте с целью следовать ASP.NET CORE 1, чтобы максимально упростить последующее обновление.

Эта статья должна быть полезна людям, которые хотят увидеть, какие изменения есть между текущей системой использования NuGet, BundleConfig и Web Essentials и новым подходом, основанным на диспетчере веб-пакетов под названием Bower, плюс автоматические системы построения с использованием Grunt и / или Gulp. . В нем рассказывается, как преобразовать существующее приложение MVC5 для использования Bower и Grunt, но также упоминается, как проект ASP.NET CORE 1 решает ту же проблему.

Примечание : Эта статья сопровождается примером приложения с открытым исходным кодом, которое вы можете просмотреть или загрузить. Это приложение запускалось как пустое веб-приложение MVC5 с использованием NuGet и BundleConfig, а затем я преобразовал проект для использования Bower и Grunt.

Зачем переходить с NuGet на специальный диспетчер веб-пакетов?

Прежде чем я начну, стоит задать вопрос, почему вам следует отказаться от NuGet и Web Essentials. Если вы создали веб-приложения внутри VS, то вы знаете, что NuGet может предоставлять веб-пакеты, такие как JQuery, BootStrap.js и т. д. Так зачем менять?

На самом деле существуют другие специализированные менеджеры веб-пакетов, такие как NPM или Bower, которые используются во всем веб-сообществе. Из-за такого широкого использования эти менеджеры веб-пакетов лучше охватывают различные веб-библиотеки и, что более важно, часто более актуальны, чем аналогичные предложения NuGet.

Что касается сборки веб-пакетов, расширение VS Web Essentials действительно хорошо, но, с другой стороны, есть пакеты автоматизации сборки, такие как Grunt и Glup, которые используются сообществом веб-разработчиков в целом.Эти инструменты имеют смысл использовать, потому что они имеют гораздо больше функций и быстрее адаптируются к появлению новых инструментов и технологий.

Это определенно хороший шаг вперед для серьезных веб-разработчиков, но, как и все остальное, нам нужно изучить некоторые новые способы работы.

Переход с NuGet на Bower

Если вы создадите новое решение ASP.NET CORE 1 / MVC в VS2015, то проект MVC будет сильно отличаться от текущей структуры ASP.NET MVC5. Это связано с тем, что вся структура была переконфигурирована, чтобы быть более применимой к современной веб-разработке (см. ASP.Обзорная статья NET CORE 1 для получения дополнительной информации).

Нас интересует, как он обрабатывает веб-пакеты, потому что, если мы собираемся принять Bower и т. Д., Мы хотели бы использовать тот же подход, что и новая структура ASP.NET, чтобы любые будущие обновления были проще. В ASP.NET CORE 1 внесено много изменений, но основные изменения веб-пакета:

Он автоматически использует Bower, а не NuGet, для загрузки веб-пакетов, таких как JQuery, Bootstrap и т. Д.
Он включает виртуальную папку «Зависимости», которая содержит:
У него нет App_Start / BundleConfig.cs, потому что Gulp выполняет объединение / минификацию.

Итак, давайте теперь изменим наш существующий проект MVC5, чтобы он соответствовал этому подходу.

1. Используйте Bower, а не NuGet для управления веб-пакетами

Если у вас есть приложение MVC5, вы не увидите опцию Manage Bower Packages ни в одном из ваших меню. Для разблокировки функции нужен файл. Поэтому первым шагом является создание файла bower.json в вашем проекте MVC5, щелкнув правой кнопкой мыши папку проекта MVC в обозревателе решений и выбрав: Добавить > Новый элемент , а затем найти ‘ Bower Configuration файл ‘в списке шаблонов, e.г.

Это создаст два файла и активирует Bower. Это два файла:

bower.js на : это файл, который Bower записывает при загрузке пакетов. Это полезно для восстановления пакетов, что в данном случае означает восстановление файлов Bower, если они еще не загружены. Поскольку вы обычно не включаете веб-пакеты в систему управления версиями, это необходимо, если вы загружаете приложение в другую среду разработки.
.bowerrc : это файл конфигурации Bower, который содержит такие вещи, как каталог, в который будут записываться пакеты. По умолчанию это «wwwroot / lib», что соответствует новой структуре каталогов ASP.NET CORE 1. Однако для MVC5 я рекомендую вам изменить его на « lib », чтобы каталог lib находился на верхнем уровне.

Когда у вас есть эти файлы, вы должны обнаружить, что если щелкнуть правой кнопкой мыши папку проекта MVC в обозревателе решений, теперь появляется новая опция: Управление пакетами Bower .

Примечание : Я обнаружил, что эта команда не появляется сразу после добавления файлов. Это исправляет перезапуск Visual Studio и перезагрузка решения.

Выбрав функцию Manage Bower Packages , вы откроете экран (показанный ниже), очень похожий на новый экран V3 NuGet. Однако в этом случае он обращается к bower.io API, чтобы вы могли просматривать пакеты, доступные через Bower.

Будьте осторожны : Я обнаружил несколько проблем в текущем интерфейсе Bower:

Я использовал интерфейс, чтобы попытаться найти пакет под названием « fontspy », но он не смог его найти, хотя поисковый запрос Бауэра показал, что он там есть.Однако, если я зашел в файл bower.json и набрал « fontspy », intellisence узнал об этом и дал мне версию. Затем я щелкнул правой кнопкой мыши файл bower.json и выбрал Restore Packages и fontspy loaded ok. Интерфейс ни разу не показал, что загружено fontspy .
Я нашел Underscore с помощью интерфейса, но он дал только версию 1.5.2, которая является более старой версией. Если я зашел в bower.json и набрал «подчеркивание», он нашел версию 1.8.3. Я использовал эту версию, используя для ее загрузки пакеты восстановления (см. Пункт 1).
Интерфейс говорит «Нет зависимостей» для пакетов, которые действительно имеют зависимости, что немного сбивает с толку. Щелкнув «URL проекта» и просмотрев файл « bower.json », вы увидите фактические зависимости. Однако, даже если на экране не отображаются зависимости, Bower при необходимости загрузит все зависимые пакеты.

Если выбрать и установить пакет, произойдут две вещи:

Беседка .json обновляется загруженными пакетами.
Пакет и все зависимые от него пакеты загружаются в каталог, на который указывает. bowerrc .

Вот содержимое bower.js на после загрузки JQuery, BootStrap и Microsoft.jQuery.Unobtrusive.Validation .

{

«имя»: «ASP.NET «,

» private «: true,

» dependencies «: {

» jquery «:» 2.1.4 «,

» bootstrap «:» 3.3.5 «,

» Microsoft.jQuery.Unobtrusive .Validation «:» ~ 3.2.3 «

}

По умолчанию загруженные пакеты не включаются в проект, что хорошо, поскольку мы не хотим, чтобы они отправлялись на веб-сайт или сохранялись в системе контроля версий. Однако это означает, что для их просмотра нам нужно включить опцию « Показать все файлы» в обозревателе решений VS, а после установки нового пакета вам потребуется « Обновить » обозреватель решений. Посмотреть.Вот вид каталогов загруженных пакетов с открытой загрузкой.

Примечание : Вы не увидите каталог lib в примере приложения, поскольку он не включен в систему управления версиями. Если вы загружаете приложение, вам нужно щелкнуть правой кнопкой мыши файл «bower.json» и выбрать «Восстановить пакеты». Это загрузит пакеты и заполнит каталог lib.

Примечание : вы увидите, что пакет jquery.validation загружен, хотя он не отображается в беседке .json файл. Это связано с тем, что файлы bower.json для Microsoft.jQuery.Unobtrusive.Validation говорят, что это зависит от jquery.validation , поэтому Bower автоматически загружает его, если его еще нет.

2. Удалите веб-пакеты, загруженные NuGet

Совет : Мне потребовалось немного поиска, чтобы найти эквивалентные веб-пакеты в Bower. JQuery был простым, но у некоторых пакетов есть разные версии с очень похожими именами. Перед удалением версий NuGet стоит сопоставить файлы, загруженные NuGet, с эквивалентом bower.

Раньше вы использовали NuGet для загрузки своих веб-пакетов, но при переходе на Bower я действительно рекомендую вам удалить эти пакеты из NuGet. Это гарантирует, что вы не запутаетесь между двумя пакетами и, что более важно, если Bower обновит свои пакеты, вы не сможете использовать более старый пакет, загруженный NuGet. Я также предпочитаю не иметь длинный список файлов JavaScript в каталоге «Script» — теперь я могу помещать туда свои файлы JavaScript, и это не сбивает с толку.

Чтобы удалить загруженные пакеты NuGet, просто откройте NuGet и выберите вкладку « Installed », затем «Удалить» пакеты, которые сейчас обрабатывает Bower. Обратите внимание, что ваши текущие представления и макеты перестанут работать, что приводит меня к следующему разделу.

Переход с BundleConfig на Grunt / Gulp

В ASP.NET MVC5 CSS и JavaScript файлы обычно доставлялись с помощью App_Start / BundleConfig.cs, который также следил за объединением и минификацией в выпущенном приложении.Кроме того, если вам требовалась компиляция Less, Sass, TypeScript, CoffeeScript, шаблонов, спрайтинга изображений и т. Д., Вы могли использовать Web Essentials.

Новый способ — использовать инструменты автоматизации сборки, такие как Grunt или Glup, для достижения того же самого. Как я объяснял ранее, эти инструменты имеют большую базу «плагинов», которые включают в себя все функции Web Essential и многое другое.

У вас есть выбор: использовать Grunt или Gulp, или и то, и другое. Они оба делают одно и то же, но немного по-разному. В итоге я использовал Grunt не по большей части, чем нашел несколько полезных команд в формате Grunt.Gulp — это стандартный инструмент автоматизации, если вы создаете новый проект ASP.NET CORE 1, но любой из них выполнит свою работу.

Примечание : Если вы хотите использовать Gulp вместо Grunt, я рекомендую эту документацию ASP.NET CORE 1 по Gulp. Если вам нужен пример файла Gulp, создайте проект ASP.NET CORE 1 / MVC и посмотрите созданный им gulpfile.js.

1. Установка Grunt

Инструменты автоматизации сборки должны быть загружены, и для этого мы используем NPM. NPM — это библиотечная система, которая упрощает совместное использование кода.Grunt (и Gulp), а также их плагины могут быть загружены NPM в ваше приложение.

Сначала вам нужно добавить файл конфигурации NPM в проект так же, как вы это делали для файла конфигурации Bower: щелкните правой кнопкой мыши папку проекта MVC в обозревателе решений и выберите: Добавить > Новый элемент , а затем найдите ‘ NPM Configuration file ‘ в списке шаблонов.

Это добавляет файл с именем package.json и открывает вам окно с этим файлом.Теперь вы вручную добавляете нужные плагины. К счастью, вы получаете отличную помощь intellisense с названиями пакетов и их версиями, так что это не так уж сложно. То, что вы добавите, зависит от того, что вы хотите сделать, но вот мой файл для начала:

{

«версия»: «1.0.0»,

«имя»: «ASP.NET»,

«частный»: true,

«devDependencies»: {

«grunt»: «0 .4.5 «,

» grunt-contrib-clean «:» 0.6.0 «,

» grunt-contrib-cssmin «:» 0.14.0 «,

» grunt-contrib-jshint «:» 0.11.0 » ,

«grunt-contrib-concat»: «0.5.1»,

«grunt-contrib-uglify»: «0.8.0»,

«grunt-contrib-watch»: «0.6.1»,

«grunt-contrib-copy»: «0.8.2»

}

Вот ссылка на справочную статью, из которой я получил это.Единственная дополнительная команда, которую я добавил, была grunt-contrib- copy , которая мне нужна для копирования файлов шрифтов начальной загрузки и некоторых других файлов стандартной библиотеки.

После того, как вы заполнили или изменили файл package.json, щелкните файл правой кнопкой мыши и выберите Восстановить пакеты . Это заставит npm искать эти пакеты и загружать их. Если вы выполняете обновление в обозревателе решений VS, вы должны найти пакет / плагины в каталоге «node_modules».

Предупреждаем : Если вы допустили ошибку в файле, вы не получите никакого сообщения об ошибке при запуске «Восстановить пакеты» — он все равно говорит «Установка пакетов завершена». Однако, если файлы не обновляются, откройте окно вывода > Bower / NPM .

Многие названия говорят вам, что делает каждый плагин, например grunt-contrib-cssmin , -conat . Менее очевидным является grunt -contrib-uglify , который является минификатором JavaScript, grunt-contrib-clean полезен для удаления старых файлов / каталогов, а grunt-contrib-watch — полезный инструмент для наблюдения за тем, если файлы меняются и автоматически запускаются некоторые команды.

2. Определите свои задачи Grunt

Вы определяете задачи, которые хотите вызвать, в файле конфигурации Grunt, используя обычный щелчок правой кнопкой мыши по проекту и выбирая Добавить> Новый элемент. Выберите параметр «Файл конфигурации Grunt», оставьте имя по умолчанию, gruntfile.js, и нажмите кнопку «Добавить».

Есть много способов сделать это, и на самом деле нет места для объяснения всех возможностей, но я дам некоторые ссылки позже. Чтобы дать вам общее представление, я перечислил очень урезанный g runtfile.js , который только объединяет и минимизирует файлы CSS.

модуль.export = function (grunt) {

// Конфигурация проекта.

grunt.initConfig ({

concat: {

css: {

src: [‘lib / bootstrap / dist / css / bootstrap.css’, ‘Content / Site.css’],

dest: ‘ css / styles.css ‘

cssmin: {

css: {

src:’ css / styles.css ‘,

dest:’ css / styles.min.css ‘

}

});

// Загрузите плагин, который предоставляет необходимые нам задачи

grunt.loadNpmTasks (‘grunt-contrib-concat’);

grunt.loadNpmTasks (‘grunt-contrib-cssmin’);

// Задачи по умолчанию.

grunt.registerTask (‘по умолчанию’, []);

// Построить задачи.

grunt.registerTask (‘build: css’, [‘concat: css’, ‘cssmin: css’]);

};

В приведенном выше примере я перечислил файлы, которые я хотел объединить, из пакетов, загруженных ранее Бауэром.Самый простой способ сделать это — сравнить имена файлов, загруженных через существующий класс BundleConfig , и найти то же имя в каталоге lib. Файлы, которые вам нужны, часто находятся в каталоге с именем « dist », но некоторые пакеты, такие как Microsoft.jQuery.Unobtrusive.Validation , не подчиняются этому правилу.

Если для gruntfile.js задан код, показанный выше, то, если вы можете открыть окно Task Runner Explorer (попробуйте View> Other Windows> Task Runner Explorer ), вы должны увидеть что-то вроде этого:

Вы можете увидеть задачи concat: css и cssmin: css , а также задачу build: css , которая выполняет concat: css , за которым следует cssmin: css .Результатом запуска concat: css является то, что вы найдете файл с именем « styles.css» , который представляет собой комбинацию (связку) файла bootstrap.css, за которым следует файл Site.css . Если вы запустите cssmin: css , появится второй файл с именем «styles.min.css»: это уменьшенная версия «styles.css».

Вы запускаете команды, щелкнув команду правой кнопкой мыши и выбрав Выполнить . Обратная связь довольно хорошая, результат задачи отображается справа от командной части окна.

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

Примечание: другой файл gruntfile в примере приложения.

Вы обнаружите, что в примере приложения я использую другой подход к указанию файлов, которые находятся в каждом пакете, потому что я хочу, чтобы другая функция, BundlerForBower (поясняется позже), также имела доступ к списку пакетов и свои файлы.Поэтому я помещаю массив файлов в файл json, который храню в каталоге App_Data. Вы можете увидеть полную версию моего gruntfile.js и файл json, который он читает.

3. Привязка действий к событиям Visual Studio

Вы можете привязать любое из действий в GruntFile к событию Visual Studio: Before Build, After Build, Clean and Project Open . Вы делаете это, щелкнув правой кнопкой мыши команду, на которую хотите создать ссылку, и выбрав Bindings .Ниже приведен пример, взятый из документации по ASP.NET grunt, где вы привязываете функцию часов к Project Open .

Эти привязки хранятся в виде комментария в специальном формате вверху файла gruntfile.json .

4. Доставка CSS / JavaScript в браузер

Новый проект ASP.NET CORE 1 / MVC6 не использует BundleConfig.cs для объединения и минимизации CSS и JavaScript. Он использует новую функцию razor < environment names = ”Development”> для выбора между отдельными файлами или объединенными и минифицированными файлами, созданными задачей Grunt / Glup.Кажется, что подход состоит в том, чтобы включить все отдельные файлы в режим разработки. В производстве / выпуске он включает объединенный и минифицированный файл с суффиксом блокировки кеша, добавленным с помощью нового тега asp-append-version внутри HTML < script >. Тег asp-append-version генерирует уникальный хэш на основе содержимого файла (см. Это полезное объяснение ответа stackoverflow).

В существующем проекте MVC5 у нас нет новой среды < environment > или тега asp-append-version , поэтому нам нужно найти альтернативу.Это можно сделать двумя способами:

а. Используйте BundleConfig.cs для доставки объединенных файлов

Одна из причин, по которой я выбрал подход Grunt, заключается в том, что он создает как объединенный, неминифицированный файл, так и минифицированный файл как для CSS, так и для JavaScript. Это означает, что я мог бы создать пакет внутри BundleConfig.cs, который выглядел бы так:

bundles.Add (новый StyleBundle («~ / Content / css»).Включить (

«~ / css / mainCss.css»));

В режиме разработки он предоставляет один большой файл CSS, styles.css, который не минифицирован. В режиме выпуска он будет использовать файл styles.min.css с суффиксом блокировки кеша, то есть строкой, которая изменяется при изменении файла, что гарантирует отсутствие использования более старой, кэшированной в браузере версии.

г. Создание класса BundlerForBower

Вышеупомянутое решение работает, но вызывает множество проблем при отладке JavaScript.Поскольку весь смысл использования Bower и т. Д. Заключается в том, что у вас много внешнего кода для отладки первого решения, это меньше, чем идея.

Поэтому я создал специализированную версию MVC5 BundleConfig, названную BundlerForBower или B4B для краткости , , которая специально написана для тесного взаимодействия с Bower, Grunt и Gulp. Он также следует некоторым стилям дизайна, используемым в текущих приложениях ASP.NET Core 1.

B4B состоит из некоторого кода, который выполняет аналогичную роль в классе BundleConfig MVC, плюс два метода расширения, которые очень похожи на вспомогательные методы Html на классы `Styles` и` Scripts` MVC5 для доставки пакетов в представление.Поэтому довольно легко преобразовать существующие представления MVC5 в B4B, сделав следующие замены:

@ Styles.Render («~ / Content / cssBundle»)

… заменяется на…

@ Html.HtmlCssCached («cssBundle»)

… и…

@ Скрипты.Визуализация («~ / bundles / javaScriptBundle»)

… заменяется на…

@ Html.HtmlScriptsCached («javaScriptBundle»)

Помимо пакетов, которые доставляют группы файлов из вашего приложения, ASP.NET Core 1 имеет набор тегов для доставки файлов из сети доставки контента (CDN) с возможностью отката.Я воспроизвел эту функцию в B4B, поскольку она очень полезна. Публичные CDN доступны по всему миру для многих стандартных библиотек, таких как JQuery и Bootstrap, и могут быть быстрее, чем локальная доставка, особенно если пользователь уже загрузил стандартную библиотеку при использовании другого веб-сайта.

Я написал статью под названием «Введение в BundlerForBower для ASP.NET MVC5», в которой подробно рассказывается, как работает B4B. Это проект с открытым исходным кодом (MIT), который включен в образец приложения.

Мои размышления об использовании Bower и Grunt

Я думаю, что Bower и Grunt / Gulp — это действительно хороший шаг вперед по сравнению со старыми NuGet, BundleConfig и Web Essentials. Я обнаружил несколько проблем, о которых упоминал в этой статье, но их было легко обойти, и, скорее всего, они скоро будут исправлены. Разница была очевидна сразу же, поскольку теперь я гораздо лучше контролировал свои веб-пакеты. Он решил три проблемы, которые у меня были с «подходом NuGet, Web Essential», которые стоит перечислить, поскольку они указывают на некоторые преимущества, которые приносит этот новый подход.

1. Лучшее покрытие пакетов

Я использую пакет JavaScript под названием JQuery-FontSpy, которого нет в NuGet. Раньше мне приходилось вручную копировать нужные файлы с GitHub. Однако JQuery-FontSpy, конечно же, доступен в Bower. Это типично для более специализированных пакетов и одна из причин перехода на Bower.

2. Более свежие пакеты

Я использую шаблоны handlebars.js в своем веб-приложении для динамического создания сложного HTML во время выполнения с помощью JavaScript.Хотя пакет handlebars доступен через Nuget, он имеет версию 3.0.0, которая не является последней, и в ней отсутствует функция, которую я хотел бы использовать. Однако версия Bower — это последняя версия 4.0.3, и поскольку Bower — это основной способ выпуска подобных пакетов, он всегда будет иметь самую последнюю версию.

Это напоминает нам, что веб-пакеты попадают в NuGet только потому, что кто-то берет на себя труд передать их в NuGet, и они могут не чувствовать необходимости обновлять его. Принимая во внимание, что Bower является основным инструментом для развертывания веб-пакетов, поэтому будет доступна последняя и лучшая из пакетов.

3. Библиотеки Bower могут содержать дополнительную информацию

Nuget-версия таких библиотек, как BootStrap и JQuery, содержит только последние версии файла .js и .min.js. Однако, если вы загрузите эти библиотеки через Bower, вы обнаружите, что у них есть каталоги, содержащие различные части библиотеки.

Это очень полезно для меня при переходе моего сайта электронной коммерции от использования BootStrap к окончательной схеме дизайна CSS. Хотя мне не нужна большая часть CSS BootStrap, я хотел бы использовать некоторые из его модулей, например Moda ls , чтобы избавить меня от необходимости заново изобретать этот код.Если бы я использовал NuGet, мне пришлось бы перейти на сайт начальной загрузки и выполнить пользовательскую загрузку, которую мне пришлось бы повторить, если бы вышла какая-либо новая версия. Однако с помощью Bower я просто установил пакет bootstrap и добавил отдельные модальные JavaScript и CSS через less, файлы, которые мне нужны, из каталогов bootstrap \ js и bootstrap \ less в мою сборку gruntfile.js сценарий. Если я хочу добавить еще один модуль, например всплывающую подсказку, я просто включаю эти файлы в свой сценарий сборки.Это намного лучше, чем индивидуальная загрузка.

Еще больше веб-инструментов…

Я должен упомянуть альтернативу / дополнение к Bower и т. Д. В виде расширения «Node.js tools для Visual Studio» для VS. У него есть некоторые дополнительные функции по сравнению с обычным Bower, Grunt / Glup, такие как отладка и профилирование JavaScript. Это однозначно стоит посмотреть.

Как я уже сказал в начале, я использовал Node.js как отдельное приложение несколько лет назад при разработке одностраничного приложения и узла.js был отличным, хотя и немного сложным для изучения, исходя из фона VS. Очевидно, ASP.NET CORE 1 будет использовать Bower, Grunt / Gulp как стандарт, поэтому я решил начать с этого пока. Вы можете использовать как сборку в Bower, так и расширение Node.js вместе, так что, возможно, я смогу перейти на расширение Node.js в будущем.

Заключение

В этой статье я описал четыре вещи:

Как новое приложение ASP.NET CORE 1 работает с Bower и его системой автоматизации веб-сборки.
Я описал, как изменить существующий ASP.NET MVC5, чтобы он использовал Bower и систему автоматизации веб-сборки вместо NuGet и BundleConfig.cs
Я представил полезный пакет с открытым исходным кодом под названием BundlerForBower , который предоставляет функции, аналогичные BundleConfig.cs , но специально разработанный для работы с Bower, Grunt и Gulp.
Я сделал веб-структуру приложения MVC5 как можно ближе к ASP.NET CORE 1 обрабатывает веб-пакеты.

Вместе с примером приложения с открытым исходным кодом на GitHub это должно предоставить вам простой пример того, как будет выглядеть преобразованное приложение MVC5. Он также предлагает вам возможное решение для обслуживания отдельных или миниатюрных файлов без помощи некоторых новых тегов ASP.NET CORE 1.

Итак, придерживаетесь ли вы MVC5 или переходите на ASP.NET CORE 1, статья поможет вам отойти от NuGet и BundleConfig.cs в новый и лучший подход к работе с веб-пакетами в Visual Studio.

Я надеюсь, что все это поможет вам освоить новый способ работы с интерфейсным кодом. Надеюсь, вы найдете его таким же полезным, как и я.