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:

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

В Gulp нет необходимости в плагине watch, потому как возможность реагировать на изменения в файлах уже включена в ядро. Это то что должно быть в любом сборщике сразу, а не выполнятся с помощью плагина.
Конфигурационные файлы 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 скриптов, который:

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

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

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

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

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

это JavaScript программа для автоматического выполнения задач (объединения файлов, уменьшение размера картинок) в вашем Web проекте

Программы для разработки (интегрированные среды для разработки IDE)

HTML

Интерактивная реклама в HTML (animate banner)

WEB сайт

Javascript, TypeScript

Кнопки, текстовые поля и другие элементы на WEB странице

JavaScript технологии

JavaScript графика, анимация для игр

JavaScript менеджер пакетов (добавление JavaScript библиотек в ваш Web проект)

Автоматическое выполнение задач в вашем Web проекте

База данных (My SQL)

База данных (SQL Server)

База данных (PostgreSQL)

Работа с базой данных на C#

Работа с Redis

Интернет, HTTP, TCP, UDP, FTP протоколы

RabbitMQ

Microsoft C# и .NET

Microsoft Office 365 E3 (Web services)

Python

Java программирование (приложения для windows, андроид телефонов)

Mobile Development with C++ (Android, iOS)

Flutter & Dart

Облачные технологии

Резюме (как найти работу)

Автоматизированное тестирование

Рефакторинг & Паттерны

Методологии управления проектами

Управление версиями проекта, история измененных файлов

Математические алгоритмы

CI/CD

Docker

Kubernetes

Микрослужбы

Разработка игр

Создания 2D графики для игры

Технологии для написания игр

Еще языки программирования

Интернет браузеры

Telegram (месенджер)

WEB сервер

bat файлы

.htaccess файлы

Viber

Операционная система LINUX

Операционная система Mac OS

Операционная система WINDOWS и программы

Операционная система ANDRIOD

Операционная система iOS

Компьютерная платформа (процессор)

Ноутбук (BIOS)

Быстродействие компьютера (процессора)

Графика и видео

2D графические редакторы

3D графические редакторы

Видео

Online: просмотр Word файлов, конвертация PDF файлов, распознование картинки в текст

PDF to word, images

Распознавание картинки в текст

Регулярные выражения

Поставить HD Video Box в Windows

Открыть ИП в Минске (через интернет)

Gulp · WebPurple Learn Book

Gulp — это инструмент для автоматического управления задачами (task-runner), написанный на языке JavaScript. Создание задачи обеспечивается подключением необходимого плагина (>3500, 2018г) в конфигурационный файл Gulpfile. Запуск задач производится из командной строки. Gulp является node-модулем, распространяется через менеджер пакетов NPM (Yarn) под MIT лицензией.

Особенности Gulp

Взаимодействия между частями программы (Gulpfile) реализуется через оператор .pipe(), выполняя по одной задаче за раз, не затрагивая исходные файлы, до конца процедуры. Это даёт возможность комбинации плагинов в любой последовательности и количестве
использование виртуальной файловой системы vinyl-fs

Отличия от Webpack

Зачастую Gulp сравнивают с другим популярным инструментом — Webpack’ом. Такое сравнение является ошибочным, поскольку эти инструменты предназначены для решения разного рода задач:

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

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

Отличия от Grunt

В отличие от другого распространенного task-runner’a Gulp отличается тем, что код задач записывается JavaScript кодом, а не в стиле конфигурационного файла. Потоковая обработка задач дает Gulp выигрыш по производительности, а также уменьшает количество строк файла конфигурации.

Пример Gulpfile (файла конфигурации)

const gulp = require('gulp');
const pug = require('gulp-pug');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const minify = require('gulp-minify');
const concat = require('gulp-concat');


gulp.task('html', () =>
    gulp
        .src('templates/*.pug')
        .pipe(pug())
        .pipe(gulp.dest('build/html')),
);


gulp.task('css', () =>
    gulp
        .src('less/*.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css')),
);


gulp.task('js', () =>
    gulp
        .src('js/*.js')
        .pipe(concat('app.js'))
        .pipe(minify({noSource: true}))
        .pipe(gulp.dest('build/js')),
);


gulp.task('default', ['html', 'css', 'js']);

Скринкаст по использованию Gulp от Ильи Кантора

Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

Что такое Gulp?

Определение из Wikipedia

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

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

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

Gulp, с плагином gulp-autoprefixer, делает это автоматически в реальном времени

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

Как установить Gulp?

Чтобы установить Gulp, сначала необходимо установить Node.js

