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

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

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 или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

gulp — что означает gulp- «cli»?

Может кто-нибудь объяснить, в чем именно разница между следующими двумя методами установки gulp:

$ npm install --global gulp-cli

А также

$ sudo npm install -g gulp 

Мне кажется, что оба делают одно и то же, за исключением того, что первый метод дает мне версию 1.2.1, а второй дает мне версию 3.9.1

Может кто-нибудь простыми словами, в чем именно заключаются различия? и плюс, что означает «cli»?

37

York Wang

23 Фев 2016 в 10:50

2 ответа

Лучший ответ

Цель gulp-cli — позволить вам использовать gulp как глобальную программу, но без глобальной установки gulp.

Например, если вы установили gulp 3.9.1 глобально, а в вашем проекте testGulp4 локально установлен gulp 4.0, что произойдет, если вы запустите gulp -v в testGulp4?

• Без глобальной установки gulp-cli:

  CLI version 3.9.1
  

  В этом случае отображаемая версия является глобальной версией gulp. Локальная версия 4.0 полностью игнорируется.

• При глобальной установке gulp-cli:

  CLI version 1.2.1
  Local version 4.0.0-alpha.2
  

  В этом случае отображаемая версия является глобальной версией gulp-cli и локальной версией gulp. Глобальный gulp 3.9.1 полностью игнорируется.

Заключение :

• gulp-cli: предпочтительнее, потому что он позволяет использовать разные версии gulp.
• gulp: требуется установка локальной версии gulp.

65

Sep Roland
3 Июл 2016 в 19:14

CLI означает интерфейс командной строки.

gulp — это библиотека JavaScript. Он позволяет использовать gulp из кода JavaScript.

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

21

Quentin
23 Фев 2016 в 07:53

gulp плагины и их установка в проект

var gulp       = require(‘gulp’), // Подключаем Gulp

sass         = require(‘gulp-sass’), //Подключаем Sass пакет

browserSync  = require(‘browser-sync’), // Подключаем Browser Sync

concat       = require(‘gulp-concat’), // Подключаем gulp-concat (для конкатенации файлов)

uglify       = require(‘gulp-uglifyjs’), // Подключаем gulp-uglifyjs (для сжатия JS)

cssnano      = require(‘gulp-cssnano’), // Подключаем пакет для минификации CSS

rename       = require(‘gulp-rename’), // Подключаем библиотеку для переименования файлов

del          = require(‘del’), // Подключаем библиотеку для удаления файлов и папок

imagemin     = require(‘gulp-imagemin’), // Подключаем библиотеку для работы с изображениями

pngquant     = require(‘imagemin-pngquant’), // Подключаем библиотеку для работы с png

cache        = require(‘gulp-cache’), // Подключаем библиотеку кеширования

autoprefixer = require(‘gulp-autoprefixer’);// Подключаем библиотеку для автоматического добавления префиксов

gulp.task(‘sass’, function(){ // Создаем таск Sass

return gulp.src(‘app/sass/**/*.sass’) // Берем источник

.pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass

.pipe(autoprefixer([‘last 15 versions’, ‘> 1%’, ‘ie 8’, ‘ie 7’], { cascade: true })) // Создаем префиксы

.pipe(gulp.dest(‘app/css’)) // Выгружаем результата в папку app/css

.pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении

});

gulp.task(‘browser-sync’, function() { // Создаем таск browser-sync

browserSync({ // Выполняем browserSync

server: { // Определяем параметры сервера

baseDir: ‘app’ // Директория для сервера — app

},

notify: false // Отключаем уведомления

});

});

gulp.task(‘scripts’, function() {

return gulp.src([ // Берем все необходимые библиотеки

‘app/libs/jquery/dist/jquery.min.js’, // Берем jQuery

‘app/libs/magnific-popup/dist/jquery.magnific-popup.min.js’ // Берем Magnific Popup

])

.pipe(concat(‘libs.min.js’)) // Собираем их в кучу в новом файле libs.min.js

.pipe(uglify()) // Сжимаем JS файл

.pipe(gulp.dest(‘app/js’)); // Выгружаем в папку app/js

});

gulp.task(‘css-libs’, [‘sass’], function() {

return gulp.src(‘app/css/libs.css’) // Выбираем файл для минификации

.pipe(cssnano()) // Сжимаем

.pipe(rename({suffix: ‘.min’})) // Добавляем суффикс .min

.pipe(gulp.dest(‘app/css’)); // Выгружаем в папку app/css

});

gulp.task(‘watch’, [‘browser-sync’, ‘css-libs’, ‘scripts’], function() {

gulp.watch(‘app/sass/**/*.sass’, [‘sass’]); // Наблюдение за sass файлами в папке sass

gulp.watch(‘app/*.html’, browserSync.reload); // Наблюдение за HTML файлами в корне проекта

gulp.watch(‘app/js/**/*.js’, browserSync.reload);   // Наблюдение за JS файлами в папке js

});

gulp.task(‘clean’, function() {

return del.sync(‘dist’); // Удаляем папку dist перед сборкой

});

gulp.task(‘img’, function() {

return gulp.src(‘app/img/**/*’) // Берем все изображения из app

.pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования

interlaced: true,

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngquant()]

})))

.pipe(gulp.dest(‘dist/img’)); // Выгружаем на продакшен

});

gulp.task(‘build’, [‘clean’, ‘img’, ‘sass’, ‘scripts’], function() {

var buildCss = gulp.src([ // Переносим библиотеки в продакшен

‘app/css/main.css’,

‘app/css/libs.min.css’

])

.pipe(gulp.dest(‘dist/css’))

var buildFonts = gulp.src(‘app/fonts/**/*’) // Переносим шрифты в продакшен

.pipe(gulp.dest(‘dist/fonts’))

var buildJs = gulp.src(‘app/js/**/*’) // Переносим скрипты в продакшен

.pipe(gulp.dest(‘dist/js’))

var buildHtml = gulp.src(‘app/*.html’) // Переносим HTML в продакшен

.pipe(gulp.dest(‘dist’));

});

gulp.task(‘clear’, function (callback) {

return cache.clearAll();

})

gulp.task(‘default’, [‘watch’]);

Современная сборка 2020 для frontend. Gulp4

Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.

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

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

Gulp

Начнем с главного в нашей сборке.

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

Пример минификации сss

Как видим, все просто: называем нашу задачу css, вызываем функцию src, которая берет данные по определенному шаблону и передает данные по трубе (функция pipe()). Внутри pipe вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию dest. dest — записывает результат по указанному пути.

С pipe можно выстраивать любые цепочки.

Пример

В четвертой версии много чего изменилось, но на что нужно точно обратить внимание — это на gulp.series() и gulp.parallel(). Позже мы разберем параллельное выполнение задач.

Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task():

gulp.task('taskName',function() {
    //do somethings
})

Больше не рекомендуется использовать gulp.task().

Экспортирование функций позволяет разделять на публичные и приватные задачи.

• публичные задачи — экспортируются из вашего gulpfile, что позволяет запускать их командой gulp.
• приватные задачи — создаются для внутреннего использования, как правило, в составе series() или parallel()

Пару слов о шаблонах поиска файлов в функции src.

• templates/*.html — ищет файлы с расширением html в папке templates
• templates/**/*.html — ищет файлы с расширением html во всех папках, которые в templates

Более подробная информация здесь, здесь и здесь.

После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли node.js и npm.

Команды в консоли

Если они не установлены, следуйте инструкциям здесь.

Создаем папку для нашего проекта. Внутри инициализируем npm npm init --yes

Ключ --yes означает автоматические ответы вопрос по проекту.

Создадим три папки:

• build — оптимизированные файлы для использования на сервере
• src — рабочая папка, где будут храниться все наши исходники
• gulp — здесь будут храниться наши tasks

Еще добавим файл .gitignore, чтобы системные файлы не попадали в репозиторий.

Папка /build задокументирована, потому что часто использую GitHub Pages для демонстрации работы.

Не забудьте установить gulp: npm install --save-dev gulp

.gitignore

# Файлы и папки операционной системы
.DS_Store
Thumbs.db

# Файлы редактора
.idea
*.sublime*
.vscode

# Вспомогательные файлы
*.log*
node_modules/

# Папка с собранными файлами проекта
# build/

HTML

У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.

Пример немного не реалистичный, но почти такое делают

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

Пример базового функционала

Новичкам советую обратить внимание еще на несколько возможностей:

• Разделение на модули — удобно, когда используешь БЭМ: один блок — один файл. Подробнее.

Пример из документации

• Миксины — удобно использовать для однотипных блоков. Например, карточки товаров или комментариев. Подробнее.

Пример с документации

Пример с документации

За последнее время сильно ничего не изменилось, только название с Jade на Pug. Подробнее.

Разделяем HTML

На нашем сайте будут две тестовые страницы about и index. Структура на страницах повторяется: есть блоки <footer>, <header>, <head>. Поэтому все нужно вынести в отдельные файлы модули.

Структура проекта

Разберем все более подробно.

• pages — папка для наших страниц, где в корне хранятся непосредственно страницы
• common — хранятся общие блоки для всех страниц
• includes — хранятся модули страниц, где внутри еще одна папка, которая соответствует названию страницы

Пройдемся по файлам:

• layout.pug — шаблон, который хранит основную структуру, и от него наследуются все другие страницы

layout.pug

• index.pug и about.pug — наши страницы, которые наследуются от шаблона и подключают свои контентные модули

pages/index.pug и pages/about.pug

Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.

Установим плагин gulp-pug для компиляции наших шаблонов. Выполните в консоли команду: npm i gulp-pug

Создадим файл pug2html.js в папке gulp/tasks.

pug2html.js

Здесь все понятно: ищем файлы по указанному пути, компилируем и результат выгружаем в папку build. Еще добавим pug-linter, чтобы новички не косячили и сохраняли единый стиль написания кода. Для конфигурации создадим файл .pug-lint.json в корне проекта. Правила для линтера писал на свой вкус. Вы без проблем сможете изменить. Список правил.

Теперь подключаем нашу задачу в файле gulpfile.js.

gulpfile.js

Здесь мы создаем серию с одной таски с названием start; потом мы добавим ещё. Теперь в консоли выполните команду gulp start, и в папке build должны появиться два файла: index.html и about.html.

Еще добавим gulp-w3c-html-validator, чтобы не было нелепых ошибок. Вы, наверное, догадались, что порядок подключения плагинов c помощью pipe() очень важен. То есть перед тем, как вызвать плагин pug() для компиляции, нужно сделать валидацию плагином pugLinter(), а плагин gulp-w3c-html-validator подключаем после pug(), потому что нам нужно валидировать скомпилированный html.

Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.

Пример работы плагина

Финальный код таски pug2html.js

Для стилей мы будем использовать Scss. Все дается по аналогии с задачей pug2html. Создаем новую папку styles и скачиваем нужные пакеты npm install node-sass gulp-sass --save-dev.

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

tasks/styles.js

Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy

Пройдемся по каждому плагину:

• gulp-autoprefixer — автоматическая расстановка префиксов для старых браузеров.
• gulp-shorthand — сокращает стили.

Пример

Файлы styles:

Структура папки styles

global.scss

media.scss

Немного обсудим файл media.scss. Есть два варианта организации медиа-запросов.

1. Писать медиа-запросы ко всему блоку в конце файла.
2. Писать медиа-запросы в самом селекторе, используя @mixin и @include.

Пример второго варианта

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

Последний шаг: подключим normalize.css. Установим командой npm install normalize.css

и добавим @import "../../../node_modules/normalize.css/normalize"; в начале файла global.scss
Зачем нужен normalize.css?

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

Установим сначала все необходимые зависимости npm i gulp-babel @babel/core @babel/preset-env --save-dev

и зависимости для eslint npm install eslint eslint-config-htmlacademy eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --save-dev

Пример

• gulp-terser — минификация и оптимизация javascript.

Задача script

• eslint — мы уже знаем, что делают линтеры. Решил подключить готовые конфиги, потому что очень много разных правил, чтобы все настраивать с нуля.

.eslintrc.json

Устанавливаем плагины npm i gulp-imageMinify gulp-svgstore

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

Шрифты мы просто копируем.

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

Чтобы каждый раз не обновлять страницу при изменении файла, подключим browser-sync. У gulp есть встроенная функция, которая следит за изменениями и вызывает нужные нам функции. Советую зайти и почитать о возможностях browsersync. Мне очень нравится возможность открытия сайта и синхронизации прокрутки страницы на нескольких устройствах. Очень удобно верстать адаптивные сайты: открыл на компьютере, открыл на телефоне — и сразу видишь результат.

Наш локальный сервер. Задача serve

Бывает такое, что сделал опечатку, сохранил код и сборка падает с ошибкой. Нужно снова перезапускать сборку, и со временем это может начать раздражать, поэтому установим npm i gulp-plumber. Plumber будет перехватывать ошибки, и после устранения ошибки сборка восстановит работоспособность. Интегрировать его очень просто, добавляем его первым .pipe(plumber()) в наших трубопроводах цепочках pug2html и styles.

Во время разработки мы будем создавать и удалять файлы. Так как у нас live reload, то созданные файлы автоматически попадут в build. Когда чуть позже мы решим удалить файл, то он останется в папке build, поэтому сделаем еще одну задачу clean, которая будет удалять папку. Установим плагин npm install del. Del.

const del = require('del')

module.exports = function clean(cb) {
  return del('build').then(() => {
    cb()
  })
}

Главное — не забыть вызвать функцию-callback, которая сообщит gulp, что задача выполнена.

Lighthouse

Lighthouse — решение для веб-приложений и веб-страниц, которое собирает современные показатели производительности.

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

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

Скрин с реального проекта

Устанавливаем npm i --save-dev gulp-connect lighthouse chrome-launcher и создаём задачу.

Результат для каждой странички будет генерироваться в папку ./reports. Там будут ‘html’ файлы, они открываются автоматически, но вы сами в любой момент можете их открыть и посмотреть результат.

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

lighthouse.js

Кода многовато, но он простой. Запустили наш локальный сервер с помощью browser-sync, потом хром и в конце lighthouse, где говорим, по какому url искать наш сайт.

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

gulp-npm-dist — очень хороший плагин, мне он нравится тем, что он не просто копирует всю папку модуля, а только нужные файлы. README.md, LICENSE, .gitignore и другие конфигурационные файлы не копируются.

Теперь сделаем, чтобы при изменении package.json вызывался плагин. Не вижу смысла сильно заморачиваться и следить только за изменениями объекта dependencies, поэтому будем просто следить за файлом.

Последняя оптимизация. Часто сложно и лень запоминать консольные команды, там много параметров, вводить все эти пути занимает время,

поэтому запишем длинные команды в более краткие команды.

Рассмотрим такую ситуацию: вы скопировали большой кусок кода с постороннего ресурса, и

он не соответствует вашим правилам форматирования.

Не будете же вы всё править руками? Можно просто в консоли ввести команду, которая все исправит

за вас stylelint ./src/styles/**/*.scss --fix --syntax scss, команда длинная, поэтому запишем ее в NPM-скрипт

Добавили NPM-скрипт

Как видим на скрине, теперь в консоли можно вводить npm run stylelint-fix.

Напишем еще несколько команд:

• npm run start — вместо gulp, привык, что любой проект у меня запускается этой командой
• npm run build — вместо gulp build, такая же ситуация, как в прошлом пункте
• npm run lighthouse — вместо gulp build && gulp lighthouse, сначала собираем проект, а потом уже тестируем
• npm run test — запуск разных линтеров, хорошей практикой будет запускать перед комитом

Не верю я, что вы будете перед комитом запускать npm run test, даже не верю, что я буду. Поэтому скачаем husky и добавим:

"husky": {
    "hooks": {
      "pre-commit": "npm run test"
    }
  }

в package.json. Если npm run test вернет ошибку, то комит не будет сделан.

Очень приятно, если вы прочли всю статью и сумели принять мои мысли. Отвечу на вопросы в комментариях и жду ваших pull requests и issue. Всем приятных сборок.

Ссылка на репозиторий с тем, что у нас получилось: github.

перевод на английский, синонимы, антонимы, примеры предложений, определение,значение, словосочетания

Концепции API

| gulp.js

Следующие концепции являются предпосылками для понимания документации API. На них будут ссылаться повсюду, вернитесь к этой странице для подробных объяснений.

Если вы здесь новичок, начните с Руководства по началу работы.

Винил #

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

Виниловые адаптеры #

Хотя Vinyl позволяет описывать файл, необходим способ доступа к этим файлам. Доступ к каждому источнику файла осуществляется с помощью адаптера Vinyl.

Адаптер предоставляет:

• Метод с сигнатурой src (globs, [options]) и возвращает поток, который создает объекты Vinyl.
• Метод с подписью dest (folder, [options]) и возвращает поток, который потребляет объекты Vinyl.
• Любые дополнительные методы, специфичные для их среды ввода / вывода, такие как symlink метод vinyl-fs .Они всегда должны возвращать потоки, которые производят и / или потребляют объекты Vinyl.

Задачи #

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

Более подробное объяснение см. В разделе «Создание задач».

Globs #

Glob — это строка букв и / или подстановочных знаков, например * , ** или ! , используется для сопоставления путей к файлам.Globbing — это поиск файлов в файловой системе с помощью одного или нескольких глобусов.

Если у вас нет опыта работы с глобусами, см. «Объяснение глобусов».

База глобуса #

База глобуса — иногда называемая родительским элементом глобуса — представляет собой сегмент пути перед любыми специальными символами в строке глобуса. Таким образом, база глобуса /src/js/**.js равна / src / js / . Все пути, соответствующие глобу, гарантированно имеют общую базу глобуса — этот сегмент пути не может быть переменным.

Экземпляры Vinyl, генерируемые src () , создаются с базовым набором glob в качестве их свойства base .При записи в файловую систему с помощью dest () базовый будет удален из пути вывода для сохранения структуры каталогов.

Для получения более подробной информации см. Родительский репозиторий glob.

Статистика файловой системы #

Метаданные файла предоставляются как экземпляр fs.Stats узла. Он доступен как свойство stat в ваших экземплярах Vinyl и используется для внутреннего использования, чтобы определить, представляет ли объект Vinyl каталог или символическую ссылку.При записи в файловую систему разрешения и значения времени синхронизируются из свойства stat объекта Vinyl.

Режимы файловой системы #

Режимы файловой системы определяют, какие разрешения существуют для файла. Большинство файлов и каталогов в вашей файловой системе будут иметь достаточно разрешительный режим, позволяющий gulp читать / записывать / обновлять файлы от вашего имени. По умолчанию gulp создает файлы с теми же разрешениями, что и запущенный процесс, но вы можете настроить режимы с помощью параметров в src () , dest () и т. Д.Если у вас возникли проблемы с разрешением (EPERM), проверьте режимы в своих файлах.

Модули #

Gulp состоит из множества небольших модулей, которые соединены вместе для согласованной работы. Используя semver в небольших модулях, мы можем выпускать исправления ошибок и функции без публикации новых версий gulp. Часто, когда вы не видите прогресса в основном репозитории, работа выполняется в одном из этих модулей.

Если у вас возникли проблемы, убедитесь, что ваши текущие модули обновлены с помощью команды npm update .Если проблема не исчезнет, ​​откройте вопрос в репозитории отдельного проекта.

• гробовщик - система регистрации задач
• винил - виртуальные файловые объекты
• vinyl-fs - виниловый адаптер к вашей локальной файловой системе
• glob-watcher - файловый наблюдатель
• bach - оркестровка задач с использованием серии ( ) и parallel ()
• last-run - отслеживает время последнего выполнения задачи
• vinyl-sourcemap - встроенная поддержка исходной карты
• gulp-cli - интерфейс командной строки для взаимодействия с gulp

Глоток | PhpStorm

PhpStorm интегрируется с Gulp.js Task Runner. PhpStorm анализирует файлы Gulpfile.js, распознавая определения задач, показывает задачи в виде дерева, позволяет перемещаться между задачей в дереве и ее определением в файле Gulpfile.js, а также поддерживает выполнение и отладку задач.

Задачи Gulp.js можно запускать из дерева задач в специальном окне инструментов Gulp или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. PhpStorm показывает результат выполнения задачи в окне инструмента «Выполнить».Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

Перед тем, как начать

Загрузите и установите Node.js.

Установка Gulp.js

Чтобы использовать Gulp в проекте PhpStorm, вам понадобятся два пакета:

• Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.

• Пакет gulp, установленный как зависимость разработки для построения дерева задач проекта и предоставления помощи при кодировании при редактировании файла Gulpfile.js. Узнайте больше о Gulpfile.js на официальном сайте Gulp.js.

Для глобальной установки gulp-cli

• Во встроенном терминале ( Alt + F12 ) введите:

  npm install -global gulp-cli

Для установки Gulp.js в project

• Во встроенном терминале ( Alt + F12 ) введите:

  npm install gulp --save-dev

Вы также можете установить пакеты на Node.js и NPM, как описано в npm, pnpm и Yarn.

Запуск задач Gulp.js из дерева задач

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

Gulp.js начинает построение дерева задач, как только вы вызываете Gulp.js, выбирая «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструмента «Проект» или в Gulpfile.js открыт в редакторе. Дерево построено в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если в вашем проекте несколько файлов Gulpfile.js, вы можете построить отдельное дерево задач для каждого из них и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево отображается под отдельным узлом.

Технически PhpStorm вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Делается это бесшумно и не требует никаких шагов с вашей стороны.

Чтобы открыть окно инструмента Gulp

Когда вы впервые строите дерево задач во время текущего сеанса PhpStorm, окно инструмента Gulp еще не открывается.

По умолчанию PhpStorm не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.

Чтобы построить дерево задач из ES6 Gulpfile.js

1. В главном меню выберите.

2. В узле «Шаблоны» щелкните Gulp.js.

3. В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

Чтобы построить дерево задач из окна инструмента Gulp

• В окне инструмента Gulp щелкните на панели инструментов и выберите нужный файл Gulpfile.js из списка. По умолчанию PhpStorm показывает файл Gulpfile.js в корне вашего проекта.

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

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

Для сортировки задач в дереве по их именам

• Щелкните на панели инструментов, выберите «Сортировать по» в меню, а затем выберите «Имя».
По умолчанию дерево показывает задачи в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

Для запуска задачи

Для запуска задачи по умолчанию

Для запуска нескольких задач

Для перехода к определению задачи

Запуск задач из Gulpfile.js

1. Поместите курсор на определение задачу, которую нужно запустить, и выберите в контекстном меню команду Выполнить <имя задачи>. PhpStorm создает и запускает временную конфигурацию запуска с именем выбранной задачи.

2. Чтобы сохранить автоматически созданную временную конфигурацию запуска, поместите курсор на определение задачи, для которой он был создан, и выберите Сохранить <имя задачи> в контекстном меню выбора.

Выполнение и отладка задач в соответствии с конфигурацией запуска

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

Чтобы создать конфигурацию запуска Gulp.js

1. В главном меню выберите.

2. Щелкните на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Запуск / отладка конфигурации: Gulp.js».

3. Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в корне текущего проекта.

4. Укажите интерпретатор Node.js для использования. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux.

   При желании укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат - <имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

Для запуска задач

Для отладки задач

1. Создайте конфигурацию запуска / отладки Gulp.js, как описано выше.

2. Откройте файл Gulpfile.js в редакторе и при необходимости установите в нем точки останова.

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

4. В открывшемся окне инструмента отладки проанализируйте выполнение приостановленной задачи, выполните пошаговое выполнение задачи и т. Д., Как описано в разделах «Проверка приостановленной программы» и «Пошаговое выполнение программы».

Чтобы запустить задачу Gulp как задачу перед запуском

1. Откройте диалоговое окно «Запуск / отладка конфигураций», выбрав в главном меню, и выберите нужную конфигурацию из списка или создайте ее заново, щелкнув и выбрав значок соответствующий тип конфигурации запуска.

2. В открывшемся диалоговом окне щелкните в области «Перед запуском» и выберите в списке «Запустить задачу Gulp».

3. В открывшемся диалоговом окне задачи Gulp укажите Gulpfile.js, где определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp.

   Укажите расположение интерпретатора Node.js, передаваемые ему параметры и путь к пакету gulp.

Автоматический запуск задач Gulp.js

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

1. В диалоговом окне «Параметры / настройки» Ctrl + Alt + S щелкните «Задачи при запуске» в разделе «Инструменты».

2. На открывшейся странице Startup Tasks щелкните на панели инструментов.

3. Из списка выберите необходимую конфигурацию запуска Gulp.js. Конфигурация добавлена ​​в список.

   Если в проекте нет подходящей конфигурации, щелкните и выберите «Редактировать конфигурации». Затем определите конфигурацию с необходимыми настройками в Run / Debug Configuration: Gulp.js открывается страница. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.

Последнее изменение: 20 мая 2021 г.

Определение Gulp по Merriam-Webster

\ ˈGəlp

\

переходный глагол

1

: глотать поспешно, жадно или одним глотком

2

: сдерживать, как будто глотая

проглотить рыдание

3

: легко проглатывать, как при глотании

проглотить знания

webpack vs Gulp vs Grunt vs Browserify ← Alligator.io

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

В настоящее время инструменты автоматизации рабочих процессов, такие как Gulp или Grunt, жизненно важны для каждого проекта, требующего разработки веб-приложений. Эти инструменты могут помочь повысить производительность труда программистов.Кроме того, они могут автоматизировать рутинные операции, такие как предварительная обработка CSS, сжатие изображений и т. Д. webpack отлично подходит для объединения различных файлов в граф зависимостей.

Итак, давайте обсудим, какой инструмент автоматизации вам нужно использовать: Gulp, Grint, webpack или Browserify.

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

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

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

Gulp vs Grunt: основные различия

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

Gulp vs Grunt: рабочий подход

Наибольшая разница между этими исполнителями задач заключается в их внутренних функциях:

• Grunt использует временные файлы.Gulp использует потоки узлов.
• Grunt выполняет задания по очереди. Gulp выполняет несколько задач одновременно.

Кодирование Gulp против написания конфигурации для Grunt

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

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

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

Gulp vs Grunt: Скорость

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

TMWtech провел тест, сравнивающий время, необходимое для компиляции файла Sass для Gulp и Grunt. Результаты показывают, что Grunt потребовалось почти в два раза больше времени, чем Gulp (2,3 против 1,3 секунды) . Итак, если скорость является жизненно важным фактором, тогда, конечно, вам нужно выбрать Gulp. Однако, работая над небольшим проектом, вы не заметите разницы.

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

: Browserify против webpack

Комплекты модулей

позволяют комбинировать статические ресурсы для уменьшения количества HTTP-запросов и оптимизации производительности. В наши дни существует несколько популярных сборщиков модулей, два из которых - webpack и Browserify. Посылка будет еще одна. Пройдемся по ним подробнее.

Browserify

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

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

webpack

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

Этот менеджер пакетов может выполнять и другие действия:

• Обнаружение кода, который вы не используете, чтобы исключить его при объединении файлов
• Сериализируйте код и загружайте его только при необходимости
• Отслеживайте изменения файлов
• Транспилировать код в ES5 (спасибо плагинам Babel для webpack)
• Запустить веб-сервер

Раньше вам приходилось использовать несколько инструментов для автоматизации процесса разработки, например.грамм. Browserify + Gulp или Grunt + множество плагинов. webpack достаточно мощный, чтобы делать то, что могут делать все эти инструменты вместе взятые. В результате вам не нужны дополнительно Gulp или Grunt. Кроме того, webpack действительно показывает свой потенциал, когда дело доходит до работы с файлами без кода, такими как CSS и изображения. Вы можете просто импортировать их, как и для файлов JavaScript, используя обычную функцию require или синтаксис модуля ES6.

webpack также может использовать горячую перезагрузку модуля, что дает вам возможность быстрее повторно отображать ваше приложение в браузере.Конечно, Browsery также поддерживает эту функцию, но у webpack она лучше.

Gulp vs Grunt vs webpack vs Browserify

Очевидно, что webpack - самый популярный инструмент для разработки приложений JavaScript. Как видите, у него 53,4 тыс. Звезд на Github (на момент написания этой статьи), что подчеркивает, насколько популярным он стал для разработчиков.

Browserify старше этого веб-пакета, но его сильной стороной являются частые обновления.

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

Основное различие между этими рабочими процессами состоит в том, что Browserify требует помощи Gulp или Grunt, в то время как в webpack уже есть все важные функции. Однако Browserify намного проще изучить и использовать.

Также с помощью Gulp / Grunt + Browserify можно разделить задачи и, как следствие, получить более понятную сборку. Browserify предлагает обширную базу плагинов, которая позволяет делать все, что вы хотите.

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

Завершая эту статью, выбирая стек технологий для веб-приложений, вам необходимо рассмотреть инструменты для автоматизации рутинных задач. webpack - один из лучших инструментов автоматизации рабочего процесса, популярность которого постоянно растет. Это произошло потому, что этот инструмент сочетает в себе функции как средства выполнения задач, так и сборщика модулей.Конечно, вы всегда можете использовать Gulp / Grunt + Browserify во время разработки JavaScript. Важно только то, насколько хорошо вы знаете инструменты и свои личные предпочтения.

Gulp - это электроинструмент; Управляйте им с осторожностью

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

Учитывая его популярность, неудивительно, что для многих проектов требуется глобальная установка инструмента командной строки gulp на машине разработчика. Это, конечно, чаще встречается при работе в команде, но многие инструменты с открытым исходным кодом также делают это.Действительно, вам нужно установить gulp глобально, чтобы запускать любую задачу gulp непосредственно из командной строки, например gulp build или gulp dev . Но есть лучший, менее инвазивный способ воспользоваться всеми преимуществами Gulp и даже избежать некоторых из его ловушек.

Почему бы просто не установить его глобально?

Вы могли бы сказать себе: «Это достаточно распространенный инструмент. Разработчики должны рассчитывать на то, что общие инструменты всегда будут доступны ». Этому есть несколько контраргументов:

• Это делает ваш проект хрупким. Нет гарантии, что версия Gulp, установленная разработчиком, совпадает с версией, необходимой для нашего проекта. Это может быть особенно проблематично, если несоответствие версий касается основных версий (т. Е. Критических изменений). См. Критические изменения в Gulp v4 в качестве хорошего примера.
• Это может поставить ваш проект в противоречие с другими проектами. Для других проектов на машине разработчика может потребоваться глобальная установка других версий Gulp. Должен ли разработчик устанавливать новую версию Gulp каждый раз, когда переключается между проектами? Никто этого не хочет.
• Увеличивает количество шагов, необходимых для начала работы над вашим проектом (т. Е. Трения). Кому-то нужно не только запустить npm install , но и запустить npm install -g gulp (возможно, также потребуется установить определенную версию, например npm install -g gulp @ 3 ).
• Инвазивно. Ожидать, что разработчики загромождают свою глобальную область действия нашим выбором средства выполнения задач, - это немного грубо, если вдуматься.

npx на помощь? Эх, не совсем так.

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

  npx [email protected] [имя_задачи]
  

Это для каждой задачи Gulp, которая вам когда-либо понадобится для запуска для данного проекта.Честно говоря, это скоро устареет. Это также требует, чтобы на компьютере разработчика было установлено npx , что опять же является предположением. Я бы сказал, что если ваш проект опирается на Gulp pre-v4, то есть большая вероятность, что вы и ваши соавторы все еще используете версию npm pre-v5.2 (которая представила npx ). И хотя, конечно, вы все, вероятно, в конечном итоге обновитесь, зачем форсировать это ради исполнителя задач, когда доступны более адекватные решения?

Но, возможно, ваш проект использует последнюю версию Gulp и npx gulp [task_name] (без номера версии, поэтому он использует последнюю опубликованную версию) звучит не так уж плохо.Сейчас это звучит разумно, , , но что, если Gulp 5 будет опубликован завтра и внесет изменения, которые нарушат ваш рабочий процесс? Черт, а что, если в следующей второстепенной версии появится ошибка, которая нарушит ваш рабочий процесс? В обоих этих сценариях вы либо будете вынуждены сделать свой gulpfile.js совместимым в очень короткие сроки (и, возможно, с небольшим уведомлением или без него), либо сообщите разработчикам, что теперь они должны использовать npx gulp @ [version ] [task_name] до дальнейшего уведомления.

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

Лучший способ: Gulp через скрипты npm

Решение довольно простое: использовать старые добрые скрипты npm. Допустим, у вас есть задача Gulp под названием dev . В файле package.json вашего проекта вы должны определить задачу dev в scripts object:

  {
  "scripts": {
    "dev": "gulp dev"
  }
}
  

Затем, чтобы запустить задачу Gulp dev , все, что вам нужно сделать, это запустить npm run dev .Прелесть в том, что он использует версию gulp, установленную локально для вашего проекта. У npm есть эта действительно полезная функция, которая делает любые двоичные файлы из ваших локально установленных зависимостей (находящихся внутри ./node_modules/.bin ) доступными в своей среде выполнения, поэтому в этом случае он будет использовать двоичный файл gulp , установленный по адресу ./ node_modules / .bin / gulp без необходимости включать весь
path в наших скриптах.

Но что, если ваша задача gulp принимает аргументы? Допустим, ваша задача dev может использовать параметр --no-sync , чтобы отключить BrowserSync для определенных сценариев.К счастью, npm может передавать аргументы вашим скриптам, например:

  npm run dev - --no-sync
  

Еще лучше, вы можете просто определить новый сценарий npm, который вызывает ваш сценарий dev и передает ему соответствующие флаги:

  {
  "scripts": {
    "dev": "gulp dev",
    "dev: nosync": "npm run dev - --no-sync"
  }
}
  

Затем вы можете вызвать этот новый сценарий из командной строки с помощью npm run dev: nosync .

Разве не так просто? Использование сценариев npm эффективно устраняет все проблемы, связанные с использованием глобально установленного Gulp:

.

• Это делает наш проект отказоустойчивым за счет использования точно такой же версии Gulp, которая требуется в нашей пакетной блокировке .json на каждой машине.
• Это защищает наш проект от других. Версии Gulp, необходимые для других проектов на машине разработчика, могут не иметь абсолютно никакого влияния на наш проект, даже если они требуют глобальной установки Gulp.
• Он упрощает настройку и установку. npm install - это все, что нужно нашим разработчикам для начала работы.
• Это уважительно. Больше никаких необоснованных ожиданий относительно того, какие инструменты следует установить в глобальном масштабе соавтора.Как здорово с нашей стороны!

Использование скриптов npm означает, что мы полагаемся на инструмент, который уже должен существовать на компьютере разработчика для работы над нашим проектом, вместо того, чтобы добавлять его в список «абсолютно необходимых». Более того, мы обеспечиваем более согласованный опыт разработчика, предоставляя последовательный набор команд, которые всегда начинаются с npm run . Мы получаем надежность, согласованность и радость разработчиков при минимальных настройках. Я называю это победой!

Начало работы с gulp и VS Code - Vjeko.com

Странные времена. Я никогда не перестаю удивляться тем инструментам, которые вторглись в нашу первозданную среду разработки. Один из таких инструментов - gulp, и если вы не слышали о нем, не волнуйтесь. Почему вы должны об этом слышать?

Пару недель назад я начал свой доклад о gulp, объяснив, как я упростил и ускорил разработку надстроек управления. Если вы настоящий разработчик NAV, и если вы не классифицировали всю эту серию по gulp в категорию «кому небезразлично» , то, скорее всего, вы останетесь со мной сегодня и узнаете, как настроить gulp и начать использовать это в VS Code.

В этом посте я объясню, что (и почему) вам нужно сделать, чтобы запустить gulp, а затем я создам очень простую задачу gulp. Это первая публикация из серии, в которой я надеюсь создать сквозной пример, который вы даже сможете применить на практике в своих проектах.

Приступим.

Gulp - это модуль Node.js, что означает, что на вашем компьютере должен быть установлен Node.js. Несмотря на то, что VS Code использует Node.js для внутренних целей, на самом деле он использует его только для внутренних целей, и вам необходимо установить Node.js отдельно, чтобы иметь возможность запускать любой из них. Чтобы проверить, установлен ли у вас узел, запустите командную строку и выполните следующую команду:

  узел - версия
  

(В качестве альтернативы, запустите свой VS Code и нажмите View> Terminal или нажмите Ctrl + `на клавиатуре. Все примеры в этом и будущих сообщениях на gulp предполагают, что вы вводите все команды в окне терминала из VS Code, и что в нем открыто рабочее пространство AL.)


Если приведенная выше командная строка не дает результата или выдает ошибку, перейдите по адресу https: // nodejs.org / en / и сначала установите Node.js.

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

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

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

Итак, давайте сначала установим gulp глобально:

  npm i gulp - глобальный
  

Это было легко. Пришло время установить gulp локально. У вас может возникнуть соблазн сделать это:

  нпм глотком
  

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

Давайте сначала посмотрим, что такое npm. Npm - это менеджер пакетов. Он устанавливает внешние пакеты, необходимые для вашего решения, и управляет ими. Если вы когда-либо занимались разработкой .NET и когда-либо использовали NuGet, то npm - то же самое. Проще говоря: npm для Node.js для NuGet для .NET. Но помимо простой установки пакетов, npm может управлять зависимостями . Если зависит от пакета , если вы объявляете зависимость от этого пакета, npm может автоматически обрабатывать эти зависимости за вас, загружать их, когда они недоступны, и поддерживать их в актуальном состоянии.

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

Итак, вооружившись новым пониманием npm, вы решили посмотреть, как сделать gulp зависимостью, но быстро узнаете, что есть два разных способа сделать это:

  npm i gulp - сохранить
  

  npm i gulp --save-dev
  

Разница здесь в том, что первый сделает gulp производственной зависимостью того, что вы создаете, а второй сделает это зависимостью от среды разработки.При создании расширений AL вы используете gulp только для разработки, поэтому второй вариант - правильный выбор. Однако, если, например, вы разрабатываете расширения VS Code, и эти расширения будут использовать gulp, пока они делают то, для чего они предназначены, тогда вам следует использовать первый вариант, чтобы указать, что ваше расширение требует запуска gulp.

Если вы хотите узнать больше о различиях, возможно, эта статья поможет вам в этом:
https: // imcodebased.com / npm-save-or-save-dev-который-один-использовать /

Хорошо. Итак, теперь вы знаете, что для разработки AL вам нужна только зависимость разработки, вам нужно запустить это:

  npm i gulp --save-dev
  

Когда это будет сделано, вы можете проверить, работает ли gulp у вас. Если все, что вы сделали, было правильно (а почему этого не должно быть, дело не в том, что вы строили космический корабль), вы сможете запустить это:

  глоток
  

Это даст следующий результат:

  [09:25:06] Файл gulpfile не найден
              

Это похоже на ошибку, и это так.Это полный отчет по долгу службы, который сообщает, что не нашел никаких инструкций. Теперь вам нужно сказать gulp, что и как делать. Это сообщение об ошибке сообщает, что файл gulpfile отсутствует, поэтому давайте сначала займемся этой частью. В корне вашей рабочей области просто создайте новый файл и назовите его gulpfile.js. Пока ничего не добавляйте, просто оставьте поле пустым. Имея файл там, снова запустите gulp и посмотрите на результат:

  [09:29:31] Использование gulpfile C: \ Temp \ Gulp \ gulpfile.js
[09:29:31] Задача никогда не определялась: по умолчанию
[09:29:31] Чтобы просмотреть список доступных задач, попробуйте запустить: gulp --tasks
  

Это означает, что теперь gulp может читать ваш файл задачи и запускать задачи.Однако, поскольку ваш файл gulp пуст, gulp не нашел задач для запуска.

Давайте создадим первую простую задачу.

Задачи Gulp написаны на JavaScript, и каждая задача определяется в функции JavaScript. Это не означает, что любая функция, которую вы объявляете в своем gulpfile.js, автоматически станет задачей, это просто означает, что для определения задач вы должны определять их внутри функций.

Например, попробуйте поместить это в свой gulpfile.js:

(Имейте в виду, что эта функция еще не является реальной задачей gulp, но она послужит хорошей отправной точкой.)

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

Gulp - это модуль Node.js, а это значит, что для его использования вам необходимо сначала загрузить его в свой скрипт.В Node.js мы называем этот процесс , требующим модуля. Чтобы потребовать модуль, вы просто вызываете встроенную функцию require. Обычно вам требуется модуль в начале вашего скрипта, поэтому вы можете вставить следующую строку вверху вашего скрипта:

Затем вы можете сделать свою функцию helloWorld задачей, просто передав ее в метод задачи. Обычно это делается в конце файла gulp. Теперь ваш gulpfile.js будет выглядеть так:

Запуск gulp по-прежнему не дает никакого эффекта, но если вы запустите gulp –tasks, вы увидите, что теперь gulp распознает вашу функцию helloWorld как задачу, которую она может вызвать:

Одна замечательная вещь с gulp заключается в том, что VS Code изначально понимает их.Любая задача, которую вы настраиваете в gulpfile.js, автоматически становится доступной для VS Code. Чтобы проверить это смелое заявление, нажмите Ctrl + Shift + P, затем запустите команду «Задачи: Выполнить задачу». Он должен показать это:

Но здесь есть одна оговорка. В отличие от файла VS Code tasks.js, который перезагружается при каждом изменении, файл gulpfile.js обрабатывается только один раз за сеанс VS Code. VS Code обработает ваш файл gulpfile.js при первом вызове команды «Задачи: Выполнить задачу», и никакие изменения, внесенные вами после этого, не будут видны в списке задач.Если вы каким-либо образом измените свои задачи gulp, добавив, удалив или переименовав задачи, ваш список задач VS Code не будет отражать это, пока вы не перезапустите VS Code.

Теперь, когда задача очевидна и VS Code знает о ней, мы можем попробовать запустить ее.

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

  глоток helloWorld
  

Это запустит задачу и покажет следующий результат:

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

Самый простой способ сигнализировать о завершении с помощью обратного вызова error-first.Каждая функция gulp получает один аргумент, и этот аргумент относится к типу function. Это ваш аргумент обратного вызова, который вы должны вызывать по завершении задачи. Если ваша задача выполнена успешно, вы просто вызываете обратный вызов без каких-либо аргументов:

Попробуйте выполнить задачу helloWorld прямо сейчас, а затем откройте пробку для своей первой успешной задачи по глотку:

И на этом все. На данный момент у вас есть инфраструктура gulp, у вас есть первая задача gulp, которую вы можете вызывать как из терминала (командной строки), так и из палитры команд.

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

Нравится:

Нравится Загрузка ...

Связанные

Задача сборки и выпуска

Gulp - Azure Pipelines

• 17.12.2019
• 2 минуты на чтение

В этой статье

Конвейеры Azure | Azure DevOps Server 2020 | Сервер Azure DevOps 2019 | TFS 2018 - TFS 2015

Используйте эту задачу для запуска задач gulp с помощью Node.js потоковая система сборки на основе задач.

Требования

глоток

Фрагмент YAML

  # глоток
# Запускаем gulp Node.js систему сборки на основе задач потоковой передачи
- задача: глоток @ 1
  входы:
    #gulpFile: 'gulpfile.js'
    #targets: # Необязательно
    #arguments: # Необязательно
    #workingDirectory: # Необязательно
    #gulpjs: # Необязательно
    #publishJUnitResults: false # Необязательно
    #testResultsFiles: '** / TEST - *. xml' # Требуется, если publishJUnitResults == True
    #testRunTitle: # Необязательно
    #enableCodeCoverage: false
    #testFramework: 'Mocha' # Необязательно.Варианты: мокко, жасмин
    #srcFiles: # Необязательно
    #testFiles: 'test / *. js' # Требуется, если enableCodeCoverage == True
  

Аргументы

Пример

Запустите gulp.js

На вкладке "Сборка":

Создайте узел.js приложение

Создайте приложение Node.js с помощью gulp

Открытый исходный код

Эта задача с открытым исходным кодом на GitHub. Отзывы и предложения приветствуются.

FAQ

Нужен ли мне агент?

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

У меня проблемы. Как я могу их устранить?

См. Устранение неполадок при сборке и выпуске.

Я не могу выбрать пул агентов по умолчанию и не могу поставить свою сборку или выпуск в очередь.

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

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

Комментарий *

Имя *

Email *

Сайт