Npm

Отслеживание файлов

Gulp имеет возможность следить за изменением файлов и выполнять задачу или задачи при обнаружении изменений. Эта функция удивительно полезна (для меня, наверное, одна из самых полезных в Gulp). Вы можете сохранить Less-файл, а Gulp превратит его в CSS и обновит браузер без каких-либо действий с вашей стороны.

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

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

Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

Вы также можете указать для watch функцию обратного вызова вместо массива задач. В этом случае функция получает объект event содержащий информацию о событии, которое вызвало функцию:

Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher. Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher:

В дополнение к событию change вы можете прослушивать ряд других событий:

• end

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

• error

  Срабатывает, когда происходит ошибка.

• ready

  Срабатывает, когда файлы были найдены и готовы к отслеживанию.

• nomatch

  Срабатывает, когда запросу не соответствует ни один файл.

Объект watcher также содержит некоторые методы, которые можно вызывать:

• watcher.end()

  Останавливает watcher (при этом задачи или функции обратных вызовов не будут больше вызываться).

• watcher.files()

  Возвращает список файлов за которыми следит watcher.

• watcher.add(glob)
  Добавляет файлы в watcher, которые соответствуют указанному шаблону glob (также принимает необязательную функцию обратного вызова в качестве второго аргумента).
• watcher.remove(filepath)
  Удаляет определённый файл из watcher.

Gulp

Sample gulpfile.js

This file is just a quick sample to give you a taste of what gulp does.

var gulp =require('gulp-v4');var less =require('gulp-less');var babel =require('gulp-babel');var concat =require('gulp-concat');var uglify =require('gulp-uglify');var rename =require('gulp-rename');var cleanCSS =require('gulp-clean-css');var del =require('del');var paths ={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};functionclean(){returndel('assets');}functionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}functionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatch(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}exports.clean= clean;exports.styles= styles;exports.scripts= scripts;exports.watch= watch;var build =gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('build', build);gulp.task('default', build);

Use last JavaScript version in your gulpfile

Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your as .

npm install --save-dev babel-register babel-preset-es2015

Then create a .babelrc file with the preset configuration.

{"presets""es2015"}

And here’s the same sample from above written in ES2015.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constclean=gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('clean', clean);exportdefaultbuild;

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

Заполняем необходимые поля проекта по шагам и желательно латиницей. После ввода названия жмем Enter и переходим с следующему шагу.

• package-name: вводим название проекта маленькими буквами
• version: оставляем по умолчанию — 1.0.0
• description: вводим описание проекта, например, My first gulp project.
• entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
• author: впишите имя автора, я ввел Zaur Magomedov
• license: оставляем по умолчанию
• Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json. 

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

И так, после установки gulp в папке проекта должна появиться папка node_modules,  она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Issues

If you have a feature request/question how Sass works/concerns on how your Sass gets compiled/errors in your compiling, it’s likely a Dart Sass or LibSass issue and you should file your issue with one of those projects.

If you’re having problems with the options you’re passing in, it’s likely a Dart Sass or Node Sass issue and you should file your issue with one of those projects.

We may, in the course of resolving issues, direct you to one of these other projects. If we do so, please follow up by searching that project’s issue queue (both open and closed) for your problem and, if it doesn’t exist, filing an issue with them.

Разбор файла gulpfile.js

Я уже писал, что благодаря Gulp автоматически, автоматически группируются медиа-запросы. Еще добавлю, что SASS компилируется в CSS, сжимается CSS, происходит сборка всего проекта.

Для выполнения многих задач требуются плагины (дополнения) для Gulp. Они у вас уже установлены через package.json. Теперь их нужно просто подключить в gulpfile.js. Сперва для них нужно создать переменные, а потом добавить в задачи.

Посмотрите на ваш gulpfile.js, в самом верху идет объявление всех необходимых переменных

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

Среди переменных есть browserSync, которая будет отвечать за перезагрузку браузера, когда вы будете верстать и обновлять код вашей верстки. Переменная sass будет отвечать за компиляцию SASS в CSS. Остальные переменные:

• prefixer — автоматически ставить нужные префиксы в CSS;
• cssmin — сжимать CSS;
• uglify — сжимать JS;
• fileinclude — соединять все HTML-файлы в один. Также он соединяет JS-файлы;
• gcmq — объединять медиа-запросы.

Разберу первую задачу. Вот ее код:

gulp.task('html_build', function (done) {
    gulp.src('src/*.html')
        .pipe(fileinclude())
        .pipe(gulp.dest('build/'))
        .pipe(browserSync.stream());
    done();
});

Эта задача отвечает за сборку HTML-файлов. Называться она будет html_build. В самой задаче первая строка — gulp.src(‘src/*.html’). Она означает, что нужно взять все файлы с расширением .html из папки src.

Следующие несколько строк в задаче начинаются с pipe. Pipe переводится как «труба». Здесь первая труба — это .pipe(fileinclude()). Эта строка означает, что нужно все взятые html-файлы из папки src прогнать через fileinclude. А я уже писал, что fileinclude соединяет все HTML-файлы в один. То есть в этом pipe объединяются все HTML-файлы.

Следующий pipe — это .pipe(gulp.dest(‘build/’)). Здесь результирующий HTML-файл после объединения кладется в папку build.

Ну, и последний здесь pipe — это .pipe(browserSync.stream()). Это обновление браузера.

То есть всю задачу можно описать так: взять все HTML-файлы из папки src, собрать их в один файл, положить этот файл в папку build и обновить браузер. Всё.

Последняя функция done() означает, что задача выполнена.

Перепишу задачу так:

gulp.task('html_build', function (done) {
    gulp.src('src/*.html').pipe(fileinclude()).pipe(gulp.dest('build/')).pipe(browserSync.stream());
    done();
});

И здесь видно, что сама задача представлена одной строкой. Сперва идет команда .src, потом первый .pipe, потом второй .pipe и третий .pipe. Команды идут одна за другой через точку.

Но удобнее переносить каждую команду на новую строку, так код удобнее писать.

Следующие две задачи css_build, js_build и fonts_build написаны аналогично, просто у них свои пути до папок, и некоторые свои команды в pipe.

Разберу задачу webServer. Она отвечает за перезагрузку браузера. Вот код задачи:

gulp.task('webServer', function(done) {
    browserSync.init({
        server: "build/"
    });
    gulp.watch('src/**/*.html', gulp.series('html_build'));
    gulp.watch('src/**/*.scss', gulp.series('css_build'));
    gulp.watch('src/**/*.js', gulp.series('js_build'));
    gulp.watch('src/assets/fonts/*.*', gulp.series('fonts_build'));
    done();
});

Участок кода:

browserSync.init({
        server: "build/"
});

инициализирует сервер. Обновляться будет то, что находится в папке build.

Следующие строки gulp.watch смотрят за задачами html_build, css_build, js_build (watch переводится «смотреть»). Когда по этим задачам происходят изменения в html, css или js-файлах, Gulp перезагружает браузер.

Обратите внимание, что в функции watch путь до файла отличается, от того, что в задаче, например, для html_build. Дело в том, что задача html_build выполняется во время запуска gulp, и там нам нужны те HTML-файлы, которые находятся непосредственно в папке src

Пока это только файл index.html. А в watch нужно, чтобы отслеживались изменения HTML-файлов вообще во всех папках в папке src.

Ну, и самая последняя строка gulpfile.js:

gulp.task('default', gulp.series('html_build', 'css_build', 'js_build', 'fonts_build', 'webServer'));

Она объединяет все задачи. Задача default означает, что выполнять нужно только ее. А в строке gulp.series(‘…’) указано, что именно выполнять. В данном случае по дефолту нужно выполнять все перечисленные задачи.

Именно благодаря задаче default в консоли Windows можно писать просто gulp, а не gulp hello, как вы писали в начале урока.

Вот и всё, что касается gulpfile.js. Есть вопросы? Пишите их в комментарии.

works great inside lazypipe

Lazypipe assumes that all function parameters are static, gulp-if arguments need to be instantiated inside each lazypipe. This difference can be easily solved by passing a function on the lazypipe step

var gulpif =require('gulp-if');var jshint =require('gulp-jshint');var uglify =require('gulp-uglify');var lazypipe =require('lazypipe');var compressing =false;var jsChannel =lazypipe().pipe(jshint).pipe(jshint.reporter).pipe(jshint.reporter,'fail').pipe(function(){returngulpif(compressing,uglify());});gulp.task('scripts',function(){returngulp.src(paths.scripts.src).pipe(jsChannel()).pipe(gulp.dest(paths.scripts.dest));});

gulp-watch

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

Начнём с простого — делаем функцию, которая при каждом изменении файла index.html в
папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

Чтобы запустить мониторинг пишем

gulp watch

Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
Starting ‘watch’…

Теперь вносим изменения в файл index.html и сохраняем

Starting ‘html’…
Кто-то отредактировал index.html!

Как это выглядело в Gulp 3

Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки

Напишем функцию, которая будет собирать все файлы .css из этой папки,
обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch( «./app/assets/styles/**/*.css», style);

Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение,
пропустит его через sass, соберет все файлы в один.

Зачем нужен SASS:
чтобы пользоваться css переменными. Создать переменную, которую потом
вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет
изменить значение этой переменной, например, на сайте изменится основной цвет, всё
что нам нужно будет сделать — это поменять одну переменную в одном файле.

чтобы делать вложения в стилях (nested css)

чтобы использовать mixins

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

• 17.02.20 02:04

•
Den-V
•
#484714
•
Хабрахабр

•
Tutorial

•

•

4900

JavaScript, Node.JS, Разработка веб-сайтов, CSS, HTML

Начало

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

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

Инструкция по установке Gulp окружения

Для создания окружения необходимо иметь следующие установленные программы:

• «Node.js» (загрузить установщик «Node.js» для своей операционной системы можно c этой страницы; для проекта требуется версия программы не ниже 10);
• «Gulp» (установить Gulp можно посредством выполнения в консоли следующей команды: ).

Последняя версия этого проекта (v.2.3.0) основана на Gulp 4 версии.

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

Установка Gulp:

Ключ -g указывает npm, что пакет необходимо загрузить не в текущую, а в общую папку.

Выполнение инсталляции программы Bower осуществляется аналогично Gulp (актуально только для версии проекта 1.0.0):

npm install -g bower

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

Далее следует распаковать архив и перенести файлы из каталога «gulp-project-bootstrap-4» в корневую директорию проекта.

Если нужна не текущая, а какая-то определённая версия (например, 1.0.0), то её можно загрузить со страницы Releases.

Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:

npm install

Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле «package.json».

При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:

bower install

Данная программа установит фронтенд пакеты, указанные в файле «bower.json».

Use last JavaScript version in your gulpfile

Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your as .

npm install --save-dev babel-register babel-preset-es2015

Then create a .babelrc file with the preset configuration.

{"presets""es2015"}

And here’s the same sample from above written in ES2015.

importgulpfrom'gulp4';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};constclean=()=>del('assets');export{clean};exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}exportfunctionwatch(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}constbuild=gulp.series(clean,gulp.parallel(styles, scripts));export{build};exportdefaultbuild;

Usage

The following example will parse the build blocks in the HTML, replace them and pass those files through. Assets inside the build blocks will be concatenated and passed through in a stream as well.

var gulp =require('gulp'),    useref =require('gulp-useref');gulp.task('default',function(){returngulp.src('app/*.html').pipe(useref()).pipe(gulp.dest('dist'));});

With options:

var gulp =require('gulp'),    useref =require('gulp-useref');gulp.task('default',function(){returngulp.src('app/*.html').pipe(useref({ searchPath'.tmp'})).pipe(gulp.dest('dist'));});

var gulp =require('gulp'),    useref =require('gulp-useref'),    gulpif =require('gulp-if'),    uglify =require('gulp-uglify'),    minifyCss =require('gulp-clean-css');gulp.task('html',function(){returngulp.src('app/*.html').pipe(useref()).pipe(gulpif('*.js',uglify())).pipe(gulpif('*.css',minifyCss())).pipe(gulp.dest('dist'));});

Blocks are expressed as:

... HTML Markup, list of script / link tags.

• type: either , or ; will remove the build block entirely without generating a file
• alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that. The path can also contain a sequence of paths processed from right to left, using JSON brace array notation e.g .
• path: the file path of the optimized file, the target output
• parameters: extra parameters that should be added to the tag

An example of this in completed form can be seen below:

<html><head><linkhref="css/one.css"rel="stylesheet"><linkhref="css/two.css"rel="stylesheet"></head><body><scripttype="text/javascript"src="scripts/one.js"></script><scripttype="text/javascript"src="scripts/two.js"></script></body></html>

The resulting HTML would be:

<html><head><linkrel="stylesheet"href="css/combined.css"/></head><body><scriptsrc="scripts/combined.js"></script></body></html>

Потоки

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

В приведённом выше примере функция gulp.src() получает строку, которая соответствует файлу или набору файлов, и создаёт поток объектов представляющих эти файлы. Затем они переходят (или перетекают) в функцию uglify(), которая принимает объекты файлов и возвращает новые объекты файлов с минимизированным исходником. Этот результат затем перетекает в функцию gulp.dest(), которая сохраняет изменённые файлы.

Вот что происходит в виде схемы:

Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

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

Для лучшего понимания потоков прочтите Stream Handbook.

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json.

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

cd project1
npm init

Затем нажмите «Return», чтобы принять значения по умолчанию. Файл package.json, в котором хранятся параметры конфигурации npm, будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules. Нужно добавить их в свой файл .gitignore, чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install, чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

• html ‒ исходные файлы и шаблоны HTML;
• images ‒ оригинальные несжатые изображения;
• js – предварительно обработанные файлы скриптов;
• css – предварительно обработанные файлы Sass (.scss)

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

Когда понадобится, Gulp создаст файлы и подпапки:

• html ‒ скомпилированные статические файлы HTML;
• images ‒ сжатые изображения;
• js ‒ единственный объединенный и минифицированный файл JavaScript;
• css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

mkdir -p src/{html,images,js,scss}

Итог

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

Все эти наработки можно красиво обернуть в Composer плагин и подшлифовать для конкретной системы (например, Yii2). Этим я обязательно займусь, когда переведу CMS на неё.

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