Процесс установки Node.js описан в статье Node.js — зачем верстальщику и как установить

После того, как Node.js установлен, переходим к установке Gulp

Нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

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

npm rm --global gulp

После удаления прежней версии Gulp, или если устанавливаем Gulp впервые, вводим команду

npm install --global gulp-cli

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

gulp -v

Если в пункте CLI version: указана версия (на момент написания статьи — 2.3.0), то Gulp установлен корректно (на пункт Local version: пока не обращаем внимания)

Стартовый шаблон gulp-dev

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

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

Этот шаблон использую для верстки уже достаточно долгое время. Сейчас выложил его на GitHub для написания данной статьи — gulp-dev

Что входит в данный шаблон

Browsersync — будет перезагружать страницу в браузере автоматически при сохранении файлов
Stylus — ускоряет написание CSS (рассмотрим в одной из следующих статей)
Autoprefixer — автоматически расставит префиксы в CSS
Pug — ускоряет написание HTML (рассмотрим в одной из следующих статей)

Данный набор инструментов позволяет ускорить процесс верстки в разы

Также в шаблон добавлены сброс стилей Bootstrap Reboot и jQuery, так как использую их в каждом проекте. Они добавлены как статичные файлы, к Gulp они не относятся. При необходимости можно просто отключить их в файле app/pug/index.pug

Установка шаблона gulp-dev

Заходим на страницу шаблона gulp-dev

Кратко расскажу о некоторых файлах (про папки dist и app расскажу ниже)

package.json — содержит служебную информацию о репозитории, в этом же файле содержится список зависимостей(плагинов), которые необходимо установить
gulpfile.js — содержит настройки Gulp, чтобы Gulp мог запуститься и знал, что ему делать
.gitignore — если используем Git, файлы и папки указанные в этом файле будут игнорироваться при коммитах, то есть эти папки и файлы не будут отслеживаться и в Git-репозиторий они добавляться не будут

Нажимаем на “Code”, затем на “Download ZIP”

Создадим новую папку new_project для проекта (например, на рабочем столе)

Открываем скачанный ZIP-файл gulp-dev-main, внутри ZIP-файла открываем папку gulp-dev-main и копируем все её содержимое в созданную на рабочем столе папку new_project

Далее нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

В окне командной строки необходимо перейти в созданную папку new_project

В командной строке пишем cd и через пробел путь до папки (можно скопировать из адресной строки окна и вставить в командной строке правой кнопкой мыши или сочетанием клавиш “Shift+Insert”) и нажимаем Enter

Следующие команды будем запускать для папки new_project

Далее, устанавливаем все выше перечисленные инструменты одной командой

npm i

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

Изменять или удалять папку node_modules нельзя

Запускаем Gulp командой

gulp dev

Когда Gulp будет запущен, автоматически откроется браузер с начальной страницей шаблона

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

Что происходит при запуске Gulp?

Постараюсь простыми словами объяснить, что делает Gulp при запуске шаблона gulp-dev

Сначала, создает структуру папок (добавляет папки src, dist/fonts, dist/img)
Далее генерирует файл index.html (dist/index.html) из файла index.pug (app/pug/index.pug) и файл main.css (dist/css/main.css) из файла main.styl (app/styl/main.styl)
Далее запускает локальный сервер и наблюдение за всеми файлами в папке dist для автоматической перезагрузки страницы в браузере при их изменении

Структура шаблона

Папка src/ — для PSD макетов, JPG превью, технического задания и так далее. Черновая папка с файлами которые не будут содержаться в итоговой верстке

Папка app/ — содержит папки pug и styl для соответствующих файлов (подробнее про Pug и Stylus в следующих статьях)

Папка dist/ — итоговая папка с готовой версткой, здесь храним и редактируем все файлы, которые будут содержаться в итоговой верстке (шрифты, изображения, HTML файлы, файлы CSS стилей и JS скриптов), за исключением файлов, которые будут генерироваться автоматически из папки app

Структуру и названия папок не меняем!

Менять структуру и названия можно только при условии, что решите редактировать настройки Gulp в файле gulpfile.js

Пример использования

По Pug и Stylus будут следующие статьи.

На данный момент, просто посмотрим как автоматически генерируются index.html и main.css и обновляется страница при их изменении

Откроем файл index.pug (app/pug/index.pug) в редакторе кода (я использую Sublime Text 3)

Внесем изменения в index.pug

