Gulp что это за программа

Основы сборки на Gulp и автоматизации процессов

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

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

Оба эти сборщика являются исполнителями задач (task runner) и работают по одному алгоритму. Сначала мы создаем папку проект (ну или несколько папок, нас вообще никто ничем не ограничивает, но удобнее иметь одну папку). После того, как мы создали какой-то проект, для использования сборщика нам необходимо создать файл с командами, понятный нашему сборщику. После того, как мы настроили все нужные нам действия, скармливаем файл с командами сборщику и все.

Gulp за 30 минут

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

На процессе установки Gulp подробно останавливаться не буду, отмечу только три момента. Во-первых, для работы Gulp необходимо установить node.js и менеджер пакетов npm. Во-вторых, Gulp необходимо установить как локально, так и глобально.

В-третьих, тот функционал, которым я хотел воспользоваться, был только в 4 версии, которая доступна только через Github (можно было и без этого, но так интереснее). Еще обращу внимание читателя, что я не буду освещать такую вещь, как gulp.watch (то есть автоматическое выполнение выбранных тестов при изменении определенных файлов или файлов в папке). Мне данная опция пока ни разу не пригодилась, так как проекты я отлаживаю локально и собираю уже готовый локальный проект и потом выкладываю уже весь проект целиком.

Итак, сам процесс установки Gulp в моем случае начинается с инициализации папки, назовем ее projectpack:

npm init

заполняем все данные для нашего проекта. В идеале в папке можно сразу создать файл gulpfile.js, чтобы он сразу прописался основным файлом в package.json при инициализации. Далее нам необходимо поставить gulp, причем глобально и потом локально. Ставить мы будем сразу 4 версию:

npm install gulpjs/gulp-cli -g npm install gulpjs/gulp#4.0 —save-dev

Все, теперь надо проверить нашу текущую установленную версию:

[18:08:36] CLI version 1.2.2 [18:08:36] Local version 4.0.0-alpha.2

Все, Gulp установлен и мы можем начать разработку собственной сборки. В свою сборку я буду включать следующие действия: объединение и минификация файлов CSS, объединение и минификация файлов JavaScript и оптимизация изображений. Для всех этих действий нам понадобятся следующие расширения для Gulp: gulp-concat, gulp-imagemin, gulp-autoprefixer, gulp-cssnano, gulp-jshint, gulp-uglify. Все файлы для обработки мы будем хранить в папке source, в которой у нас будут папки css, images, js, а обработанные файлы класть в папку destination.

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

Устанавливаем следующие расширения для Gulp следующими двумя командами.

npm install jshint #необходимо установить для использования с gulp-jshint npm install gulp-concat gulp-imagemin gulp-autoprefixer gulp-cssnano gulp-jshint gulp-uglify —save-dev

Если все пакеты встали у нас без проблем, то нам достаточно посмотреть на package.json в разделе devDependencies или выполнить npm list –-depth=0. Все, проверив все поставленные зависимости создаем файл gulpfile.js, в который помещаем следующий код:

// подключаем раширения var gulp = require(‘gulp’), concat = require(‘gulp-concat’), imagemin = require(‘gulp-imagemin’), autoprefix = require(‘gulp-autoprefixer’), cssnano = require(‘gulp-cssnano’), jshint = require(‘gulp-jshint’), uglify = require(‘gulp-uglify’); // берем все файлы css из папки источника и обрабатываем // autoprefix автоматически добавляет вендорные префиксы, теперь из не надо писать 🙂 // concat добавляем все к одному файлу, так мы получим только один файл // cssnano минифицирует CSS // кладем обработанные данные в папку назначение gulp.task(‘css’,function() < console.log(‘css files started’); return gulp.src(‘source/css/**/*.css’) .pipe(autoprefix(< browsers: [‘last 2 versions’] >)) .pipe(concat(‘styles.css’)) .pipe(cssnano()) .pipe(gulp.dest(‘destination/css/’)); >); // берем все файлы js из папки источника и обрабатываем // jshint проверяет js код на потенциальные ошибки и проблемы // concat добавляем все к одному файлу, так мы получим только один файл // uglify минифицирует js файл // кладем обработанные данные в папку назначение gulp.task(‘js’, function() < console.log(‘javascript files started’); return gulp.src(‘source/js/**/*.js’) .pipe(jshint()) .pipe(jshint.reporter(‘default’)) .pipe(concat(‘scripts.js’)) .pipe(uglify().on(‘error’, function(e) )) .pipe(gulp.dest(‘destination/js/’)); >); // берем все картинки из папки источника и обрабатываем // оптимизируем gif // оптимизируем jpg // оптимизируем png // оптимизируем svg // кладем обработанные данные в папку назначение gulp.task(‘img’,function() < console.log(‘img compression started’); return gulp.src(‘source/images/**/*.+(png|jpg|jpeg|gif|svg)’) .pipe(imagemin([ imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo(]>) ])) .pipe(gulp.dest(‘destination/images/’)); >); // по умолчанию мы параллельно запускаем все три задачи на выполнение // gulp.parallel есть только в 4 версии Gulp именно за этим мы ее и ставили gulp.task(‘default’,gulp.parallel(‘css’,’js’,’img’));

Все, теперь можно прямо из командной строки либо просто запустить gulp, тогда у нас выполнится задача по умолчанию, а именно все три задачи. Или мы можем выполнить gulp css, для обработки CSS файлов, выполнить gulp js, для обработки javasript файлов или отдельно выполнить gulp img, для обработки картинок.

UPDATE: Совсем забыл сказать, что использование сборщиков пакетов позволяет отказаться от разных серверных решений по минификации, будь то, отдельное решение как minify или готовое дополнение к MODX, как MinifyX. С точки зрения скорости отдачи статические файлы лучше, а сборщики делают возможность собирать их нажатием одной кнопки, или вообще без нажатий 🙂

Источник: www.devmarks.ru

Gulp для начинающих

От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.

Это далеко не полный список возможностей Gulp. Если постараться, то можно даже создать генератор статических сайтов (я делал!). Так что да, Gulp это очень мощный инструмент. Однако, если вы хотите в нем разобраться, придется потратить время на изучение Gulp.

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

Почему Gulp?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Что необходимо настроить

К концу это статьи у вас будет настроенная программа, которая будет способна выполнять описанные в начале статьи задачи:

Компиляция Sass в CSS

Обновление браузера при любом сохранении файлов

Оптимизация всех ресурсов (CSS, JS, шрифты и изображения)

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

Установка Gulp

Перед установкой Gulp вам нужно установить Node.js. Если он еще не установлен, то загрузите пакет установки с сайта Node. После того, как вы разберетесь с Node, можно приступить к установке Gulp. Введите следующую команду в командную строку:

Источник: webformyself.com

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

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

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

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

Ну, и что же такое 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 — это альтернатива, которая позволит вам решать эти задачи проще и быстрее.

Источник: webkyrs.info

Gulp что это за программа

Fullstack JavaScript разработчик

1. Статьи
2. Как верстать проще и быстрее
3. gulp, npm и bower — враги рутины

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

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

Что это за ребята?

Наверняка вы слышали о node.js. По сути это тюнингованный движок JavaScript V8, предназначенный для запуска js вне браузерной среды, т.е. для использования JS в качестве серверного языка сценариев или для разработки утилит командной строки.

Как и у любой современной платформы, у node.js имеется менеджер пакетов, позволяющий установить любой необходимый пакет для Вашего приложения — npm

На момент написания статьи, npm интегрирован в node.js, поэтому если Вы установили ноду, npm у вас уже есть.

Bower, как и npm, является пакетным менеджером, однако отличается тем, что нацелен на frontend библиотеки. К примеру, с помощью bower можно установить bootstrap или jquery со всеми зависимостями.

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

Эти ребята способны сэкономить кучу вашего драгоценного времени! (нет, серьёзно!)

Как Вы начинаете новый проект? Заходите на getbootstrap.com, скачиваете архив с bootstrap, заходите на jquery.com, скачиваете jquery, заходите еще на n-ое количество сайтов в поиске нужных библиотек, а это, между прочим, довольно затратно по времени, да еще и требует кучи телодвижений и действий.

В тот момент, когда у Вас наконец сработает заветное — ЗАДОЛБАЛО, Вы и поймете выгоды от использования этих инструментов.

Один только bower дает возможность сэкономить кучу времени на поиске и установке нужных frontend библиотек. Буквально одной командой мы устанавливаем bootstrap, jquery, кучку других полезных и не очень библиотек, причем все необходимые зависимости будут разрешены без вашего участия. Все что вам остается сделать — подключить эти библиотеки в html файле.

Gulp позволяет автоматизировать сборку проекта, имеет огромную библиотеку плагинов для практически любых задач — от компиляции less/sass и запуска autoprefixer до сжатия изображений и автоматической перезагрузки страницы в браузере при изменении исходных файлов (так называемый live-reload).

На словах ты Лев Толстой.

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

В нашем проекте мы будем использовать less в качестве препроцессора css. Также нам понадобятся bootstrap, jquery, autoprefixer.

Если bower и gulp еще не установлены, сделаем это:

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

Далее нужно создать папку с проектом и инициализировать в ней npm:

Команда npm init задаст вам пару вопросов и создаст файл package.json. В этом файле будет храниться информация о проекте, а также списки зависимостей. Это очень удобно при совместной разработке, поскольку позволяет не засорять cvs кучей библиотек.

В случае, когда вы получаете обновленный package.json следует выполнять команду npm update, чтобы обновить/доустановить библиотеки. Также это работает и в bower.

Здесь мы снова устанавливаем gulp, но на этот раз локально. Это нужно для того чтобы функционал gulp был доступен в gulpfile.

Затем инициализируем bower:

Подобно npm — bower хранит списки установленных зависимостей в файле bower.json, поэтому в cvs достаточно будет добавить только его.

Итак, полдела сделано! Установим jquery и bootstrap (jquery является зависимостью bootstrap, поэтому его можно было бы опустить):

Ключ —save заставляет bower выставить в bower.json имена установленных пакетов. Также существует ключ —save-dev, который служит для разграничения пакетов по разным окружениям, но пока что мы этой темы касаться не будем.

На заметку

ОК! С bower разобрались, теперь самое время написать gulpfile для сборщика проекта.

Вот небольшой пример gulpfile:

)) .pipe(autoprefixer(< browsers: [‘last 50 versions’], cascade: false >)) .pipe(concat(‘style.css’)) .pipe(gulp.dest(‘./css’)) >); // задача для вывода результата компиляции в браузере gulp.task(‘browser-sync’, [‘less’], function() < browserSync.init(< server: < baseDir: «./» >>); >); // задача для отслеживания изменений в файлах gulp.task(‘watch’, function () < gulp.watch(‘./less/*.less’, [‘less’]); gulp.watch(‘./css/*.css’).on(«change», browserSync.reload); gulp.watch(‘./*.html’).on(‘change’, browserSync.reload); >); // задача по умолчанию gulp.task(‘default’, [‘browser-sync’, ‘watch’]);

Основное предназначение — компилировать less → css, выставлять вендорные префиксы, а также синхронизировать изменения файлов с браузером.

gulp

Как вы увидели выше — писать сборочные скрипты для gulp достаточно просто, ведь это ни что иное как обыкновенный JavaScript!

Сборочный скрипт состоит из списка задач (task). Задачи это как-бы именованные наборы действий, каждую задачу можно вызвать отдельно — приписав её имя в качестве параметра при вызове gulp. (Например, gulp less запустит только компиляцию less). При запуске gulp без параметров, будет запущена задача default.

У задач могут быть зависимости от других тасков, это определяется вторым параметром функции task (если передать массив имен задач, то они будут выполнены перед зависимой задачей).

Например в нашем gulpfile задача browser-sync перед своим выполнением вызовет задачу less.

Тело задачи обычно состоит из вызовов gulp.src() — эта функция является началом gulp конвеера. Параметр функции обычно задает файл (или маску пути), который будет передан последующим функциям по цепочке.

Функция pipe является элементом конвеера gulp и позволяет выполнить ту или иную обработку файла и передает результат своего выполнения следующей конвеерной функции. (Например, pipe(less(. )) преобразует less в css, после чего pipe(autoprefixer(. )) выставляет вендорные префиксы в готовом css).

По завершении конвеерной обработки результат нужно куда-то сохранить, для этого используется конвеерная функция dest, параметром которой является путь назначения (В примере обработанный css будет выгружен в папку css)

В принципе, для успешного юзинга gulp этой информации должно быть вполне достаточно, тем более что каждый gulp-пакет распространяется с примером подключения. (В большинстве случаев — юзаем стратегию ctrl+c, ctrl+v).

Верстаем

Со скриптами gulp мы разобрались, поэтому самое время испытать все это в бою. Я предлагаю создать такую html страницу (index.html):

Test gulp!

Hello!

lorem ipsum dolorem sit amet

2016 test page

Стилизуем

Теперь добавим в папку less файл style.less с таким текстом:

.text < font-size: 14px; >.footer-text

Запускаем

Все готово, можно попробовать запустить gulp. В результате выполнения в браузере откроется livereload вкладка, как на скриншоте:

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

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

Что ж, с инструментами разобрались, самое время обезжиривать HTML!

Источник: ikfi.ru

Сборка front-end проекта с помощью Gulp и Node.js

Хотите набрать побольше баллов в Google Page Speed? Не знаете что такое «сборка front-end»? Тогда вам сюда, будет интересно.

Что такое Node.JS?

Node.JS принято называть «северным JavaScript». Эта платформа позволяет писать программы, используя синтаксис JavaScript.

Есть реализации для Windows, Mac OS и Linux.

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

Что такое Gulp?

Gulp — это пакет, написанный на Node.JS, который помогает веб-мастерам осуществлять сборку проектов на этапе верстки макетов.

Для установки Gulp необходимо воспользоваться командной строкой.

npm install gulp

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

В этом примере с помощью Gulp мы сделаем следующее:

• Автоматически оптимизируем изображения для веба;
• Собираем один минифицированный файл стилей из предпроцессоров (SASS, SCSS);
• Собираем один минифицированный файл со скриптами.

Как собирать front-end с помощью Gulp?

Чтобы понять, как все работает, разберем все по шагам.

Структуру можно посмотреть на скриншоте.

• Папка assets — для исходников изображений, стилей и скриптов;
• Папка public — результат сборки проекта будет находится именно в ней;
• gulpfile.js — файл, в котором описана логика работы сборщика;
• package.json — файл, в котором содержатся информация о программах и плагинах, использующихся для корректной работы Gulp.

package.json

< «name»: «gulp_project», «version»: «1.0.0», «description»: «Example», «main»: «gulpfile.js», «scripts»: < «test»: «echo «Error: no test specified» exit 1″ >, «author»: «Dmitriy Ilichev», «license»: «ISC», «devDependencies»: < «gulp»: «^3.9.0», «gulp-csso»: «^1.0.0», «gulp-concat»: «^2.6.0», «gulp-uglify»: «^1.2.0», «gulp-imagemin»: «^2.3.0», «gulp-sass»: «^2.1.1» >>

Из этого файла понятно следующее:

• Название проекта gulp_project , версия и описание;
• Главный файлом является gulpfile.js ;
• Автор проекта, лицензия — все это не столь важно и попросту эти поля могут быть пустыми;
• Интересным пунктом является devDependencies . В нем описаны зависимости.

Файл можно отредактировать в обычном текстовом редакторе. Его также можно создать для нового проекта командой npm int .

Исходя из этого, Node.JS понимает, что для работы нам понадобятся:

• Gulp версии 3.9.0 и выше для сборки;
• Gulp-csso версии 1.0.0 и выше — плагин для минификации стилей (css);
• Gulp-concat версии 2.6.0 и выше — плагин для склейки нескольких файлов в один;
• Gulp-uglify версии 1.2.0 и выше — плагин для минификации javascript;
• Gulp-imagemin версии 2.3.0 и выше — плагин для оптимизации изображений;
• Gulp-sass версии 2.1.1 и выше — плагин для получения css из sass (scss).

Отлично! После этого нужно все это установить. Делается это из командной строки. Находясь в папке с проектом нужно выполнить команду:

npm install

Вся необходимая информация будет взята из package.json .

После всего этого волшебства появится служебная папка node_modules .

gulpfile.js

/* * * Определяем переменные * */ var gulp = require(‘gulp’), // Сообственно Gulp JS uglify = require(‘gulp-uglify’), // Минификация JS concat = require(‘gulp-concat’), // Склейка файлов imagemin = require(‘gulp-imagemin’), // Минификация изображений csso = require(‘gulp-csso’), // Минификация CSS sass = require(‘gulp-sass’); // Конверстация SASS (SCSS) в CSS /* * * Создаем задачи (таски) * */ // Задача «sass». Запускается командой «gulp sass» gulp.task(‘sass’, function () < gulp.src(‘./assets/styles/style.scss’) // файл, который обрабатываем .pipe(sass().on(‘error’, sass.logError)) // конвертируем sass в css .pipe(csso()) // минифицируем css, полученный на предыдущем шаге .pipe(gulp.dest(‘./public/css/’)); // результат пишем по указанному адресу >); // Задача «js».

Запускается командой «gulp js» gulp.task(‘js’, function() < gulp.src([ ‘./assets/javascripts/jquery-2.1.4.min.js’, ‘./assets/javascripts/bootstrap.min.js’, ‘./assets/javascripts/script.js’ ]) // файлы, которые обрабатываем .pipe(concat(‘min.js’)) // склеиваем все JS .pipe(uglify()) // получившуюся «портянку» минифицируем .pipe(gulp.dest(‘./public/js/’)) // результат пишем по указанному адресу >); // Задача «images». Запускается командой «gulp images» gulp.task(‘images’, function() < gulp.src(‘.assets/images/**/*’) // берем любые файлы в папке и ее подпапках .pipe(imagemin()) // оптимизируем изображения для веба .pipe(gulp.dest(‘./public/images/’)) // результат пишем по указанному адресу >); // Задача «watch». Запускается командой «gulp watch» // Она следит за изменениями файлов и автоматически запускает другие задачи gulp.task(‘watch’, function () < // При изменение файлов *.scss в папке «styles» и подпапках запускаем задачу sass gulp.watch(‘./assets/styles/**/*.scss’, [‘sass’]); // При изменение файлов *.js папке «javascripts» и подпапках запускаем задачу js gulp.watch(‘./assets/javascripts/**/*.js’, [‘js’]); // При изменение любых файлов в папке «images» и подпапках запускаем задачу images gulp.watch(‘./assets/images/**/*’, [‘images’]); >);

Главная фишка — в задаче watch. Запустив ее один раз, можно спокойно работать с источниками, и проект будет автоматически собираться при каждом сохранении редактируемых файлов.

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

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

! Обратите внимание на то, что распаковав у себя этот архив, прежде всего необходимо будет выполнить команду npm install . Папка эта содержит довольно большое количество файлов, и каждый раз копировать/вставлять их — пустая трата времени.

В заключении

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

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

Источник: dmitriyilichev.com