Angular — налаштування середовища розробки і production складання з AOT-компіляцією і tree-shaking (Gulp, Rollup, SystemJS)

Одна з особливостей Angular, притаманна і першої і нової версії — високий поріг входження. Новий Angular, крім усього іншого, важко навіть запустити. А і запустивши, легко отримати 1-2 Мб скриптів і порядку декількох сотень запитів при завантаженні hello world сторінки. Можна, звичайно, використовувати всякі стартери, seed'и або Angular CLI, але для використання в серйозно проекті потрібно самому у всьому розбиратися.
У цій статті я спробую описати, як створити зручне середовище розробки з використанням SystemJS, і production збірку Angular додатки на основі Rollup, з виходом близько 100кб скриптів і декількох запитів при відкритті сторінки. Використовувати будемо TypeScript і SCSS.
Спробувати все в справі можна в моєму angular-gulp-starter проекті.

Читати далі →

Codekit 3 — сучасний GUI складальник для MacOS

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

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

Читати далі →

Запускаємо Gulp з вотчерами на звичайному хостингу через адмінпанель

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

Yii2: Кастомізація Bootstrap з допомогою Less

image

У Yii2 і безлічі його сторонніх розширень використовується Bootstrap. Зазвичай Bootstrap не замінюють чимось іншим, адже з ним досить зручно працювати, і на вигляд він цілком естетичний. Якщо захотілося освіжити інтерфейс програми, то може бути не дуже втішно перекрити купи css-властивостей. Обігові «шкурки» з bootswatch пропонувати не буду, приємніше взяти препроцесор і перевизначити кілька змінних. Перетворити вигляд сайту таким способом можна грунтовно. Покажу на прикладі Less, так як актуальний бутстрап написаний на ньому. При бажанні можна підмінити дефолтний пакет на Sass-івський або Stylus-івський і змінити наведений далі код відповідно препроцессору.

Читати далі →

Чарівна складання проекту на WordPress за допомогою пакетних менеджерів і напилка



Сьогодні я хочу поділитися з високоповажної аудиторією Хабра своїм підходом до організації автоматичного складання проекту на WordPress, що значно економить час при створенні нових сайтів.
Читати далі →

Прискорюємо npm-скрипти

Таск раннеры істотно спростили життя веб розробниками автоматизуючи рутинні дії пов'язані з запуском тестів, перевіркою коду, об'єднанням в один файл, транспайлингом та іншими не менш корисними справами. Опустимо питання необхідності подібних інструментів, звичайно, можна і без них, але вони суттєво спрощують життя і роблять більш якісним процес розробки.
Всі користуються таск раннери в тій чи іншій мірі: хтось старовинним грантом, хтось поступово йдуть з арени галпом і багатьма іншими, а хтось вже все використовує npm-скрипти.
Останні ми сьогодні розберемо у всіх деталях, а так само способи їх прискорення і розширення можливостей
Читати далі →

Ще більше комфорту в розробці фронтенда з TARS

TARS

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

Читати далі →

Складальник проектів на Angular і RequireJS і деякі думки по збірці

Що саме незручне в збирачах проекту? Правильно! Те, що потрібно збірку писати самому. Вивчати grunt/gulp/webpack, шаманити з плагінами, думати, як розбити конфіг на модулі, коли він зростає до кількох сотень рядків, потім кілька місяців радіти, що все працює, а коли в проекті з'являється критичне зміна, знову лізти в це болото.

Мені теж все це набридло, тому написав складальник, позбавлений цих недоліків. Його gulpfile.js виглядає так:

var gulp = require('gulp');
var arjs = require('arjs-builder')();

gulp.task('build', arjs.build);
gulp.task('test', arjs.test);
gulp.task('default', arjs.run);

Скопіювали собі проект, і більше ніколи туди не лізете, і назавжди забуваєте що таке збірка.
Єдине, що доведеться вивчити, — це три команди:

gulp #компилит, піднімає локальні сервери
gulp build #билдит проект
gulp test #запускає тести

Відкриваєте localhost:7000 і насолоджуєтеся локальною версією сайту, а в папці

build
вже лежить сбилженная версія.

— А як же темплейти, їх же треба в js впроваджувати?
— Звичайно! Всі впроваджено як годиться.
— А я стилі пишу на less, sass, stylus, їх же треба компилить?
— Пишіть як писали, все чудесним чином буде працювати.
— А картинки в CSS инклудить?
— Так давно у CSS. All included як у п'ятизірковому готелі.
— А розбити сбилженный файл на модулі?
— Перевірте папку build. Все по модулям? З унікальними іменами, заснованими на вміст файлу? Ось, а ви хвилювалися!
— А ось ще там щось…
— І це теж працює.

Але як таке можливо? Це ми й розглянемо у статті. А в кінці ще розповім, чому все-таки RequireJS

Читати далі →

Минификация проекту створеного в Blocs 1.5.2 з допомогою Gulp



Не так давно дізнався про новий для себе інструмент побудови сайтів на Bootstrap — Blocs. На хабре не знайшов про нього інформацію, тому дозволю собі трохи маркетингових нотаток, так як цей інструмент полегшив мені роботу.

Blocs орієнтований на простоту, цей інструмент приносить свіжий погляд до створення сучасних, високоякісних веб-сайтів, без необхідності розуміти або писати код.
Blocs позиціонує себе як конструктор, який дозволяє генерувати код, чистота і якість якого не поступається роботі професійного верстальника.

Blocs працює як десктопное додаток під операційною системою Mac OS X, і не обмежує вас кількістю створюваних сайтів, як це роблять онлайн-конструктори.

Blocs на льоту робить верстку адаптивної (не завжди правда якісно, але так як код читабельний і чистий, легко поправити), так само він підтримує Retina.

Більше про Blocs на офіційному сайті. Доступний тріал 5 днів.
Програма проста, тому цього тріалу достатньо.

Читати далі →

Плагін для gulp — збираємо файли по шматочках

Нещодавно постало завдання зверстати сайт не просто швидко, а дуже швидко.
Тому було прийнято рішення розгорнути gulp-проект (до сьогоднішнього дня я ще ніколи не вдавався до його допомоги) і зосередитися безпосередньо на кодинге. На жаль, цього виявилося недостатньо.

В процесі верстки стало зрозуміло, що величезні полотна html js-коду з кожним рядком все більше і більше уповільнюють процес верстки. Якщо чесно, ця проблема виникала і раніше, а сьогодні встала особливо гостро.

Тому потрібно було знайти рішення, завдяки якому можна підключити в потрібному місці вже зверстаний блок і зменшити тим самим розмір коду в исходниках.

Порившись в інтернеті, знайшов плагін gulp-rigger. Півгодини вистачило для того, щоб зрозуміти, що це зовсім не те, що потрібно:

Читати далі →