<!DOCTYPE html>
html
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
		title
		link(rel="stylesheet", href="css/bootstrap-reboot.min.css")
		link(rel="stylesheet", href="css/main.css")
	body
		header.header
			.container
				.header__flex
					.header__logo
						a(href="")
							img(src="img/logo.png", alt="")
					.header__phone
						a(href="tel:88001111111") 8 (800) 111-11-11

		//- Scripts
		script(src="js/jquery-3.5.1.min.js")
		script(src="js/main.js")

Повторюсь, синтаксис Pug разберем в одной из следующих статей

Сохраняем index.pug с внесенными изменениями, при этом автоматически генерируется index.html и страница в браузере перезагружается

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <header>
      <div>
        <div>
          <div><a href=""><img src="img/logo.png" alt=""/></a></div>
          <div><a href="tel:88001111111">8 (800) 111-11-11</a></div>
        </div>
      </div>
    </header>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Аналогично откроем main.styl (app/styl/main.styl)

Внесем изменения

// Please delete before starting
body
	background lightgreen

Сохраняем main.styl — Gulp генерирует main.css (dist/css/main.css) — страница в браузере перезагружается

body {
  background: #90ee90;
}

Итоги

Для Gulp существует более 4000 плагинов. Его можно настроить под любую функциональность — минификация HTML/CSS/JS, оптимизация изображений, расстановка префиксов, автоматическая перезагрузка страниц в браузере, использование любых препроцессоров и шаблонизаторов и многое другое

Следующие статьи будут про Pug и Stylus, в них рассмотрим синтаксис и базовые возможности этих инструментов

9.2.1. Создание темы на основе Bootstrap. Компиляция SASS через Gulp.

Видео: https://youtu.be/D5YhelsTW4Q

В прошлом уроке мы разобрали как компилировать LESS с помощью встроенного в PhpStorm watcher’a. В этом уроке мы будем создавать тему на основе SASS Boostrap’a. Если у вас не получилось разобраться с LESS и компиляцией через PhpStorm, то можете попробовать использовать Gulp и SASS. На данном этапе уроков для нас не принципиально что использовать LESS или SASS. Но я бы рекомендовал вам использовать именно SASS и Gulp, потому что компиляция идет быстрее и настраивать Gulp проще.
Gulp — это менеджер заданий для javascript. Мы добавим с помощью него два задания одно отслеживать изменения в папке sass, когда мы дописываем стили и второе это компилировать SASS в CSS.

Давайте перейдем к установке. Я развернул чистый 8 друпал. Теперь нужно скачать тему bootstrap и положить ее в папку /themes:

https://www.drupal.org/project/bootstrap

Для использования SASS в подтемы bootstrap нам нужно использовать этот kit, который называется sass:

Копируем эту папку sass в папку /themes отдельно от boostrap и переименовываем в имя вашей темы, у меня это будет drupalbook:

Теперь нужно переименовать все файлы с THEMENAME на имя вашей темы. Например у нас есть файл THEMENAME.starterkit.yml, его нужно будет переименовать в drupalbook.info.yml. THEMENAME.libraries.yml нужно переименовать в drupalbook.libraries.yml и так далее. Не забудьте переименовать файлы в папке config файлы, там они тоже есть с THEMENAME:

Внутри файлов тоже может быть THEMENAME, например в файле sass/config/schema/THEMENAME.schema.yml:

Чтобы убедиться, что вы ничего не пропустили поищите THEMENAME по всей папке подтемы через PhpStorm:

Вбиваем в поиске THEMENAME и там где найдется исправляем на имя нашей темы.

Теперь нужно скачать сам bootstrap и положить его в папку /themes/drupalbook/bootstrap:

http://getbootstrap.com/getting-started/#download

https://getbootstrap.com/docs/3.3/getting-started/

Нас интересует SASS версия bootstrap’а:

Для нашей темы нам нужна вся папка bootstrap, кладем ее так чтобы путь к папке assets был такой /themes/drupalbook/bootstrap/assets:

Мы скопировали все нужные для темы файлы, теперь нужно подключить Gulp для компиляции SASS.

Сначала нам потребуется установить Node.js:

https://nodejs.org/en/

Node.js — это среда выполнения javascript кода, она позволяет исполнять код для компиляции SASS в CSS. Ставится в Windows она как обычная программа. Качать лучше последнюю версию, на данный момент 7.x.x:

После того как вы устновили Node.js вам нужно будет перезапустить PhpStorm или перезапустить консоль CMD если она у вас открыта. Консоль для работы с node.js можно открыть как в PhpStorm:

Так и через меню Пуск:

В консоле нужно набрать node -v, чтобы проверить что Node.js установился правильно:

Если не получилось поставить 7.x.x версию, попробуйте поставить 6.x.x.

Дальше нам нужно перейти в папку с нашей темой drupalbook и установить Gulp. Переходим в консоли по папкам мы через команду cd. Команда cd .. (cd пробел и две точки) позволяет перейти в родительску папку:

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

Теперь когда вы перешли в папку с вашей темой, устанавливаем Gulp. Устанавливать будем с помощью менеджера пакетов npm он устанавливается сразу с Node.js. Сначала инициализируем новый набор компонентов npm:

npm init

Это создаст нам файл package.json, в этом файле будут показаны все пакеты, которые мы поставим через npm. При выполнение команды просто жмите Enter:

В результате будет сформировован вот такой вот файлик package.json:

{
«name»: «bootstrap-sass»,
«version»: «3.3.7»,
«description»: «bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.»,
«main»: «assets/javascripts/bootstrap.js»,
«style»: «assets/stylesheets/_bootstrap.scss»,
«sass»: «assets/stylesheets/_bootstrap.scss»,
«files»: [
«assets»,
«eyeglass-exports.js»,
«CHANGELOG.md»,
«LICENSE»,
«README.md»
],
«repository»: {
«type»: «git»,
«url»: «git://github.0.7.1»
}
}

Теперь выполняем следующую команду, устанавливаем Gulp:

npm install --save-dev gulp

Если вывелось дерево установленных файлов и никаких ошибок, то все прошло хорошо:

Следующей командой ставим пакет gulp-sass:

npm install --save-dev gulp-sass

Если у вас Gulp 4.x, то вам нужен будет этот код Gulpfile.js:

// Gulpfile.js running on stratumui,
// a css framework available on npmjs.com
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglify’);

var paths = {
styles: {
src: ‘scss/**/*.scss’,
dest: ‘css’
}
};

function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}

function watch() {
gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task(‘default’, build);

Мы установили пакеты gulp, gulp-sass, теперь нужно создать задания для gulp’а (gulp tasks). Для этого создаем в корне темы файл Gulpfile.js:

/themes/drupalbook/Gulpfile.js

Код для Gulp 3.x:

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);

gulp.task(‘styles’, function() {
gulp.src(‘scss/**/*.scss’)
.pipe(sass().on(‘error’, sass.logError))
.pipe(gulp.dest(‘./css/’))
});

//Watch task
gulp.task(‘default’,function() {
gulp.watch(‘scss/**/*.scss’,[‘styles’]);
});

Также для gulp 4.x и примера сверху, вам потребуется поставить дополнительные библиотеки:
npm install gulp-concat
npm install gulp-uglify

Мы указали компилировать файлы SASS в папку css, но этой папки нет сразу в нашей теме, ее нужно создать, также добавьте туда файли style.css:

/themes/drupalbook/css/style.css

В этом файле будет весь наш скомпилированный CSS.

Все готово для того чтобы запускать компиляцию SASS. Для этого заходим через PhpStorm в папку с темой и выбираем наш Gulpfile.js и в контекстном меню выбираем Show Gulp Tasks:

Выбираем задание default и сразу откроется окно этого таска:

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

В результате компиляции в нашем файле style.css появится CSS и цвет фона сайта станет желтым:

По началу может казаться, что это долго настраивать компиляцию с помощью Gulp, но если у вас уже стоит Node.js, то вам нужно только добавить файл Gulpfile.js и установить пакеты gulp, gulp-sass. Если у вас возникли трудности с утрановкой и настройкой пишите в комментариях, будем разбираться.

marchenkovdmitry/gulp-fast-start: Это простой стартовый комплект чтобы начать использовать Gulp, буквально в пару команд консоли.

Это простой стартовый комплект чтобы начать использовать Gulp, буквально в пару команд консоли. Включает в себя:

Минификатор css (gulp-cssmin)
Минификатор html (gulp-htmlmin)
Компилятор Jade (Pug.js) в html (gulp-pug)
Компрессор JS (gulp-uglify), компрессор SVG графики (gulp-svgmin)
Отслеживание изменений в файлах проекта (gulp-watch).

Скачать репозиторий себе, с гитхаба, или git Bash -> git clone https://github.com/marchenkovdmitry/gulp_fast_start
Убедиться, что на компьютере установлен Node.js
Открыть консоль в папке проекта и вызвать команду npm i. Дождаться установки зависимостей. (В windows консоль в паке открывается shift+правая кнопка мыши -> Открыть окно команд)
Вызвать команду gulp (Если выдаст ошибку, вызвать команду npm i gulp)
Для завершения работы над проектом нажать Ctrl+C.

