What to use in your Front-End workflow?

Question

PHP

Здравствуйте!
Скоро нужно будет сделать front-end часть нескольких проектов (буду делать один, без команды) и я решил заодно изучить новые технологии в сборке проектов и тому подобное. Много читал по этому поводу, смотрел видео и пока выбор пал на: Gulp ( скорее всего Yeoman c тем же Gulp (генератор gulp-webapp) ) , html шаблонизатор Jade, css-препроцессор Stylus. Ну и Bower, но тут особо нету вариантов, в отличии от 3-х предыдущих.
Также стоит отметить что после завершения этих 2-х проектов я буду искать работу в оффлайне, и надо чтобы это хоть как-то было востребовано, поэтому пока сомневаюсь в выборе. Вроде Gulp мне лучше чем Grunt, но последний более популярен. Также Stylus вроде как только набирает популярность, тот же bootstrap юзает SCSS и LESS. В codepen.io почти все на SCSS написано.
Буду очень благодарен любым советам по тому, что лучше использовать в данный момент и на перспективу. Или просто если вы поделитесь своим workflow для Front-End разработки, возможно ваш какой-то опыт. Спасибо.

Answer 1

<a href="https://webformyself.com/postranichnaya-navigaciya-s-ispolzovaniem-ajax-i-jquery-chast-1/">Показать еще</a>

Answer 2

Quite simply, look at how any pagination is done for popular cms.
From the data you need to know:
1) the number of blocks that should appear after clicking (for example, 5 in one click)
2) The total number of results
3) And the number of results shown at the moment (for example, 15 pieces)
After clicking, the helmet to the server the current number of results and we ask you to display everything from the
current number of results + the number of blocks that should appear after clicking. The server returns this data. We catch them in the front and add these blocks with the help of js to those that we already have (like appEnd on jquery)
In general, something like this.

Answer 3

По своему небольшому опыту могу сказать, что хотя в большинстве вакансий в сфере front-end и присутствуют строчки вроде gulp/less/sass и т. д. но на собеседованиях этому большое внимание не уделяют, то есть знаешь ну хорошо плюсом будет, но маловероятно что если вы подходите по навыкам и знаниям то вас не возьмут потому что вы использовали раньше less а не sass, почему так? ну, у меня конечно нет статистики подробной но я уверен что большинство верстальщиков, фрилансеров, front-endщиков и т.д. не используют препроцессоры на полную мощь, переменные, вложенные селекторы, пара примесей это все конечно хорошо, но если использовать препроцессор на таком уровне то перейти с одного на другой не составит никакого труда и в принципе на небольших проектах только этим и пользуются, оно и понятно. Другое дело крупные проекты где подходят уже более основательно к выбору препроцессора, смотрят так сказать именно его "фичи" и чем он отличается от своих аналогов (мы сейчас не про синтаксис говорим), но в любом случае если вы делаете, на сколько я понял, относительно небольшие проекты, вы всем этим пользоваться не будете, то есть знаний на уровне: "да использовал этот препроцессор в работе", на мой взгляд более чем достаточно, потому что, как уже сказал, на том уровне, на котором препроцессоры использует большинство разработчиков (занимающихся небольшими проектами) они отличаются не сильно

Answer 4

Поделюсь workflow front-end разработки на TARS. Отличный инструмент для легкой разработки фронтенда.

Answer 5

>Вроде Gulp мне лучше чем Grunt, но последний более популярен.
Сейчас только gulp и юзают.

Answer 6

Популярно не значит хорошо, можно провести аналогию с мостом.
Если коротко, с чем удобней работать и что решает ваши задачи, то и используйте.
Какой сборщик использовать особой разницы нет.
Лично я использую Gulp + пакеты к нему автопрефиксер, генератор спрайтов, генератор стилей для шрифтов, сжатие картинок, browsersync, минимизация CSS/JS, SASS и для меня этого пока достаточно.
Все это можно делать и в Grunt, другое дело что есть разница в скорости сборки.

Answer 7

Между Gulp и Grunt особой разницы нету, переход доставляет некоторые неудобство, но по возможностям одинаковы. Gulp старается параллелизовать все таски, насколько возможно, поэтому может быть быстрее.
Jade, наверное, самый мощный шаблонизатор, но только для html/xml, для текста не очень удобно.
Ну вообще-то npm.

Answer 8

Обратите внимание на Webpack. Это новая альтернатива gulp/grunt. Если пишете яваскрипт, рекомендую смотреть в сторону компонентной разработки (React/Web Components), и конечно es6/7

Answer 9

Ну и Bower, но тут особо нету вариантов, в отличии от 3-х предыдущих.

npm init
npm install jquery --save-dev

Также Stylus вроде как только набирает популярность

между всеми тремя настолько мало различий, что можно пользоваться всеми одновременно

Gulp мне лучше чем Grunt

гульп лучше, тем что все параллельно запускает. Плагинов куча под оба
С теоретической точки зрения, стоит вводить по одной новой технологии в каждом проекте
6 - перебор

Answer 10

я коноечно ещё только начинаю свой путь разработчика но уже потихоньку прихожу к приглянувшемуся мне workflow
- npm (элементарно устанавливать gulp и есго можули с прочими зависимостями)
- gulp (и грядка модулей для сборки - run-sequence, del, gulp-sourcemaps, gulp-autoprefixer, gulp-concat, browser-sync, gulp-uncss, gulp-changed, gulp-imagemin, gulp-jscs ...... etc)
- jade как html template engine
- в плане CSS препроцессором не определился ещё но Stylus вроде подаёт надежды на светлое будущее ну и SCSS (SASS) поскольку многие используют
- в плане JS пока чистый стараюсь пользовать чтоб матчасть познать, но не брезгую применением jQuery, AngularJS и прочими свистелками и перделками )))
- в качестве IDE пользую WebStorm
на данном этапе развития фронтэнд девелопера мне кажется это вполне разумным набором

Answer 11

Попробуйте использовать мой велосипед
gulp-front