Сборщики модулей, оптимизация и автоматизация

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

Webpack

(на NodeJS)

http://webpack.github.io

Сборщик модулей с большим количеством функций и плагинов. Webpack собирает различные JS — файлы, или, например, CSS — стили, HTML-файлы, даже изображения, соединяет и формирует один оптимизированный файл.

Видео на тему: https://learn.javascript.ru/screencast/webpack

Brunch

http://brunch.io

Сравнение с другими сборщиками: http://brunch.io/docs/why-brunch#brunch-vs-webpack

Browserify

(на NodeJS)

Загрузчик и сборщик модулей JS

http://browserify.org

Подробно  про Browserify: http://prgssr.ru/development/nachinaem-rabotu-s-browserify.html

Babel

http://babeljs.io

Babel — это транспайлер, то есть позволяет переводить код из одного языка в другой.

Здесь можно попробовать его в работе на примере перевода Javascript es-6 в es-5 и наоборот: https://babeljs.io/repl/

Немного про работу babel: https://codedojo.ru/tutorials/babel

Gulp

(на NodeJS)

http://gulpjs.com

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

Подбробно про Gulp: https://webformyself.com/gulp-dlya-nachinayushhix/

Видеоуроки: https://learn.javascript.ru/screencast/gulp

Grunt

(на NodeJS)

https://gruntjs.com

Таже описывает и автоматизирует задачи, оптимизирует код, как JS, так и HTML и CSS.

Подробнее про Grunt: https://webref.ru/dev/grunt-getting-started

 

Сравнение между собой: https://habrahabr.ru/post/215131/

Сравнение сборщиков на англ:  https://survivejs.com/webpack/appendices/comparison/

https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners

Другие статьи:

CSS-фреймворки

СSS-фреймворки для веб-разработчика в 2017 году

(CSS (Cascading Style Sheets) библиотеки)

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

Blueprint

http://www.blueprintcss.org

Немного о blueprint:

http://gearmobile.github.io/css/framework-blueprint/

Bootstrap

http://getbootstrap.com

Русская страничка:

http://bootstrap-3.ru/index.php

Подробнее про использование bootstrap:

https://habrahabr.ru/post/211032/

Foundation

http://foundation.zurb.com

Много про foundation: https://webformyself.com/chto-novogo-v-foundation-6/

Semantic UI

https://semantic-ui.com

Skeleton

http://getskeleton.com

Pure

https://purecss.io

пример pure: https://purecss.io/layouts/blog/

Некоторые примеры работы с pure: http://innova-media.ru/news/1147/

Обзор pure css: https://siteacademy.ru/purecss-offers-an-intriguing-alternative-to-bootstrap

Kube

http://kubeframework.com

(либо https://imperavi.com/kube/)

YAML4

http://www.yaml.de

Bulma

http://bulma.io

основывается на Flexbox

Shine

http://rmmfree.github.io/shine_css/

Uikit

https://getuikit.com

Подробнее про UIkit framework: https://webformyself.com/vvedenie-v-uikit-framework-chast-1/

 

Сравнение фреймворков между собой:

http://usablica.github.io/front-end-frameworks/compare.html

Плюсы и минусы фреймворков:

https://webformyself.com/top-10-front-end-frejmvorkov-v-2016/

Еще больше фреймворков:

http://iantonov.me/page/obzor-css-frejmvorkov

https://networkroom.ru/список-css-фреймворков.html

https://habrahabr.ru/post/156747/

Очень много свежих фреймворков: http://www.cssauthor.com/css-frameworks/

Работа с разметкой:

Grid https://css-tricks.com/snippets/css/complete-guide-grid/

Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Другие статьи:

CSS пре- и постпроцессоры

Препроцессоры

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

Sass  (scss)

(на Ruby)

https://sass-scss.ru/guide/

Дополнительная библиотека Compass

Один из самых популярных препроцессоров

Less

( на JavaScript)

http://lesscss.org

https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_1/css-reprocessors.html

Stylus

( на JavaScript)

Наиболее гибкий и новый препроцессор

http://stylus-lang.com

Почему все чаще переходят на stylus: https://habrahabr.ru/company/yandex/blog/169415/

 

Отличия Sass и Less: https://habrahabr.ru/post/144309/

 

Что могут добавить в CSS надстройки Sass, Less  и прочие препроцессоры:

  • Переменные
  • Примеси
  • Вложенные селекторы
  • Функции
  • Простая математика
  • Циклы for
  • Массивы
  • Условные операторы if .. else
  • Наследование селекторов
  • Ссылки на свойства

 

Постпроцессор

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

Постпроцессор — это библиотека, которая преобразует CSS файл и на выходе сохраняет оптимизированный CSS.

Как работает постпроцессор: 

https://webformyself.com/postprocessory-css-dlya-nachinayushhix-sovety-i-resursy/

PostCSS.

(на JavaScript)

Автоматизирует рутинные операции с CSS с помощью расширений, написанных на языке JavaScript. Используется при разработке Википедии, Facebook и GitHub.

http://postcss.org

Подробнее о postCss: https://habrahabr.ru/post/280988/

Pleeease

(для NodeJS)

http://pleeease.io

Bless

Это постпроцессинг для оптимизации под IE

http://blesscss.com

Rework

Фреймворк для создания постпроцессоров

https://github.com/reworkcss/rework

 

Другие статьи: