Какой лучший стек технологий для сборки фронтенда?

Хочу провести автоматизацию проекта (удаленный сервер VPS),
Есть несколько директорий (около 30 их количество будет расти)

Путь такой demo/$var/themes/$template/
Вместо переменных $var и $template могут быть любые имена директорий.

В директории $template может быть любое количество подпапок.
Сборка для фронтенда будет интегрирована в CMS PrestaShop.

Сейчас на сервер установлен руби и это работает, но не быстро и не идеально.
Хочу перевести на node.js хотя бы потому что на node все нужно уже есть или почти все, а также работает это все быстрее.

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

Переезд на другие операционные системы пока не рассматривается, т. к. разработка должна идти также быстро как и раньше и даже быстрее. В будущем переведем разработку на MAC OS.

В коде часто встречаются дубли scss, слишком большие картинки, не полная кроссбраузерность после использования sass, autoprefixer или postcss для расстановки префиксов.

Переход на препроцессоры только начался, многие проекты досих пор написаны на css.

Чтобы не переписывать все это вручную посоветуйте стек технологий, который будет отвечать поставленной задаче:
gulp,brocolli,metalsmeaths,brunch

1. Анализируем проект 1 раз ищем css по всем поддерикториям в папке $template
2. Чистим css от лишнего кода, от дублей, так чтобы верстка не поехала. (верстка адаптивная)
3. Преобразуем файлы css в sсss, создаем source map. После этого шага работаем только с scss
4. В scss стили переписываются и сохраняются исходные пути. например template/css/modules/block/style.css перепишется в template/sass/modules/block/style.scss
5. Для переменных, extension, color, font создаются отдельные файлы импорты и прописываются в шапке каждого стиля.
Пример: prntscr.com/7cip1t
6. После правки scss, css перезаписывается, создаются source map, в стили при этом добавляются префиксы через autoprefix, css стили форматируются в читаемый вид и из них удаляется мусор, которого будет не должно, но если вдруг появится.

В данный момент если распарсить сжатый файл стилей это будет 24000 строк кода, задача сделать максимально коротким этот файл. И так же сделать все описанное выше.

В идеальном варианте, нужно настроить, чтобы это было как здесь по скорости:
https://speakerdeck.com/addyosmani/css-performance...
  • Вопрос задан
  • 1753 просмотра
Пригласить эксперта
Ответы на вопрос 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ну, первые пять пунктов проще, наверное, сделать вручную, чем положиться на автомат, а потом кропотливо восстанавливать то, что поехало.

Шестой пункт, как сказал 27cm — grunt/gulp. Считается, что второй пошустрее и попроще.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы