Подарок всем front-end разработчикам. grunt(Jade+Stylus+Watch)



    Здравствуйте Уважаемые хабра-пользователи!

    Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!

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

    Вопрос скорее к верстальщикам: Вам не надоело постоянно делать одно и то же?

    Я опишу стандартный проект, возможно немного в негативных красках…
    Средний проект у меня это 5-7 страниц в psd, которые нужно сверстать за 2-3 дня, при том что не должно пострадать качество. В эти сроки включены все правки от заказчика до его полной эйфории.

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

    Пойдет он о таком инструменте как grunt.js. Все слышали, но все боятся. Давайте сделаем проще, а если точнее — я сделаю проще Вам.

    В конце статьи есть ссылка на github с проектом, остальное, что я буду рассказывать, касается более философии и немного тех. части.

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

    Я предлагаю уйти от этого, и не страдать фигней утруждать себя.

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

    Данный инструмент предоставляет след. возможности:
    1. Препроцессор stylus + nib(автоматически добавляет вендорные свойства для таких свойств как border-radius и др.)
    2. Препроцессор Jade(отсутствие закрывающих тегов в HTML, подключение внешних блоков)
    3. Watch+LiveReload(компилирует файлы из стилуса и джэйда в css и html. Автоматическое обновление страницы при изменении файлов)
    4. Imagemin — минификатор изображений(ужимает без потери качества)
    5. Connect — Ваша верстка будет запущена на сервере(localhost:3000)


    Как видите возможностей хватает, но если Вам мало, а изучать grunt нет никакого желания или возможности, отпишите мне в личку, я совершенно бесплатно его модифицирую под Вас, благо это минутное дело.

    Инструкцию по установке Вы сможите найти на странице github. Задавайте вопросы в коментах, предложения, недостатки, ошибки.

    Вот ссылка на проект: fewatcher

    P.S. У Вас должен быть установлен nodeJS + npm. Установка зависит от Вашей системы, информаци по этому в интернете с избытком.
    P.P.S Я желаю Вам только удачи! Надеюсь что вопросов будет мало, а пожеланий по доработке будет много!

    Полезные ссылки:
    http://gruntjs.com/
    http://jade-lang.com/
    http://learnboost.github.io/stylus/
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 21

      +5
      Извините, но причем тут картинка из БК?
        0
        Ну лично мне она напомнила меня, уставшего и изможденного от рутины окружающей нас среды.
        • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Не вижу ни каких серьезных заявлений. Установка займет 5-10 минут, попробуйте, и Вы поймете что необходимости в изображених тут нет. Это же не азбука для дошколят, основной целью является не показать цветные картинки, и не объяснить все по пунктам.

            Основная цель это показать быстрый результат пользователю, который ни разу не раотал с этой технологией, смотивировать и подтолкнуть к изучению.
            • НЛО прилетело и опубликовало эту надпись здесь
            +1
            А почему код не на гитхабе? Вместо «модифицирую для вас», может быть, pull request будет логичнее?
              0
              Потому что это скорее моя сборка, которую я повседневно использую. Я не планировал переходить на другие препроцессоры и пр.
                0
                Я думаю будет возможен вариант с несколькими ветками.
                +8
                Секунду, а разве внутри гитхаба не сидят волшебные гномы, который модифицируют чужой код для нас? T_T
                +3
                На самом деле Grunt — это очень удобный task runner, который можно использовать для любых повторяющихся задач. Grunt имеет огромную экосистему плагинов и для начала работы необходимо создать лишь Gruntfile.

                При использование шаблонных проект для Front-End'a рекомендую посмотреть в сторону yeoman, который был создан для генерации шаблонов. Yeoman генерирует шаблонный проект на основе Grunt, Bower и Yo. Он позволит создать проект с использованием одного из существующих генераторов или создать собственный генератор.

                Yeoman создаст все необходимые задачи для запуска тестов, сборки проекта, LiveReload, различные минификации и подготовка проекта к deploy.

                Одни из моих любимых генераторов для Yeoman:
                webapp — генерирует шаблон для Front-End приложения на основе SASS, Autoprefix, LiveReload, Mocha
                mobile — генерирует шаблон для мобильного приложение на основе адаптивного framework'a на выбор и других полезных инструментов
                  –3
                  +1
                  то что нам 'дарит' автор, на yeoman'е собирается за 10-15 мин по мануалу.
                  +1
                  Напомнило презентацию Олега Громова.
                  bit.ly/1heTpMz
                    –2
                    хм, вроде внимательно прочитал, но так и не понял чем это отличается от Компаса, livePage (плагин хрома) и Sublime Text c Emet-ом.
                    Чем Imagemin отличается от 4ёх кликов в фотошопе?
                      +4
                      nib стоило бы заменить на autoprefixer.
                        +2
                        Статья ни о чём. Всё самое интересное осталось за кадром.
                        в качестве небольшого подарка я подготовил небольшой инструмент

                        Такие инструменты собираются пачками с помощью yeoman или grunt-init. Расскажите лучше о преимуществах таск раннеров и сборщиков проектов.
                          +1
                          У меня на готове серия статей по grunt.js, require.js, backbone.js.
                          Наберитесь терпения, попробую написать более качественно и охватить макс. кол-во плюшек
                          +1
                          github.com/TessaHarmon/brunch-jade-stylus

                          Бранч с Джейдом и Стайлусом. Минификатор и прочее можно накатить из плагинов: brunch.io/plugins.html
                          Лично мне понравился больше, чем Грант.
                            0
                            Вообще не совсем понятно на кого рассчитана данная статья и инструментарий, который в ней представлен. Если на разработчиков, которые уже знакомы и работают с gruntjs, то, как мне кажется, у каждого из них имеется подобная сборка для облегчения рутинных задач. Если на людей, которые не знакомы с gruntjs, то не помешало хотя бы пару вводных статей по данному инструменту. Отличный пример: frontender.info/grunt-is-not-weird-and-hard/ перевод статьи Криса Койера 24ways.org/2013/grunt-is-not-weird-and-hard/
                              0
                              Относительно недавно собрал аналогичную штуку для yeoman github.com/DKunin/generator-barry — правда пока без imagemin ))) Но за этим дело не станет)
                                0
                                Jade — хорош только для макета, не для стилёвки.
                                Watch, LiveReload, Imagemin, Connect — всё это плагины и команда Грунта.

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                Самое читаемое