Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Автоматизация проекта (Front-end)

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Всем привет.

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

Обрисую вкратце ситуацию. Есть один проект — сайт продуктовой компании. Основан не на CMS и не на движке в классическом смысле. Ручная верстка и сопровождение. Сайт сверстан с использованием Foundation 5. Есть основной сайт (домен второго уровня) и три вспомогательных сайта третьего уровня. Все они используют общий набор файлов JS/CSS/PNG sprites, но также имеются индивидуальные стили под конкретный сайт, чтобы не загружать ненужным остальные.

Задача держать общие файлы в одной папке, редактировать их там и автоматизировать процесс подкладывания по необходимым папкам проекта. Ну и стандартные дела при сборке — минификация, объединение скриптов в один файл, препроцессинг Sass. При этом, чтобы синхронизация после правки происходила мгновенно. Объем информации весьма невелик.

Для верстки использую ST3. Ось OS X 10.11. Настроил штатный веб сервер для визуального контроля правок на сайтах. Выгружаю сайты в Transmit через синхронизацию. Все 4 сайта лежат на разных виртуальных серверах.

Сейчас подтягиваю Sass (раньше без него обходился), но это лишь малая часть, которая упростит жизнь.

Не знаю, насколько это имеет отношение к сборщикам типа Grunt/Gulp (только начал в них вникать), потому и спрашиваю у более опытных.

Спасибо.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

www.youtube.com/...trJwXCz1utct9b6Vub9VWQoKo

Вот тебе уроки по gulp’у, должно помочь. 6ое видео вроде то что тебе надо.

Благодарю. Я еще эти вот скачал:

www.youtube.com/...3BHE2RsdyUNpbiVn-cfuV7Fos

Заодно английский прокачать :). Может кому для варианта пригодится.

И еще, подскажите плиз: пытаюсь запустить готовую webpack-сборку на винде: github.com/...mbler-webpack-boilerplate
Как исправить ошибки, которые он выводит? (должно быть полезно всем)

npm WARN EPEERINVALID [email protected] requires a peer of jade@^1.7.0 but none was installed.

> [email protected] dev D:\rambler-webpack-boilerplate
> NODE_ENV=development webpack-dev-server —progress

“NODE_ENV” ▒▒ ▒▒▒▒ ▒▒▒▒७▒▒▒ ▒▒▒ ▒▒▒譥▒
▒▒▒▒▒▒▒▒, ▒ᯮ▒▒塞▒▒ ▒ணࠬ▒▒▒ ▒▒▒ ▒▒▒▒▒▒ 䠩▒▒▒.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv “D:\\Program Files\\nodejs\\node.exe” “D:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js” “run” “dev”
npm ERR! node v5.1.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development webpack-de v-server —progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script ’NODE_ENV=de velopment webpack-dev-server —progress’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rambler-webpack-boile rplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! NODE_ENV=development webpack-dev-server —progress
npm ERR! You can get their info via:
npm ERR! npm owner ls rambler-webpack-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\rambler-webpack-boilerplate\npm-debug.log

А раз уж такая тема появилась, подскажите плиз: для чего на лендинге можно заюзать ReactJS? Для каких элементов? Хочется заюзать, чтоб иметь примеры проектов на нем, но дело в том, что сервер не передает никаких данных, чтоб их можно было выводить на лендинге с помощью реакта...

Ок, чем сейчас и занят. Не знаю пока специфику webpack’а, но проникся уже Gulp’ом как более универсальным (как мне сейчас кажется) решением.

grunt вышел из моды потому что значительно медленней gulp, который использует потоки вместо файлов.

webpack немного для других вещей предназначен. Но с поставленными задачами он тоже мог бы справиться, да.

Нужен специализированный конфиг, а то в Webpack’е ну уж совсем для меня оверкилл получается.

Использовал Grunt, под такие задачи (и не только) отлично подходит. Упаковка, сжатие, копирование, вставка (injector) и пр. функционал. Для всего этого есть подходящие модули и доступная дока.
P.S. Я не фронтэндщик.

Ага, значит все-таки это сборщики. Спасибо, продолжу копать в этом направлении.

Уточняю: Grunt не сборщик, это более обширный инструмент для автоматизации, причём не только клиентской части.

Посмотрел ролики по Grunt/Gulp. Это на 100% то, что мне нужно. Наверно это будет Gulp ввиду его няшности в последне время :)

Смотри сразу в сторону webpack

Мы буквально несколько месяцев назад перешли с Gulp на Webpack в UI части.

Переходи сразу уже на webpack. Это и сборщик проектов и сборщик модулей для JS. Сейчас тренируюсь webpack + es6 + webpack-dev -server- просто бомба.

Спасибо за инфу, поколупаю.

Посмотрел несколько эпизодов одного русскоязычного скринкаста про Webpack. Как-то с первого раза не пошло. С Grunt попалось понятнее: вот есть один js, вот второй. Вот написали коротенькую и понятную инструкцию по сборке. Вот на выходе конкатенированный из двух и минифицированный js как результат. Буду искать более понятные варианты.

когде размер проекта растет — размер Gunt фала растет пропорционально и может достигать пару сот строк кода. При этом скорость сборки падает. Конфиг для Webpack-а же с ростом проекта в размере увеличивается немного и скорость сборки остается очень высокой.

Grunt — это такой себе config hell. Если webpack не пошел попробуйте gulp тогда.

Не умоляю крутизны Webpack. Вижу, что на сегодня это очень прогрессивный инструмент. Но я вижу, что у меня весьма примитивные задачи, их вообще можно на AppleScript реализовать. Я сам все делаю, шарить проект не с кем. Но Webpack изучать продолжу.

Підписатись на коментарі