Skip to content
browsersyncWorkWithOpenServer-jsConcatMinify-cssSass-mdMarkdownToHtml
JavaScript CSS Hack HTML PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
public_html
.gitignore
.yarnrc
README.md
package.json
powershell.lnk
yarn-error.log
yarn.lock

README.md

Gulp4-browsersyncWorkWithOpenServer-jsConcatMinify-cssSass-mdMarkdownToHtml

Prepare

Install node.js. Check add them in %PATH%. Execute in console npm install --global gulp-cli. And it npm install yarn -G. Go to project in console and execute yarn for install node_modules.

Включение наблюдения

Execute from console in directory public_html gulp watcher.

Browsersync + PHP

Реализовано через локальный сервер const localDomainUrl first string in public_html/gulpfile.js, поднять который можно средствами php, или какой нибудь сборкой типа OpenServer. Чтобы страничка обновлялась, нужно включить скрипты на странице, если они вдруг заблокированы. Начальный файл проекта index.php находится в корне сайта. Это возможно криво, но ориентировано на обычный хостинг.

Sass

Обработка sass. Autoprefix css (пока не работает - не добавляются прификсы хотя все прописано). Минификация css.

Markdown to html

Отключен(markdown vulnerably) Просто Конвертация.

PUG to html

Отключен.

PUG to php

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

JS

Конкатенация, сохранение промежуточного варианта. Минификация min.js.

Обработка изображений

Сейчас работает следующим образом. При изменении содержимого src/images/ запускается оптимизатор, после обработки стандартными оптимизаторами, сохраняется, а затем содержимое потока переименовывается, сжимается уже webp, сохраняется рядышком.

Дополнительно

Для отображения на гитхабе зависимостей, package.json перенесен в корень проекта, а с помощью .yarnrc папка node_modules формируется в каталоге public_html.

Использовался как литература

Данный видео ролик

Примеры обработки изображений устарели.

Примеры использования gulp-imagemin. Пример использованный для Webp. Другие примеры: Примеры использования imagemin. Примеры использования imagemin-webp.

You can’t perform that action at this time.