Gulp bower: gulp, npm и bower — враги рутины

Leave a Comment / Разное / By /

[Перевод] Введение в 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.

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

© Habrahabr.ru

match made in Heaven (также) – clubmate.fi продолжение поста «Бауэр и Грант: союз, заключенный на небесах». С Gulp дела обстоят еще лучше.

Если вы не знаете, что такое Bower и как его использовать, это объясняется в первом посте серии.

Проблема с Bower

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

Плагин Gulp для спасения

Плагин main-bower-files делает несколько вещей:

  1. Проверяет проекты bower.json на наличие зависимостей.
  2. Затем находит эти зависимости из bower_components/ и копирует их исходники.

Это все, что он делает, затем вам нужно создать поток из этого источника и направить его в нужное место.

Обратите внимание: Основной файл определяется в файле Bower.

json каждого проекта.

Установить через надежный NPM:

 $ npm install --save-dev main-bower-files

Затем определите задачу:

 var gulp = require('gulp')
var mainBowerFiles = требуют('главные-бовер-файлы')
gulp.task («беседка», функция () {
  // mainBowerFiles используется как src для задачи,
  // обычно вы передаете данные через задачу
  возвращаться (
    глоток
      .src(mainBowerFiles())
      // Затем передать его в нужный каталог, я использую
      // dist/lib, но на самом деле это может быть что угодно
      .pipe(gulp.dest('dist/lib'))
  )
})

Теперь вы бы нормально установили пакет, а потом запустили бы задачу Bower:

 $ bower install --save some-package
$ gulp bower

Примечание: Существуют и другие плагины.

Что делать, если нет основного файла?

Затем необходимо определить переопределение в bower.json . Например, для

echo.js не определен основной файл , но есть основной файл . Сделайте переопределение, вот пример Bower.json:

 {
  "имя": "какой-то проект",
  "devDependencies": {
    "нормализовать-scss": "~3.0.2"
  },
  "зависимости": {
    "echojs": "~1.7.0"
  },
  "переопределяет": {
    "эхо": {
      // Каталог в Bower-компонентах
      "main": "dist/echo.js" // Расположение основного файла
    }
  }
}

Полностью автоматизировать

Вы можете просмотреть bower_components/ и автоматически запускать bower-main-files, когда происходит изменение. Вот пример задачи:

 var gulp = require('gulp')
gulp.task('часы', функция () {
  // Все файлы в bower_components
  gulp.watch('bower_components/**', ['bower'])
})

Общие ошибки

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

. Следовательно, они присутствуют в bower_components , но не перечислены в файле bower.json . devDependencies тоже не копируются. Просто переустановите пакеты: $ npm install --save some-package .

Вот пример bower.json 

 {
  "имя": "какой-то проект",
  // Не копируется
  "devDependencies": {
    "scut": "~1.0.1",
    "нормализовать-scss": "~3.0.2"
  },
  // Копируются только зависимости
  "зависимости": {
    "jquery": "~2.1.1",
    "зепто": "~1.1.6",
    "требуется": "~ 2.1.16"
  }
}

liorm/heroku-buildpack-nodejs-bower-gulp — Сборочные пакеты — Heroku Elements

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

  • Создайте новое приложение, используя heroku create --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.git . Чтобы быть в безопасности, вы должны разветвить это и использовать URL-адрес вашего форка.
  • Добавьте задачу Gulp, которая создает ваше приложение. По умолчанию сборочный пакет вызывает
    gulp build     .
    • Чтобы указать собственную задачу: Запустите heroku config:set GULP_TASK=build (Или любое другое имя).
  • Добавьте файл bower.json / .bowerrc , который будет использоваться с установкой bower . Пакеты, не входящие в bower.json , удаляются при каждой сборке.
  • Кроме того, в сборочном пакете есть несколько дополнительных точек входа. Он будет искать точки входа в следующем порядке:
    • Procfile : например. веб: узел server.js .
    • npm запускает скрипт .
    • файл server.js .
    • файл app.js .

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

bower.json или gulpfile.js . В остальном его можно использовать так же, как и другие пакеты сборки Node.js, за исключением дополнительных точек входа.

Вещи, которые произойдут

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

  • Если найден bower.json
    • Извлеките ключ каталога из .bowerrc , если он присутствует
    • Запустите npm install bower , чтобы установить Bower локально
    • Запустите bower install , чтобы установить bower_components .
    • Кэш bower_components или любой альтернативный каталог, указанный в
      .bowerrc
  • Если найден gulpfile.js
    • Запустите npm install gulp для локальной установки gulp во время сборки
    • Запустите gulp build для сборки приложения
  • Если Procfile не найден
    • Ищет сценарий запуска npm
    • Затем для файла server.js
    • А затем для файла app.js

Кэширование компонентов Bower очень похоже на кэширование node_modules для npm. Кэш восстанавливается перед каждой сборкой и bower prune запускается для удаления всего, что больше не нужно, перед выполнением bower install . Это так же, как стандартный пакет сборки обрабатывает кэширование.

Бонус: также устанавливает последнюю версию npm + nasm, которая является зависимостью для imageMin.

Некоторые полезные псевдонимы

Мне также нравится создавать несколько полезных псевдонимов, которые помогают мне выполнять развертывание в одну строку. (Добавьте следующее в свой .bash_profile):

 heroku-push() {
 git push геройку мастер $1 $2 $3
 героку открыть
}
героку-удалить () {
 приложения heroku: уничтожить -a $1 --подтвердить $1
}
героку-авто-создать () {
 heroku создать $1 $2 $3 --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.git
 геройку-толчок
}
псевдоним heroku-create='heroku create --stack cedar-14 --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *