Bower gulp: Зачем используют Bower с Gulp? — Хабр Q&A

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

Содержание

Bower | WebReference

Установка Bower

Установить Bower легко. Предполагаем, что вы уже установили Node.js и npm (смотрите здесь для информации). Вначале инициализируем наш проект, создав файл package.json. Перейдите в папку проекта и наберите в командной строке:

$ npm init
name: (gulp-bower-example)
version: (0.0.0) 0.0.1
description:
entry point: (index.js) public/index.php
test command:
git repository:
keywords:
author: Davey Shafik <[email protected]>
license: (ISC) Apache 2.0
About to write to <path>/gulp-bower-example/package.json:
  
{
  "name": "gulp-bower-example",
  "version": "0.0.1",
  "description": "",
  "main": "public/index.php",
  "dependencies": {
    "bower": "~1.3.5"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Davey Shafik <[email protected]>",
  "license": "Apache 2.0"
}
  
Is this ok? (yes)

Все необходимые запросы должны быть понятны, остальные можно пропустить.

Теперь можно установить Bower.

$ npm install -g bower

Это сделает команду bower доступной глобально.

Чтобы сделать установку локально дополнительно выполните:

$ npm install --save-dev bower

Установка произойдёт в ./node_modules/bower, команда bower доступна в ./node_modules/.bin/bower. Чтобы добавить эту папку в path автоматически, npm включает в себя подкоманду bin, которая вернёт путь к этой папке, независимо от того, где вы находитесь в проекте. Просто добавьте $(npm bin) в свой путь или используйте команду alias следующим образом:

alias npm-exec='PATH=$(npm bin):$PATH'

Теперь можете набрать bower и он подберёт правильный вариант (локальный, если он существует или глобальный в противном случае). Если вы использовали alias, то можно указать команду npm-exec.

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

Как и другие менеджеры пакетов Bower использует файл bower.json для настройки зависимостей.

Подобно Composer и npm, Bower будет относиться к каждому проекту как к устанавливаемой библиотеке по своим правилам.

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

$ bower init
[?] name: gulp-bower-example
[?] version: 0.0.1
[?] description:
[?] main file: public/index.php
[?] what types of modules does this package expose?
[?] keywords:
[?] authors: Davey Shafik <[email protected]>
[?] license: Apache 2.0
[?] homepage:
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
{
  name: 'gulp-bower-example',
  version: '0.0.1',
  authors: [
    'Davey Shafik <[email protected]>'
  ],
  main: 'public/index.php',
  license: 'Apache 2.0',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}
  
[?] Looks good? Yes

Чтобы создать новый файл bower. json приходится пройти через множество вопросов. Некоторые из них довольно очевидные, в то время как другие могут несколько запутать.

main file (основной файл) — точка входа для приложения, в случае PHP это, вероятно, что-то вроде public/index.php.

what types of modules does this package expose? (какие типы модулей поддерживает этот пакет?) — если вы не создаёте собственные библиотеки, то можете пропустить этот пункт.

set currently installed components as dependencies? (задать уже установленные компоненты в качестве зависимостей?) — если вы установили пакеты вручную с помощью bower install, то они будут добавлены в качестве зависимостей в ваш новый bower.json.

add commonly ignored files to ignore list? (добавить обычно игнорируемые файлы в список?) — заставляет игнорировать типовые файлы и папки, такие как node_modules, bower_components или tests.

would you like to mark this package as private which prevents it from being accidentally published to the registry? (хотели бы вы пометить этот пакет как приватный, чтобы предотвратить его от случайной публикации в реестре?) — ответ yes остановит вас от случайной публикации «пакета» в реестре Bower.

С этого момента вы теперь можете легко установить пакеты, обновляя bower.json следующим образом:

$ bower install --save jquery bootstrap

Это позволит установить последние версии jQuery и Bootstrap в папку bower_components. Если вы проверите свой bower.json, он будет обновлён так:

"dependencies": {
  "jquery": "~2.1.1",
  "bootstrap": "~3.1.1"
}

Теперь, если мы хотим установить эти зависимости для проверки новых версий, можем просто выполнить:

$ bower install

Если папка webroot не является корневой для вашего проекта (что вероятнее так), вы можете легко изменить папку установки, создав новый файл .bowerrc со следующим содержимым:

{
  "directory": "public/bower_components"
}

После того как вы сделали это, удалите исходную папку и установите заново:

$ rm -Rf bower_components
$ bower install

Вы можете ссылаться на файлы как /bower_components/<пакет>/dist/<файлы>. Например, чтобы включить Bootstrap вы должны добавить следующие две строки в соответствующих местах:

<link href="/bower_components/bootstrap/dist/css/bootstrap.
  min.css" rel="stylesheet">
<link href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js">

Чтобы держать свои библиотеки обновлёнными до современных просто используйте bower update:

$ bower update bootstrap

Берём контроль

Bower даёт нам полный контроль над установкой и управлением нашими библиотеками и их зависимостями — таким образом легко отслеживать управление версиями и легко распространять библиотеки внутри коллектива с помощью bower.json и bower install.

Теперь, когда наши зависимости под контролем, поддерживается их версионность и актуальное состояние, что насчёт развёртывания?

В следующем разделе будет рассмотрено как мы можем работать с компонентами Bower при разработке и развёртывании проекта.

Автор и редакторы

Автор: Дэви Шафик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Bower, Gulp и Yeoman
Ctrl+←

Gulp
Ctrl+→

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

У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.

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

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

Install NodeJS

yum update

yum update

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

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

Install NodeJS

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.

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

Install NodeJS

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

1

2

3

4

5

6

7

8

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

Install 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 handlebars@2. 0.0

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

Установка Gulp

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

Install Gulp

npm install gulp -g

npm install gulp -g

Установка Grunt

Install Grunt

npm install -g grunt-cli

npm install -g grunt-cli

Asyncee · Django, webpack, bower и gulp

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

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

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

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

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

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

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

  • описываемый шаблон проекта
  • gulpfile.js
  • конфиг webpack
  • описание frontend-зависимостей

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

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

.
├── 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, мы будем использовать описанный в статье подход к разработке фронтенда.

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

…psst! Пока Bower поддерживается, мы рекомендуем использовать Yarn и Webpack или Parcel для интерфейсных проектов. Узнайте, как мигрировать!

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

Grunt

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 для копирования файлов в нормализованную файловую структуру, упорядоченную по имени пакета и типу ресурса.

Rails & Ruby

bower-rails
rake tasks for Bower on Rails.

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

Ресурсы Rails
Ресурсы Rails — это посредник между Бандлером и Бауэром.

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

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

Java

Одуванчик
Одуванчик обеспечивает интеграцию с 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, включающий интеграцию с 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.

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

спросил

Изменено 3 года, 11 месяцев назад

Просмотрено 9к раз

Я бэкэнд-разработчик, и меня немного смущают npm, bower, gulp, grunt и Yeoman. Всякий раз, когда я спрашиваю кого-то, какова их цель, ответ, как правило, сводится к менеджеру зависимостей — для всех. Конечно, нам не нужны четыре разных инструмента, которые делают одно и то же?

Может кто-нибудь объяснить, что каждый из них хорош для , в как можно меньшем количестве предложений — если возможно, только по одному на инструмент, используя язык, понятный пятилетнему ребенку (с навыками разработки)?

Например:

  • SVN хранит, управляет и отслеживает изменения в нашем исходном коде

В прошлом я использовал maven, Jenkins, nexus и ant; может быть, вы могли бы сравнить инструменты выше с этими?

Также не стесняйтесь добавлять в список другие интерфейсные инструменты.

Вот что я обнаружил на данный момент — хотя не уверен, что это правильно:

  • Bower менеджер зависимостей для интерфейсной разработки / библиотек JS, использует плоский список зависимостей
  • Менеджер зависимостей npm для сервера node.js, может разрешать транзитивные зависимости/деревья зависимостей
  • grunt запускает задачи, очень похожие на Jenkins, но локальность в командной строке
  • Yeoman предоставил строительные леса, т.е. каркасные проекты
  • gulp то же, что и grunt, но написано только на js
  • сервер node.js для js-приложений?
  • git децентрализованный SCM/VCS, аналог svn/cvs

Я близко? 🙂

  • javascript
  • npm
  • gruntjs
  • Bower
  • инструменты

1

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

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

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

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

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

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

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

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

залпом Делает то же самое, что и grunt, но быстрее.

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

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

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

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

  1. Я использую yeoman , чтобы построить базовый скелет.
  2. Я использую узел в качестве среды выполнения для своего приложения. т.е. запустить узел имя приложения
  3. Я использую npm для установки модулей узла, которые помогают мне написать приложение в узле
    4. .
  4. Мне может понадобиться какой-нибудь компонент из Bower , например внешние библиотеки, поэтому используйте Bower для их получения.
  5. Теперь, чтобы выполнить какую-то повторяющуюся задачу, я буду использовать grunt или gulp для написания некоторых задач. Поэтому каждый раз, когда я хочу повторить это, например, свернуть мои js-файлы, я вызываю grunt/gulp и заставляю их это делать. Разница, о которой вы спрашиваете, Gulp основан на потоках, а grunt — на задачах.
  6. Я выполняю контроль версий с помощью git для отслеживания изменений

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

    • Grunt фокусируется на конфигурации, а Gulp — на коде
      • .
    • Grunt был построен на наборе встроенных и часто используемых задач, в то время как Gulp пришел к идее не навязывать ничего, кроме того, как микрозадачи, разработанные сообществом, должны соединяться друг с другом. Читать здесь
  1. NodeJS: это неблокирующий язык сценариев на стороне сервера. Это означает, что операции не будут блокировать дальнейшее выполнение, пока текущая операция не завершится.

  1. Git: Как вы упомянули, это широко используемый инструмент SCM. Согласно документам GitHub, он отличается от других инструментов SCM тем, что данные никогда не удаляются.

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

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

    Подробнее

  1. Bower и NPM: Bower и NPM — это менеджеры зависимостей, но модули Bower предназначены для клиентской разработки. NPM — это огромная коллекция модулей, которые можно использовать с серверной частью NodeJS. Этот ТАК ответ охватывает его лучше

1

Я добавил некоторые детали:

npm — это менеджер пакетов для javascript, npm — экосистема пакетов nodejs, но его можно использовать только для интерфейсных проектов.

grunt и gulp полезны для разделения и автоматизации таких задач, как минификация, компиляция, модульное тестирование в командной строке. ) командная строка/процесс.

По поводу различий между gulp , grunt и bower уже есть тикет: в чем разница между Grunt, Gulp.js и Bower? Зачем и когда их использовать?

Nodejs — это больше среда выполнения javascript . Node.js позволяет создавать веб-серверы и сетевые инструменты с использованием js и набора «модулей», которые выполняют различные основные функции и другие основные функции. Источник

В этом тикете резюмируются различия между Git и Subversion: почему Git лучше, чем Subversion?

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Интерфейсные инструменты с Gulp, Bower и Yeoman

БЕСПЛАТНО

Вы можете увидеть всю эту книгу бесплатно.
Нажмите на оглавление, чтобы начать чтение.

Стать рецензентом

Помогите нам создавать отличные книги

Стефан Баумгартнер

  • ноябрь 2016 г.
  • ISBN 9781617292743
  • 240 страниц
  • напечатано в черно-белом

подано под

  • Интернет

размещение заказа…

Не обновляйте и не уходите со страницы.

  • электронная книга

    $23,39

  • печать + электронная книга

    29,24 $

электронная книга Наши электронные книги выпускаются в форматах Kindle, ePub и PDF без DRM + liveBook , наш улучшенный формат электронной книги, доступный из любого веб-браузера. 23,39 доллара США $35,99 вы экономите $13 (35%)

