Рубрика «gulp» - 2

День добрый.

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

Итак сначала начнем с перечисления всех необходимых плагинов:

var gulp = require('gulp'), 
    clean = require('gulp-clean'), //для чистки папки dist
    inject = require('gulp-inject'), //этим мы будем инжектить исходники проекта поотдельности для рабаты в dev режиме
    bundle = require('gulp-bundle-assets'), //тот самый очень полезный плагин
    config = require('load-gulp-config'), //для загрузки json конфигураций на выходе из предыдущего плагина
    htmlreplace = require('gulp-html-replace'); //этим мы будем вставлять считанныйе из json бандлы в наш html

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

Коротко говоря на выходе мы получаем вот такой bundle.result.json, все исходини уже минимизированы и могут располагатся где вам угодно:

{
  "main": {
    "styles": "<link href='main-8e6d79da08.css' media='screen' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='main-5f17cd21a6.js' type='text/javascript'></script>"
  },
  "vendor": {
    "scripts": "<script src='vendor-d66b96f539.js' type='text/javascript'></script>",
    "styles": "<link href='vendor-23d5c9c6d1.css' media='screen' rel='stylesheet' type='text/css'/>"
  }
}

Читать полностью »

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

Стиль — авторский.

Узнаете, об использовании Rollup как более компактную и эффективную альтернативу webpack и Browserify для объединения файлов JavaScript.

В конце этого руководства мы сконфигурируем Rollup для:

Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.

Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет, возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.

Делаем более-менее универсальный калькулятор услуг для сайта - 1

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

Читать полностью »

Одна из особенностей Angular, присущая и первой и новой версии — высокий порог вхождения. Новый Angular, помимо всего прочего, трудно даже запустить. А и запустив, легко получить 1-2 Мб скриптов и порядка нескольких сотен запросов при загрузке hello world страницы. Можно, конечно, использовать всякие стартеры, seed'ы или Angular CLI, но для использования в серъезном проекте нужно самому во всем разбираться.

В этой статье я постараюсь описать, как настроить удобную среду разработки с использованием SystemJS, и production сборку Angular приложения на основе Rollup, с выходом около 100кб скриптов и нескольких запросов при открытии страницы. Использовать будем TypeScript и SCSS.

Попробовать все в деле можно в моем angular-gulp-starter проекте.

Angular — настройка среды разработки и production сборки с AOT-компиляцией и tree-shaking (Gulp, Rollup, SystemJS) - 1Читать полностью »

Спор между любителями CLI программ и приверженцами GUI берёт своё начало с появления самых первых ОС с графическим интерфейсом и продолжается до сих пор. Я никогда не имел ничего против хороших GUI приложений и с удовольствием пользовался Codekit с самой первой версии. Сейчас на дворе конец 2016 года и вышло мажорное обновление под номером 3.

Codekit — это расширяемый front-end сборщик «на стероидах» с графическим интерфейсом и возможностью навешивать скрипты по любому событию. Ближайшими «консольными» аналогами можно назвать Grunt и Gulp. GUI подразумевает невероятно простую конфигурацию — большинство настроек выставляются и меняются с помощью чекбоксов либо радиокнопок. Для всего остального есть мастеркард текстовые поля ввода, в которые вписываются те же параметры, что и в консольных программах.
Читать полностью »

У тебя есть сайт с админпанелью и ты используешь или только собираешься использовать Gulp в этом проекте? Хочешь максимально работать с сайтом через админпанель, включая контроль над генератором ресурсов Gulp? Тогда под катом я покажу тебе простой способ управления Gulp'ом с вотчерами на сервере прямо из админпанели.

Читать полностью »

image

В Yii2 и множестве его сторонних расширений используется Bootstrap. Обычно Bootstrap не заменяют чем-то другим, ведь с ним достаточно удобно работать, и на вид он вполне эстетичен. Если захотелось освежить интерфейс приложения, то может быть не очень отрадно переопределять кучи css-свойств. Обиходные «шкурки» из bootswatch предлагать не буду, приятней взять препроцессор и переопределить несколько переменных. Преобразить облик сайта таким способом можно основательно. Покажу на примере с Less, так как актуальный бутстрап написан на нем. При желании можно подменить дефолтный пакет на Sass-овский или Stylus-овский и изменить приведенный далее код соответственно препроцессору.
Читать полностью »

Волшебная сборка проекта на WordPress при помощи пакетных менеджеров и напильника - 1

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

TARS

Прошли очередные полгода с последних новостей о TARS (раз и два), а значит настало время поделиться новинками. Как всегда напомню, что TARS — это основанный на Gulp сборщик фронтенда, который помогает фронтенд-разработчику или даже целой команде создавать проекты любой сложности. Мы продолжаем уверенное шествие по России и не только. TARS уже используют в Нидерландах, Японии, Китае, Украине, Польше и других странах. Это можно заметить и по количеству звёзд на github, и по числу участников чата в gitter, и по количеству установок TARS-CLI за последний месяц (больше тысячи, а в пике больше 3 тысяч). Мы закрыли почти две сотни issue, выпустили два крупных обновления. Пользователи сборщика активно репортят, участвуют в разработке. Можно сказать, что у нас родилось маленькое сообщество.
Читать полностью »

Добрый день

Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.

По совету коллег решил выложить ее в открытый доступ. Думаю, начинающим верстальщикам это пригодится, т.к. когда-то я потратил немало времени, чтобы прийти к простым истинам.

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

Итак начнём!
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js