Какие есть инструменты под windows для ускорения веб разработки?

Question

[Даниил]

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

Насчёт css думаю подключить SASS.
Подскажите какие инструменты вам полезны.

P.S. Пишу в notepad++, рисую в Photoshop, обновляю в Chrome, сохраняю на Яндекс Диске, запускаю с помощью Денвера.

Answer 1

[Sergej]

PHPStorm (webstorm etc.) + плагины под конкретные задачи.
Стандартные плагины для ускорения написания кода уже имеются.

А плагин less css compiler вообще супер.
Ну и как писали выше, различные LIVE ....

Answer 2

[JyraFF]

Sublime text + плагины

Answer 3

[Дмитрий Ермолаев]

sublime text 3 с плагинами

firefox с firebug

grunt с плагинами
grunt-concurrent - позволяет параллельно запускать плагины, которые работают так сказать непрервыно. в моем случае это grunt-contrib-connect, grunt-contrib-watch и grunt-contrib-compass
grunt-contrib-connect - локально создает сервер в связске с grunt-contrib-watch позволяет организовать livereload страницы
grunt-contrib-watch - постоянно отслеживает изменения в определенных файлах и при регистрации изменения перезагружет страницу загруженную в grunt-contrib-connect
grunt-contrib-compass - sass/scss в css, имеет свой встроенный livereload
grunt-contrib-jshint - проверяет на ошибки .js файлы
grunt-contrib-imagemin - сжимает изображения
grunt-contrib-copy - копирует файлы/папки
grunt-autoprefixer - расставляет префиксы в css
grunt-contrib-concat - конкатеринует файлы
grunt-uncss - удаляет неиспользуемые стили из css
grunt-combine-media-queries - группирует медиа запросы
grunt-contrib-cssmin - минифицирует и конкатеринует .css
grunt-contrib-uglify - минифицирует и конкатеринует .js

сохраняю на Яндекс Диске

для чего?

Comments

[Sergej]

@iusfof grunt-uncss не удалит случаем 50% bootstrap ?)

[Даниил]

типо для backup'а и что бы в любой момент мог скачать исходники. Возможно есть лучший способ

[dpismenny]

@Daniil94 Лучший способ это git.

[Sergej]

@pismenny Полностью согласен. Без git я уже жить не могу.

[Дмитрий Ермолаев]

@sayber он для этого и нужен.

[Дмитрий Ермолаев]

@Daniil94 git или любые другие системы контроля версий лучше

Answer 4

[Crash]

Вместо notepad++ лучше Sublime Text 3
Вместо Денвера лучше OpenServer

Comments

[Олександр]

Вот только sublime платный...

[Crash]

@Track77: в бесплатном режиме функционал без ограничений, разве что уведомление о покупке периодически всплывает

[Sergej]

@Track77: и если ввести ключик, не кто вас ругать не будет (я этого не говорил).
Это не как с adobe & mircrosoft. Эти товарищи наведываются часто)))
Ну и если вы реально хотите работать с этим редактором, то можно и приобрести.

Answer 5

[Alexander Tartmin]

У себя на компе я сделал просто
1) Поставил webstorm (ИМХО лучшая IDE которую приходилось использовать) в котором есть встроеный веб-сервер, которого более чем хватает проверить вёрстку (можно и просто файл в браузере открыть, но не кошерно как-то)
2) Если вёрстку нужно одновременно тестить на нескольких браузерах и комп достаточно мощный, идём на modern.ie и качаем виртуалки с осликами =). Затем находим в тырнетах COLT и покупаем его, так как кряка не существует, да и $50 не деньги я считаю. С помощью кольта в риал-тайме можно тестить вёрстку на разных гаджетах не тратя время и усилие на обновление страницы браузера.
3) Если уже начали верстать шаблоны под CMS, мой совет или пересеть на линукс или же поставить линукс на виртууалку на компе. В убунте веб-сервер ставится одной командой: sudo tasksel и в розовеньком окошке выбираем LAMP (Apache, MySQL, PHP)
А вообще пересаживайтесь на MacOS и не мучьтесь с виндой. Тут Вам и линукс будет и фотошоп и всё-всё-всё

Comments

[vinilzen]

+100 к 3 пункту и да, тоже пересл на мак ;)

[Pega]

По поводу 3-го пункта. Какие преимущества дает линукс , для верстки под CMS? Я ни одного не нашел. Вообще линукс для верстальщика не самая хорошая идея. Много движений для создания виртуального хоста, нет Photoshop, IE (костыли в виде виртуалки не рассматриваю). Какие преимущества дает MacOS для верстальщика?

Answer 6

[KasperGreen]

PHPDesigner, мастхэв если пишешь на php. Один из немногих полноценно работает с ftp, drag'n'drop и прочими плюшкиами. А такжё: подсказки, автозавершение, CSS, JavaScript, HTML, SQL, etc

Comments

[Sergej]

вы только что описали софт прошлого века.
PHPDesigner отстает от PHPStorm как минимум на 50%. Уж лучше Nusphere.
Вот только PHPStorm это полноценная IDE которая имеет виде плагинов все современные технологии.

Я к примеру у PHPDesigner не видел полной интеграции с Symfony2, Doctrine2, SymfonyClikable view, YML, AngularJS, Node, Less Compiler, SASS, HUML, BS3-Snippets, JShint и кучу всего необходимого для упрощения и ускорения разработки проектов.