Интерфейсные инструменты с Gulp, Bower и Yeoman (электронная книга) добавлен в корзину

продолжить покупки добавление в корзину

продолжить покупки

добавление в корзину

клиенты также купили эти товары

  • клиенты также купили эти товары
  • Угловой в действии
  • CSS в глубину
  • Веб-производительность в действии
  • Секреты JavaScript-ниндзя, второе издание
  • Реагируй быстро, второе издание

печать + электронная книга Получите печатную копию, доставленную к вашей двери + электронную книгу в форматах Kindle, ePub и PDF + liveBook , наш улучшенный формат электронной книги, доступный из любого веб-браузера. 29 долларов0,24 $44,99 вы экономите $16 (35%)

БЕСПЛАТНАЯ доставка по стране при заказе трех и более печатных книг

Интерфейсные инструменты с Gulp, Bower и Yeoman (печать + электронная книга) добавлены в корзину

продолжить покупки добавление в корзину

продолжить покупки

добавление в корзину

покупатели также купили эти товары

  • клиенты также купили эти товары
  • Разработка Angular 2 с помощью TypeScript
  • Функциональное программирование на JavaScript
  • CSS в глубину
  • OAuth 2 в действии
  • Секреты JavaScript-ниндзя, второе издание

Единственная книга, которая так подробно описывает интерфейсные инструменты.

