Gulp это – Начало работы с Gulp — подробная инструкция для самых маленьких пользователей

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

Что такое Gulp и зачем это нужно.

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

Официальный сайт Gulp:

https://gulpjs.com

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

Ну, и что же такое Gulp?

Gulp — это инструмент для автоматизации рутинных задач, которые возникают при веб-разработке. Это может быть не только frontend разработка, это может быть и backend разработка.

Если вы работаете с такими технологиями как html,  css, javascript и.т.д. Если вы внедрите в практику своей работы такой инструмент как gulp, вы значительно ускорите скорость вашей работы и, во вторых, этот инструмент «откроет вам дорогу» к новым возможностям, которые значительно повысят ваш уровень веб-разработки и знаний.

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

Смысл следующий: мы создаем для системы Gulp некие задания. Т.е. описываем эти задания на языке Javascript. Затем, Gulp просто выполняет эти задания в нужной последовательности, так, как мы это прописали. Т.е. Gulp — это просто система по управлению заданиями по веб-разработке. Также ее называют task manager. task — задание, manager — управлять.

Важно понимать, что Gulp — это просто некое ядро, к которому мы прикручиваем дополнительные модули, плагины, которые «учат» Gulp делать какую-то определенную функцию или работу. Устанавливая эти плагины мы получаем новые возможности в системе Gulp, которые мы можем использовать. 

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

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

Какие типовые задачи можно решать с помощью этой системы?

Давайте рассмотрим самые основные из них. Список этих задач может быть достаточно большой.

Задача 1. Минификация кода.

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

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

Задача 2. Объединение кода из разных файлов в один.

Вы можете объединять код из CSS, Javascript файлов и.т.д. в один. Это важно сделать также по причине скорости загрузки документа. При работе с протоколом http каждый запрос к файлу — это дополнительное время загрузки страницы.

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

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

Задача 3. Работа с CSS препроцессорами: sass, less, …

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

Задача 4. Поддержка новых стандартов языка Javascript.

Т.к. язык Javascript является клиентским языком программирования, то он зависит того браузера, на котором будет работать. Если посетитель вашего сайта пользуется какими-то старыми браузерами, у него новые стандарты не будут работать. С помощью Gulp вы можете решить эту задачу. 

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

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

Есть и другие решения, например, система Webpack, которая в последнее время приобретает большую популярность. Но, дело в том, что Webpack — это довольно громоздкая система и для решения каких-то простых задач устанавливать такую большую систему не очень разумно. 

Gulp — это альтернатива, которая позволит вам решать эти задачи проще и быстрее.

Ошибка 404 — Not Found

404
Флаг РоссииФлаг Великобритании

Похоже, что кто-то взял эту страницу и не вернул назад. Испытайте удачу на новой. Список чуть ниже.

It looks like somebody took this page away and did not put it back.

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

Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.

Сделаем поиск лучше!

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на [email protected] если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение — пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. … …….
5. Статьи можно расшарить в соцсетях, нажав на иконку сети:

Gulp. Часть 1. Зачем он нужен? :: Блог веб разработчика

Что вообще такое Gulp?

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

Итак, объясняю на пальцах:

Допустим, вы верстальщик (для примера). Верстаете какой-то проект в котором вам понадобилось комплировать LESS в CSS. Что вы делаете? Правильно, ищите плагин для вашей любимой IDE, настраиваете его и запускаете. Далее вам внезапно понадобилось автоматически собирать спрайты (ведь вручную их делать в фотошопе довольно муторное занятие, поверьте, я знаю). Вы снова ищите плагин для своей любимой IDE, но не находите (скорее всего). Ищите стороннее решение, находите, например скрипт на питоне для автоматического создания спрайтов, долго его устанавливаете и настраиваете (с питоном то вы не бум-бум) и наконец запускаете. Далее вам может понадобиться компилировать, например React.js, так же автоматически. Вы снова ищите плагин под свою IDE, может быть даже находите.

Вроде все работает как надо, так в чем проблема то?

И тут у вас появляется второй проект, который требует всего того же самого, плюс/минус небольшие изменения. И что? Копировать настройки всех плагинов или заного их настраивать? А если вы завтра смените IDE или отдадите проекту другому верстальщику? Вот тут то и помогут таск-менеджеры.

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

Gulp позволит вам делать все те же самые вещи, только быстрее, удобнее и, главное, однотипно из проекта в проект, от IDE к IDE, от компьютера к компьютеру, от человека к человеку.

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

Далее: Часть 2. Установка Gulp

Grunt или Gulp | Блог | Разработка и дизайн сайтов и мобильных приложений

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

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

  1. Задачи Grunt работают с файлами вместо потоков данных: чтобы запустилась следующая задача предыдущая должна записать свои результаты в файл. Gulp же работает с потоком данных и обращается к файловой системе только по началу/завершению своих задач.
  2. В Gulp нет необходимости в плагине
    watch    , потому как возможность реагировать на изменения в файлах уже включена в ядро. Это то что должно быть в любом сборщике сразу, а не выполнятся с помощью плагина.
  3. Конфигурационные файлы Grunt напоминают объект JSON, Gulp же использует более простой JavaScript-код, который в итоге более понятен на больших проектах.

Тем не менее, давайте оценим преимущества и недостатки этих сборщиков для frontend-разработчиков с точки зрения трех параметров: порога вхождения, скорости и производительности и наличии плагинов.