В gulpfile.js описаны все таски. Есть подробные комментарии.

gulp cssm — сжатие css.

gulp htmlm — сжатие обычного html (если вы в проекте не используете Jade(Pug.js). Если используете «gulp pug», использовать «gulp htmlm» нет необходимости, на выходе «gulp pug» уже сжатый html.

gulp pug — компиляция Jade(Pug.js) в html.

gulp jsm — сжатие javaScript (минификация).

gulp svgm — сжатие SVG графики.

gulp prod — выполняет все команды, с 1-5 в списке.

gulp watch — самостоятельное отслеживание изменений в файлах и запуск соответствующего процесса.

src — исходники проекта. В папке css файлы стилей, в html разметка страницы, в img — графика, js — скрипты. index.pug — стили препроцессора Jade(Pug.js).

app — собранный проект, готовый к использованию.

node.js — Gulp перестал работать после более чем года нормальной работы, теперь выдает ошибку «Термин ‘gulp’ не распознан» в командной строке

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

Я уже более года запускаю Gulp и XAMPP на этой машине, чтобы разработать несколько сайтов WordPress локально перед запуском. Эта проблема появилась вчера без явного предупреждения и затрагивает все мои локальные проекты.Я не обновлял ничего, о чем я знал до этого, хотя я использую Windows 10, поэтому возможно, что обновление ОС, о котором я не знал, сломало что-то.

Полный текст ошибки в PowerShell:

gulp: термин «gulp» не распознается как имя командлета, функции, файла сценария или работающей программы. Проверять написание имени или, если был включен путь, проверьте правильность пути и повторите попытку. В строке: 1 символ: 1 + глоток идти + ~~~~ + CategoryInfo: ObjectNotFound: (gulp: String) [], CommandNotFoundException + FullyQualifiedErrorId: CommandNotFoundException`

Интересно, что cmd.exe выдает другую ошибку, которую я вообще не могу понять:

AssertionError [ERR_ASSERTION]: должна быть указана функция задачи. в Gulp.set [как _setTask] (C: \ xampp \ htdocs \ domainname.com \ node_modules \ undertaker \ lib \ set-task.js: 10: 3) в Gulp.task (C: \ xampp \ htdocs \ domainname.com \ node_modules \ undertaker \ lib \ task.js: 13: 8) на объекте. (C: \ xampp \ htdocs \ domainname.com \ gulpfile.js: 37: 6) в Module._compile (внутренний / модули / cjs / loader.js: 1158: 30) на объекте.4.0.0 \ index.js: 36: 18) { createdMessage: false, код: ‘ERR_ASSERTION’, актуально: ложь, ожидается: правда, оператор: ‘==’ } `

РЕДАКТИРОВАТЬ: я получил указанную выше ошибку, когда Gulp был установлен глобально. После его глобального удаления (все еще установленного локально в этом проекте) я получаю более ожидаемую ошибку:

‘gulp’ не распознается как внутренняя или внешняя команда, действующая программа или командный файл. `

/ КОНЕЦ РЕДАКТИРОВАНИЯ

Команды

NPM не затронуты, и я пробовал различные комбинации удаления, переустановки и обновления gulp, в том числе глобально, но безрезультатно.Я пробовал обновить node.js, но тоже безрезультатно.

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

GULP — Дом

GULP — это программа для выполнения различных типов моделирования материалов. с использованием граничных условий 0-D (молекулы и кластеры), 1-D (полимеры), 2-D (поверхности, плиты и границы зерен) или 3-D (периодические твердые тела).Основное внимание в коде уделяется аналитических решений, за счет использования динамики решетки, где это возможно, а не по молекулярной динамике. В GULP могут использоваться различные силовые поля, охватывающие оболочечная модель для ионных материалов, молекулярная механика для органических систем, встроенная модель атома для металлов и реактивный потенциал REBO для углеводородов. Аналитические производные включены как минимум до второго порядка для большинства силовых полей и до третьего порядка для многие.

Научные подробности о GULP можно найти в следующих статьях:

GULP — компьютерная программа для симметрии адаптированного моделирования твердых тел, J.Д. Гейл, JCS Faraday Trans., 93 , 629 (1997)
Вывод эмпирического потенциала для ионных материалов, J.D. Gale, Phil. Mag. В, 73 , 3, (1996)
The General Utility Lattice Program, J.D. Gale, A.L. Rohl, Mol. Simul. , 29 , 291-341 (2003)
GULP: Возможности и перспективы, J.D. Gale, Z. Krist. , 220 , 552-554 (2005)
Эффективный метод предсказания морфологии, зависящей от растворителя: метод COSMIC, J.D. Gale, A.L. Rohl, Mol. Simul. , 33 , 1237-1246 (2007)
Функции распределения пар, рассчитанные на основе моделей межатомного потенциала с использованием программы General Utility Lattice Program, E.R. Cope и M.T. Dove, J. Appl. Cryst. , 40 , 589-594 (2007)
Поле реактивных сил для водно-карбонатных систем, J.D. Gale, P. Raiteri и A.C.T. van Duin, PCCP. , 13 , 16666-16679 (2011)

GULP доступен бесплатно для академического использования любым лицом, имеющим действующую университетскую учетную запись электронной почты.Для доступа к коду перейдите на соответствующую вкладку и «зарегистрируйтесь». Код предоставляется «как есть» и без поддержки. Любые вопросы, касающиеся использования кода, могут быть размещены на форуме пользователей, если они еще не рассмотрены в предыдущих темах. Отчеты об ошибках и запросы на регистрацию можно отправлять в gulpcode на сайте curtin.edu.au, и мы постарайтесь ответить как можно скорее.

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 [имя_задачи] (без номера версии, поэтому он получает последнюю опубликованную версию) звучит не так уж плохо. Сейчас это звучит разумно: , , но что, если Gulp 5 будет опубликован завтра и внесет изменения, нарушающие ваш рабочий процесс? Черт, а что, если в следующей второстепенной версии появится ошибка, которая нарушит ваш рабочий процесс? В обоих этих сценариях вам либо придется создать gulpfile .js в очень короткие сроки (и, возможно, с небольшим уведомлением или без него), или проинформируйте разработчиков, что теперь они должны использовать npx gulp @ [версия] [имя_задачи] до дальнейшего уведомления.

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

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

Решение довольно простое: использовать старые добрые сценарии npm. Допустим, у вас есть задача Gulp под названием dev . В пакете вашего проекта.json , вы должны определить задачу dev в сценариях . Объект :

  {
  "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, которая требуется в нашем файле package-lock.json на каждой машине.
Это изолирует наш проект от других. Версии Gulp, необходимые для других проектов на машине разработчика, могут не иметь абсолютно никакого влияния на наш проект, даже если они требуют глобальной установки Gulp.
Он упрощает настройку и установку. npm install — это все, что нужно нашим разработчикам для начала работы.
Это уважительно. Больше никаких необоснованных ожиданий относительно того, какие инструменты следует установить в глобальном масштабе соавтора. Как здорово с нашей стороны!

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

Встречайте вашего нового друга «GULP». Что такое GULP? | by Sidath Asiri

1. Настройка среды

Прежде всего, вам необходимо установить node.js на свой компьютер, а если у вас его нет, установите его отсюда.

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

Когда вы будете готовы, установите Gulp глобально с помощью команды

Затем инициализируйте проект узла, выполнив обычную команду npm init

Перейдите в каталог проекта и установите gulp локально в качестве зависимости разработки

2. Ваш первая задача в GULP

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

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

Теперь давайте создадим нашу первую задачу gulp. В этой задаче мы просто сделаем консольный журнал.

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

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

Если имя вашей задачи — ‘default’ , вы можете запустить ее, просто выполнив gulp в терминале. Это называется выполнением задачи по умолчанию в gulp.

3. Копирование исходных файлов в папку вывода

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

Давайте создадим каталог src и добавим туда базовый файл HTML. Перед развертыванием нашего очень простого приложения нам нужно скопировать его в папку dist. Давай сделаем это залпом.

В этой новой задаче нам нужно указать gulp, где находятся входные файлы и куда их копировать. Для этого мы используем gulp.src и gulp.dest. Здесь мы указываем все файлы HTML в каталоге src.

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

Запустите задачу так же, как мы делали ранее, используя команду gulp copyToDist . Вы заметите, что будет создана папка dist, содержащая HTML-файл, который находился в каталоге src.

4. Минимизация файлов JavaScript

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

Для этого нам нужно установить другую зависимость, называемую «gulp-uglify». Сначала установите его, используя следующую команду.

Затем создайте каталог js в каталоге src и добавьте файл JavaScript, содержащий некоторые команды журнала консоли, разделенные пробелами и несколькими комментариями. Теперь давайте уменьшим это и добавим в каталог dist в js.

Здесь все должно быть понятно. Функция uglify () происходит от нашей новой зависимости.Вы увидите, что новый файл JavaScript в каталоге dist уменьшен путем удаления всех пробелов и комментариев.

5. Скомпилируйте SASS в CSS

SASS позволяет использовать функции, которые еще не существуют в CSS, такие как переменные, вложение, наследование и т. Д. Мы можем скомпилировать SASS в CSS с помощью gulp, установив другую зависимость, как мы делали в предыдущая задача.

На этот раз это ‘gulp-sass’ . Сначала установите его с помощью следующей команды.

Аналогично предыдущему, создайте каталог sass в каталоге src , содержащий файл sass.Давайте скомпилируем его и добавим в каталог css в dist.

Видите ли, здесь нет ничего волшебного. Мы используем трубы, так как нам нужно все связать цепочкой. sass () Функция компилирует sass в css, и для обработки ошибок добавляется следующая часть. Следуйте документации gulp-sass здесь, если вы запутались.

6. Объедините все в одну команду

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

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

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

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

7. Наблюдение за файлами

Теперь давайте воспользуемся последней фундаментальной функцией ( gulp.watch) в Gulp API, о которой я упоминал в начале, для автоматического обнаружения и создания новых изменений в папке dist.

В gulp.watch нам нужно указать, где смотреть и какие задачи должны выполняться, когда происходит изменение. Например, необходимо следить за всеми файлами JavaScript, и при изменении любого из них будет выполнена задача minifyJS.

После того, как вы запустите команду gulp watch, gulp будет следить за указанными файлами, и необходимые задачи будут запущены при изменении.

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

Надеюсь, вам понравилась статья. Продолжайте читать и ура! 🙂

Начало работы с 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 --global

Это было легко. Пришло время установить 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. Следите за обновлениями и почувствуйте себя приглашенным поделиться своими мыслями.

Нравится:

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

Связанные

приключений на пищеварительном тракте: Плотва, Мэри: 0784497386778: Amazon.com: Книги

«В Мэри Роуч есть много всего удовольствия — ее заразительное уважение к причудливой науке и ее ботанистым приверженцам, ее остротам … Она любима, и это вполне оправданно.»
— Джон Ронсон, Нью-Йорк Таймс Книжное обозрение

» Захватывающе, сколь и грубо «.
— Entertainment Weekly

» Несомненно, ее самая смешная и самая яркая книга, принесшая книгу мисс Роуч любовь к сверхъестественной науке к материалам, которые не могут иметь более повседневного значения. . . . Никогда еще тяга мисс Роуч к комедийному и причудливому не находила лучшего применения. . . . «Gulp» структурирован как чрезвычайно увлекательное паломничество по пищеварительному тракту с миссис.Плотва как самый остроумный и самый ценный гид, какой только можно вообразить ».
— Джанет Маслин, New York Times

« Восхитительное чтение и, смею сказать, полный бензин ».
— Кейт Таттл, Бостон Глобус

«С тем же нетерпеливым любопытством, которое она ранее проявляла к трупам, космосу и сексу, автор исследует пищеварительную систему ото рта до толстой кишки.»
— Житель Нью-Йорка

» [A] Весёлый набег на пищеварительные науки….Неумолимо увлекает читателя перистальтическими волнами истории и ярко описанной науки «.
— Брайан Свитек, Wall Street Journal

» Вы уйдете из этой хорошо проработанной книги с достаточно странными пищеварительными мелочами, чтобы заставить вас самый интересный гость на коктейльной вечеринке… Давай, положи его в ручную кладь. Вы не пожалеете об этом «.
— Эми Стюарт, Washington Post

» Остроумная, увлекательная игра из книги … Роуч … совершенно невозмутимый, совершенно бесстрашный исследователь неприятностей.»
— Хлоя Шама, Смитсоновский институт

» Gulp о том, чтобы упиваться необычайной сложностью и великолепием человеческого пищеварения. «
— The Economist

» Читать безумно весело. «
— Би Уилсон, Новая Республика

«Никогда прежде процесс еды не был таким интересным…. Переварив ее книгу, вы не можете не думать о том, что это на самом деле означает.»
— Micki Myers, Pittsburgh Post-Gazette

» Один из моих главных критериев признания книги стоящей — это количество раз, когда вы беспомощно фыркаете от смеха и говорите: «Вау! Знаете ли вы, что … », прежде чем ваш многострадальный супруг бросит вам книгу через комнату. Моя личная супруга говорит, что в этом отделе «Глоток» берет пирог ».
— Адам Вуг, Сиэтл Таймс

« Позволяя этому блестяще озорному писателю, для которого нет каламбура и нет священной коровы, окунуться в ее перо в купели всякого мелкого юмора, должно быть, казалось даже более рискованным, чем ее предыдущие экскурсии в трупы ( Stiff ), загробную жизнь ( Spook ), секс ( Bonk ) и космическое пространство ( Packing for Mars ) .Но окунулась она — в какой-то момент она положила всю руку в живот коровы ― и придумала еще одно необычайно информативное поп-научное развлечение в Gulp: Adventures on the Alimentary Canal .
— Джеффри Берк, Bloomberg

«И снова Роуч смело идет туда, куда не заходил ни один автор, в науку о табу, мрачном, мерзком и просто странном. И она передает все это в безупречной манере: тепло, ясно, криво, разделяя неизбежное развлечение, никогда не прибегая к дешевому или очевидному.Ням! »
— Стивен Пинкер, автор книги« Как работает разум » и « Лучшие ангелы нашей природы »

« Как зондирование, так и эндоскопия, Gulp — это квинтэссенция Мэри Роуч: в высшей степени обширная, бесконечно широкая. любопытно, всегда удивительно и, да, до боли смешно «.
— Том Вандербильт, автор книги Traffic: Почему мы движемся так, как мы делаем (и что это говорит о нас)

Мэри Роуч — автор пяти самых продаваемых научно-популярных работ, в том числе Grunt , Stiff и, совсем недавно, Fuzz .Ее статьи были опубликованы в National Geographic и New York Times Magazine , а также в других публикациях. Она живет в Окленде, штат Калифорния.

‘gulp’ не распознается как внутренняя или внешняя команда

Вы можете удалить ошибку «gulp» не распознается как внутренняя или внешняя команда , добавив путь gulp в переменную PATH в переменной среды.

Когда вы работаете над проектом в своей организации, с вероятностью 90% вы подготовите все для себя и просто начнете кодировать шаг за шагом, потому что вокруг вас много людей, которые делают эту работу за вас.Но подумайте о сценарии, когда вы хотите создать проект у себя дома или у вас есть возможность поработать над новым проектом, первое, в чем вы можете застрять, — это настройка среды. Здесь я делюсь одним из случаев, когда я настраивал свое приложение angular js. Для этого я установил необходимое программное обеспечение и инструменты. Я установил npm глобально, используя npm install -g npm . Я попытался установить gulp с помощью команды npm install -g gulp , которая была простой установкой, но после запуска команды gulp в командной строке она выдала ошибку «gulp» не распознается как внутренняя или внешняя команда .Самым интересным моментом является то, что вы столкнетесь с этим глобально, а также в локальной папке проекта. В этой статье я рассмотрю и то, и другое.

Глобальная настройка «глотка»

Чтобы команда «gulp» работала глобально, просто добавьте путь gulp в переменную PATH в переменных окружения . После того, как вы правильно установили node.js и gulp, добавьте переменную «NODE_PATH» в область системной переменной и установите путь npm . Единственное, что следует помнить для переменной «PATH», — это копировать путь только до npm.Вы можете найти папку npm в папке AppData в учетной записи пользователя. Чтобы установить его для каждого пользователя, используйте, как показано ниже.

% AppData% \ npm

Выполните следующие шаги для успешной настройки gulp.

1) Я предполагаю, что npm, gulp уже установлены глобально, и это выглядит так, как показано ниже. Перейдите к местоположению: C: /> Пользователи> Ваше имя пользователя> Данные приложения> Роуминг

2) Теперь перейдите в Мой компьютер> Свойства> Дополнительные системные настройки> Переменные среды

3) Нажмите «Создать», чтобы добавить новую переменную «NODE_PATH» и добавить путь «node_module» в поле значения.

4) Он будет добавлен в раздел системных переменных.

5) Отредактируйте переменную «Путь».

6) Добавьте путь от «Node_Module» до «\ AppPath \ Roaming \ npm» в переменную пути, как показано на снимке экрана ниже. Скопируйте % AppData \ npm в переменную Path.

7) Откройте командную строку и напишите «gulp -v». Вы увидите версию gulp, отображаемую на экране.

Если версия отображается правильно, значит, все готово.Теперь вы можете использовать gulp без ошибок.

Настройка «gulp» локально

Если вы хотите установить gulp для своего проекта, выполните следующие действия:

Установите gulp локально в папку проекта с помощью команды «npm install gulp» .
Используйте команду npm link gulp
Выполните команду «gulp -v» . Он должен показать вам версию gulp.

Надеюсь, это вам поможет.