Palak Mathur, Capital One

Интерфейсные инструменты с Gulp, Bower и Yeoman научат вас, как использовать и комбинировать эти популярные инструменты для настройки индивидуального рабочего процесса разработки от начала до конца.

о технологии

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

о книге

Интерфейсные инструменты с Gulp, Bower и Yeoman научат вас, как настроить автоматизированный рабочий процесс разработки. Вы начнете с понимания общей картины процесса разработки. Затем, используя шаблоны и примеры, эта подробная книга проведет вас через создание конвейера доставки продукта с использованием Gulp, Bower и Yeoman. Когда вы закончите, у вас будет глубокое понимание процесса веб-разработки и навыки, необходимые для создания мощного, настраиваемого рабочего процесса с использованием этих лучших в своем классе инструментов.

что внутри

  • Освоение шаблонов рабочего процесса веб-разработки
  • Автоматизация конвейера доставки продуктов
  • Создание настраиваемых рабочих процессов

о читателе

Эта книга подходит для фронтенд-разработчиков с опытом работы с JavaScript.

об авторе

Штефан Баумгартнер руководил фронтенд-группами, работающими в широком диапазоне стилей разработки и областей применения.

БЕСПЛАТНАЯ доставка по стране при заказе трех и более печатных книг

  • все варианты доставки
  • наша политика возврата/обмена

Содержит достаточно деталей, чтобы вы быстро превратились из новичка в эксперта!

Джейсон Гретц, Страхование владельцев автомобилей

Эта книга дополняет необходимый набор инструментов для разработки интерфейсов.

Унникришнан Кумар, Thomson Reuters

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

Ник А. Уоттс, Американское химическое общество

Инструменты разработчика — Grunt, Gulp, Bower, Yarn, PM2

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

Grunt — инструмент разработчика для запуска задач на JavaScript

Используя широкий ассортимент плагинов Grunt, вы можете автоматизировать множество задач, которые обычно приходится выполнять вручную. Grunt можно использовать для сжатия файлов ( zipup ), компиляции меньшего количества файлов, ( grunt-contrib-less ) уменьшения количества изображений ( grunt-contrib-imagemin ), в дополнение к минимизации JavaScript ( grunt-contrib -uglify ) и многие другие.

Плагины можно настроить в Gruntfile.js или Gruntfile.coffee файлов. Gruntfile.coffee доступен, только если вы используете CoffeeScript. Кроме того, те же два файла используются для определения задач, которые вы хотите автоматизировать. Любой из этих файлов также широко известен как Gruntfile. Обратите внимание, что ваши плагины по-прежнему должны быть каталогизированы в файле package.json , желательно как devDependencies. Просто имейте в виду, что, когда есть дополнительный пакет Node, зависящий от вашего, он автоматически установит все зависимости времени выполнения вашего пакета, но не devDependencies, поскольку они используются во время разработки приложения и не потребуются в развертывание вместе с приложением.

Gulp — система потоковой сборки

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

Опять же, для этого вам понадобится специальный файл — gulpfile.js в корне проекта. Он содержит все текущие задачи. Тем не менее, обратите внимание, что Gulp отдает приоритет коду над конфигурацией, что делает некоторые задачи очень простыми и эффективными, а также сокращает время, затрачиваемое на фактическое создание сборки.

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

Bower — инструмент разработчика для управления зависимостями

Говоря о Bower, мы должны упомянуть NPM, так как оба они имеют много общего. В некотором смысле отношения между Bower и браузером такие же, как у NPM и Node.js. Оба они являются инструментами управления зависимостями. Однако NPM используется, когда модули Node.js нуждаются в установке, в то время как Bower предназначен для управления внешними компонентами, такими как JS, HTML, CSS и т. д., и вам понадобится NPM для установки Bower.

Затем, аналогично тому, как вы делали с NPM, вам потребуется выполнить bower init на терминале, чтобы создать совершенно новый файл конфигурации bower.json (эквивалент package.json для НПМ).

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

Однако, хотя Bower часто упоминается в сообществе, теперь он считается морально старым и все еще используется из-за интенсивного использования в устаревших приложениях. Это более очевидно из примечания автора Bower на домашней странице веб-сайта и аналогичного примечания на странице пакета NPM. Он рекомендует использовать Webpack, Yarn или Parcel, пока Bower находится на обслуживании.

…псст! Пока Bower поддерживается, мы рекомендуем использовать Yarn и Webpack или Parcel для интерфейсных проектов, прочитайте, как мигрировать!

Yarn — детерминированный менеджер пакетов

Сказав это, Yarn действительно является отличной заменой Bower с несколькими очень хорошими новыми функциями. Yarn похож на npm5, поскольку он также использует контрольные суммы для проверки целостности каждого отдельного установленного пакета и использует детерминированный подход с помощью файла блокировки. Детерминизм, когда дело доходит до управления пакетами JavaScript, характеризуется идеей всегда получать одни и те же 9Папка 0044 node_modules с файлом package.json и yarn.lock . Однако это верно только в том случае, если все в вашей команде используют одну и ту же версию Yarn, поскольку положение пакетов в node_modules вычисляется внутри Yarn. Это означает, что использование разных версий вполне может привести к недетерминированному результату из-за небольших различий в Yarn.

Кроме того, Yarn имеет отличные возможности кэширования, выборочное разрешение версий, автоматическое слияние файлов блокировки и рабочих пространств. Последний из них позволяет командам автоматически комбинировать все зависимости от нескольких package.json файлов и установить их сразу. Мало того, он также может создавать символические ссылки между рабочими пространствами, которые зависят друг от друга, что еще более удобно для крупномасштабных проектов. Учитывая все преимущества, неудивительно, что, начиная с версии 1.0.0, Yarn также предустановлен на основных платформах непрерывной интеграции, таких как CircleCI, Travis CI и AppVeyor. Начиная с версии 1.7.0, Yarn также может импортировать свое дерево зависимостей из пакета NPM package-lock.json 9.0045 изначально, без каких-либо внешних инструментов.

Кроме того, Yarn имеет отличные возможности кэширования, выборочное разрешение версий, автоматическое слияние файлов блокировки и рабочие области. Последний из них позволяет командам автоматически объединять все зависимости из нескольких файлов package.json и устанавливать их сразу. Мало того, он также может создавать символические ссылки между рабочими пространствами. Эти символические ссылки будут зависеть друг от друга, что еще более удобно для крупномасштабных проектов. Учитывая все преимущества, неудивительно, что, начиная с версии 1.0.0, Yarn уже установлен на всех основных платформах непрерывной интеграции, таких как CircleCI, AppVeyor, Travis CI. Начиная с версии 1.7.0, Yarn также может экспортировать свое дерево зависимостей из NPM 9.0044 package-lock.json изначально, без использования инструментов.

PM2 — модуль мониторинга процессов для приложений Node.js