Порог вхождения

Если говорить о начале работы, то начало работы с Grunt несколько проще, но обратная сторона этой медали — это сложность чтения настроек готовых проектов. Gulp лишен этого недостатка: таски в нем так же легко читать, как и писать. Но при достаточной практике эта разница не так заметна.

Пример файла Grunt для минимизации HTML-файла:

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 
 
grunt.initConfig({
    minifyHtml: {
        options: {
            cdata: true
        },
        dist: {
            files: {
                'dist/index.html': 'src/index.html'
            }
        }
    }
});
 
grunt.registerTask('default', ['minifyHtml']);

Пример файла Gulp для минимизации HTML-файла:

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");
 
// task
gulp.task('minify-html', function () {
    gulp.src('./Html/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('path/to/destination'));
});

Таски в Grunt настраиваются в конфигурационном объекте внутри Grunt-файла, в то время как для написания тасков в Gulp используется синтаксис в стиле Node.

Что производительней: Grunt или Gulp?

В Gulp используется концепция потоков: представьте себе, что файлы проходят сквозь «трубу» (pipe) и в разных ее точках с ними выполняются те или иные действия:

Таким способом можно, например, вставить все JavaScript-файлы в pipe скриптов, который:

  1. Объединяет все файлы в один.
  2. Удаляет console и debugger.
  3. Минимизирует код.
  4. Сохраняет результирующий код по указанному адресу.

В Grunt для выполнения этих задач используется wrapper-функция. При этом для обеспечения многопоточности и кэширования файлов приходится ставить дополнительные плагины grunt-concurrent и grunt-newer:

npm install grunt-concurrent --save-dev
npm install grunt-newer --save-dev

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

  1. Передача callback.
  2. Возвращение потока.
  3. Возвращение promise.

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

Плагины

По количеству плагинов Gulp заметно уступает Grunt (1886 и 5246 на момент написания этой статьи), но это вполне может быть связано с тем, что Gulp младше своего коллеги. Вот некоторые плагины для Grunt, которые помогают оптимизировать работу:

grunt-contrib-watch — запускает таски, когда изменяются отслеживаемые файлы.

grunt-contrib-jshint — выполняет валидацию JavaScript-файлов.

grunt-mocha — используется для тестирования с помощью фреймворка Mocha.

grunt-notify — автоматически показывает сообщение при ошибке таска.

grunt-contrib-uglify — минимизирует файлы с помощью UglifyJS.

Все они имеются и у Gulp. Также для Gulp существует плагин gulp-grunt, который позволяет запускать файлы Grunt. Он не создает поток, а вызывается как аргумент:

var gulp = require('gulp');
require('gulp-grunt')(gulp); // add all the gruntfile tasks to gulp 
 
// continue defining tasks... 
gulp.task('do-this', function() {
  ...
});
 
// run them like any other task 
gulp.task('default', [
  // run complete grunt tasks 
  'grunt-minify',
  'grunt-test',
  // or run specific targets 
  'grunt-sass:dist',
  'grunt-browserify:dev'
]);

Учитывая все вышесказанное, какой сборщик выбрать: Grunt или Gulp? Во-первых, мы не советуем вам переходить на Gulp или Grunt просто потому, что кто-то пытается убедить вас в необычайных преимуществах одного из них. Различия не так важны, если лично вам неудобно работать с расхваленным сборщиком.

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

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

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

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

Об авторе

Front-end разработчик

Толя занимался версткой и фронтэнд-проектами студии.

Gulp. Введение.

Вы здесь: Главная — JavaScript — JavaScript Основы — Gulp. Введение.

Gulp. Введение.

Всем привет! Это первая статья из серии, где мы рассмотрим, что такое Gulp, в чем причина его популярности, как его установить и настроить, а также некоторые другие детали.

Что такое Gulp?

Итак, Gulp – это сборщик проектов, написанный на NodeJS. Он позволяет быстро создать нужную структуру проекта, скачать и подключить нужные фреймворки или библиотеки, следить за файлами и, если они обновились, что-нибудь с ними делать. Например, вы можете писать код на Sass , а после сохранения файла Gulp сам проверит, есть ли изменения, и, если они есть, скомпилирует .sass файл в .css файл и обновит браузер на всех подключенных к сети устройствах, чтобы вы могли проверить, как ваш проект отображается на разных разрешениях экрана и разных операционных системах.

В чем причина его популярности?

Так как Gulp написан на NodeJS, все его настройки можно очень легко производить при помощи обычных javascript функций. Если вы уже знаете javascript, то зачем вам учить еще один язык программирования? Именно так подумали создатели платформы NodeJS, а на ее основе уже был создан Gulp. Помимо всего прочего, для данного сборщика проектов уже есть множество модулей, которые значительно облегчат вам написание кода.

Установка

Итак, давайте рассмотрим, как установить Gulp. Делается это очень просто!

Во-первых, убедитесь, что у вас установлена платформа NodeJS и NPM.

Во-вторых, откройте терминал и введите следующую команду:

npm i gulp -g

i – это сокращение от install(установить), а g – global(глобально), что значит, что сборщик проектов будет установлен в вашу систему, а не в определенную папку. Это нужно при первой установке, а впоследствии флаг g вам уже будет не нужен.

Заключение

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

А на этом у меня все. Спасибо за внимание!

  • Gulp. Введение. Создано 08.06.2016 20:36:40
  • Gulp. Введение. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

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