Да и настройка PHPDesigner под свои нужны очень неуклюж.
И нафига FTP в IDE ? Если все пользуются SFTP, если пользуются конечно.
Ну и если мне не изменяет память, то там и консольки то нет.

[Sergej]

И одно из главных, PHPDesigner даже emmet не имеет.

[Crash]

В свое время PhpDesigner был очень неплох, но сейчас его разработка прекратилась вроде

[KasperGreen]

Иван: Ставил PHPStorm и другие IDE, в том числе и облачные, по прежнему использую PHPDesigner. Раздражает конечно, что не весь html5 знает и c CSS та же борода, а на тачпаде невозможно скроллить папку двумя пальцами.
Но за понимание того, что если я открыл файл на SFTP и жму CTRL+S то я хочу его сохранить там откуда открыл, очень ценю этот редактор

[Sergej]

@KasperGreen: с SFTP умеют работать почти все редакторы.
Но это надо кем быть, что бы прямо на сервере что то править?
Обычно работаешь на локальном, затем git, а вот потом уже на продакшен.

[KasperGreen]

Иван: Видимо я отморозок :)

Answer 7

[zjoin]

У меня так сейчас:
1. Текстовый редактор - Brackets
2. Контроль версий - Git
3. Эмулятор для работы с командной строкой - Cmder
4. Шаблон для разработки - Web Starter kit (модифицированный)

Comments

[Sergej]

Как мне кажется, немного сыроват Brackets ну и др. продукты с СС.
Хотя потенциал редактора хороший.

Answer 8

[Vitaly Sivkov]

Как уже писали выше - WebStorm c различными плагинами. Поддерживает Less/SASS.
Для чистого CSS можно заюзать плагин CSS-X-Fire. Для автоматической перезагрузки grunt + grunt-contrib-watch.

Answer 9

[Stac]

Artisteer ускоряеет (автоматизирует) дизайн и верстку.

Comments

[Alexander Tartmin]

Рубрика Вредные советы? =)

[Sergej]

Alexander Tartmin: Да еще какие =) Видимо товарищ получает прибыль с этого проекта, иначе кто же такое посоветует)
Мне это напомнило, как в свое время - советовали FrontPage =)) Ух там веселуха была.

[Alexander Tartmin]

Иван: Всё в чём есть кнопка "Сделать всё красиво" не заслуживают на существование. Только ручная работа, только хардкор =)

[Stac]

Коллеги, обратите, пожалуйста, внимание на вопрос: ... инструменты для ускорения ... и теги "верстка", "html".

В Artisteer (у меня была 3 и есть 4 верся), действительно есть кнопка "Предложить дизайн"... - один клик, если не устроит - потвторить.
И есть кнопка "Экспорт HTML" (в некоторых редакциях можно экспортировать в тему для Joomla!, Wordpress) - условно, второй клик.

На выходе: HTML, CSS, JS, картинки
Можно и контент "вбить" и опубликовать сайт по FTP, но это нам н нужно... а вот готовая верстка - прямо бери делай шаблоны для своего движка/CMS/шаблонизатора, это то, что УСКОРЯЕТ ВЕБ РАЗРАБОТКУ.

Качество верстки не устраивает?
См. вопрос. Он что про качество?
От версии к версии верстка упрощается и становится лучше (теперь и адаптивная), хотя все еще тяжеловата (раньше была куча таблиц, теперь куча div'ов). Не самая простая в поддержке.
Но может быть вам и не надо в каком-то проекте поддерживать верстку? Может такое быть? Может.

Ну а если надо - открываем свой любимый "блокнот" и правим.

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

Мое обоснование: сгенерированная верстка сложна в поддержке. Голову можно сломать в попытке разобраться что там и как.

Но вот выкинуть какие-то совсем не нужные куски HTML вполне себе можно.

И это инструмент под Windows, коорый, действительно, ускоряет процесс разработки. А если вы не дизайнер и в проекте его почему-то нет, то ускорение почти бесконечное :-)

[Sergej]

@Stac: Откройте облако adobe cc, осмотрите продукции для верстки и дизайна.
На тему качества - оно обязано быть всегда, иначе лучше выбрать другую профессию.
Если бы мой инвестор услышал от меня - что качество верстки .... - я бы потерял все финансирование да еще и на штрафы напоролся.

[Stac]

А у меня другая профессия, я не верстальщик.
Вы бы про облако Adode написали в ответ на вопрос автору, может будет полезно. А то комментарии тут по умолчанию скрыты.

Answer 10

[vinilzen]

Для фронтенд разработки - Prepros отличный инструмент для сборки всякого sass, less, slim, huml, compass и тд, с автоматическим рефрешем + Создает live preview на IP:port (Если не нужен php)
а для серверов лучше всего поднимать виртуалку с *nix,
редактор sublime c плагинами

Comments

[Валентин]

Как вам удается работать с виртуалкой? Я побывал- сайты еле шевелятся, особенно если это какой нибуть Друпал :)

[vinilzen]

Ubuntu 14 desktop на vmware player и потом на vmware workstation вертелась шустро все =), в настройках правда выделял виртуалке памяти 2gb и 2 ядра. На ноуте среднем достаточно - core i5, 8Gb ram и ssd128