PM2 предоставляет вам возможность поддерживать приложения в рабочем состоянии, перезапускать их без простоев и создавать общие задачи DevOps. Мы уже делали более подробный обзор PM2 в нашем учебнике «Как использовать PM2». Он включает в себя команды и дальнейшую разработку внешней панели мониторинга с метриками, опять же созданную командой PM2.

Всегда ли нужны инструменты?

Абсолютно нет. Для некоторых проектов дополнительная абстракция, добавленная инструментами, не только раздует реальный проект, но и замедлит процесс разработки. Часть работы разработчика заключается в том, чтобы найти оптимальный способ выполнения поставленной задачи, и хотя эти инструменты разработчика полезны, они не всегда необходимы для достижения оптимальной сборки. Есть отличные проекты со сложной структурой, которые строятся только с помощью простого NPM.

Хотите узнать больше?

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

gulp-bower — Анализ работоспособности пакетов npm

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

Риск безопасности и лицензии для основных версий

Все версии

Версия Уязвимости Лицензионный риск
0.0768 0.0768 | 04/2019

Популярные

  • C

  • 6

    H

  • 3

    M
  • L
  • H
  • M
  • L

Лицензия
Массачусетский технологический институт

Политика безопасности
Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (9 264)

Скачать тренд

Иждивенцы
260

Звезды GitHub
83

Вилки
23

Авторы
10

Популярность прямого использования

ВЕРХ 10%

Пакет npm gulp-bower получает в общей сложности 9 264 загрузки в неделю. Таким образом, мы забили уровень популярности gulp-bower будет маленьким.

На основе статистики проекта из репозитория GitHub для npm gulp-bower, мы обнаружили, что он снялся 83 раза, и это 260 других проектов в экосистеме зависят от него.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

Частота фиксации

Нет последних коммитов

Открытые задачи
12

Открытый PR
1

Последняя версия
3 года назад

Последняя фиксация
3 года назад

Дальнейший анализ состояния обслуживания gulp-bower на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

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

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js
>=0,8

Возраст
9 лет

Зависимости
8 прямых

Версии
16

Размер установки
26,7 КБ

Распределенные теги
1

Количество файлов
12

Обслуживающий персонал
1

Типы TS
Нет

gulp-bower имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Бауэр | WebStorm

Bower — это менеджер пакетов для клиентских библиотек и компонентов, содержащих HTML, CSS, JavaScript, шрифты, файлы изображений и т. д. Вы можете устанавливать, находить, обновлять и удалять пакеты Bower, не выходя из WebStorm, на специальной странице Bower или из командной строки во встроенном терминале.

Прежде чем начать

  1. Убедитесь, что на вашем компьютере установлен Node.js.

  2. Убедитесь, что в вашем проекте настроен локальный интерпретатор Node.js: откройте диалоговое окно Settings/Preferences ( Ctrl+Alt+S ) и перейдите в раздел Языки и платформы | Node. js. В поле «Интерпретатор узла» отображается интерпретатор проекта Node.js по умолчанию.

    Дополнительные сведения см. в разделе Настройка локального интерпретатора Node.js.

Установка и настройка Bower

Установить Bower

Создать bower.json

  1. Bower init

  2. Ответьте на вопросы, чтобы указать следующие основные настройки:

    • Используемая среда тестирования.

    • Браузеры для автоматического захвата.

    • Шаблоны, определяющие расположение тестовых файлов, которые будут участвовать в тестировании или исключаться из него.

    Узнайте больше на официальном сайте Bower.

Настройка Bower в WebStorm

  1. Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE, и выберите Languages ​​& Frameworks | JavaScript | Бауэр.

  2. Укажите расположение пакета Bower и файла конфигурации bower.json.

Управление пакетами Bower

Bower устанавливает пакеты только как зависимости проекта или зависимости разработки. Узнайте больше на официальном сайте Bower. Вы можете управлять пакетами Bower на странице Bower или в окне инструментов терминала.

  • Во встроенном терминале ( Alt+F12 ) введите одну из следующих команд:

  • Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE и выбрать Languages ​​& Frameworks | JavaScript | Бауэр.

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

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