Умный front-end или наконец-то я решился! Часть 3. Сборка проекта bower, grunt, jquery, bootstrap на Windows.

Всем доброго времени суток!

Сборка проекта bower, grunt, jquery, bootstrap на Windows

Задачи поставлены, основные компоненты установлены, приступаем к сборке проекта.

Когда я только познавал bower, grunt, npm и т.д., мне очень сильно помог пост моего соотечественника быстрый старт bower + grunt. Выражаю благодарность!

Создаем и заходим в папку нашего проекта. Создаем основной файл конфигурации для npm командой “npm init” и отвечаем на задаваемые вопросы.

Сборка проекта bower, grunt, jquery, bootstrap на Windows.Вопросы чисто информационные, характеризующие ваш. Можно пропускать просто нажимая Enter. В итоге в корне проекта должен появиться файл package.json.

Точно такую же настройку делаем для bower командой “bower init”. Сборка проекта bower, grunt, jquery, bootstrap на Windows.Почти такая же ситуация как и с настройкой npm. И у нас в корне появляется файл bower.json. Информация заполнена, приступим к установке нужных нам пакетов. Установим jquery, bootstrap, html5shiv и respond.

Опция –save добавляет пакет в файл bower.json в параметр dependencies, потом мы можем обновлять эти пакеты с помощью команды “bower update”. Удалить можно пакет командой “bower uninstall <имя пакета>”. В корне проекта появилась папка bower_components со всеми нашими пакетами.

Далее мы устанавливаем локально сам grunt и нужные нам пакеты.

В принципе очень похожая ситуация, но тут опция –save-dev, которая весь список пакетов сохраняет в файл package.json в параметр devDependencies. Мы точно так же можем обновлять пакеты и удалять их командами “npm update” и “npm uninstall <имя пакета>”.

В итоге у нас получилось 2 файла:

Как один из вариантов, что бы не отвечать на непонятные вопросы, это первоначально вручную создать эти два файла в корне и потом из PowerShell запустить “npm install” и “bower install”.

Теперь перейдем к самому интересному, там где будет происходить вся “магия” сборки. Создаем файл Gruntfile.js.

Если среди читателей есть люди с опытом в данной сфере, прошу сильно не хаить, это мой первый опыт.

Разбираем.

grunt.loadNpmTasks() – подгружает все наши установленные пакеты.
grunt.registerTask(‘default’, [‘clean’,’less’,’concat’,’copy’,’uglify’]) – задаем стандартную задачу default, в которой мы указываем какие именно задачи будут выполняться.

Ну и сам задачи:

less – по названию легко догадаться что это компиляция кода less в css. В настройках мы можем сразу такие параметры как compress и на выходе мы получим минифицированый css код.

clean - запускает процесс для очистки указанных нами файлов. В моем случае это удаление js и css перед компиляцией новых.

concat – объединяет файлы одного типа в один.

copy – копирует нужные нам файлы из дистрибутивов в нужную нам папку.

uglife – сжимает наш js код.

Каждую задачу можно разбить на подзадачи, если взять в моем примере задачу clean, то у нее есть 2 подзадачи, это js и css. Задачу можно запускать целиком либо отдельно, указав clean:css. Также мы можем создать другие задачи, комбинировать их и т.д. например:

Выполняет тоже что и в моем примере, но при данном варианте, мы можем каждую из задач запускать отдельно. Для запуска стандартного defaul в командной строке достаточно написать grunt, а если мы напишем grunt onlycss, то запуститься задача onlycss и выполниться только очистка всех компилированных css файлов.

На самом деле, таких “плагинов” для grunt очень много, например сжатие картинок, генерация спрайтов, запуск мини сервера для просмотра страниц, в примере demon.of.by есть задача watch которая отслеживает изменение файлов и сразу компилирует их. Так что есть куда двигаться.

Всем удачи!

Умный front-end или наконец-то я решился! Часть 3. Сборка проекта bower, grunt, jquery, bootstrap на Windows.: 7 комментариев

  1. Добрый день!
    Спасибо вам огромное очень толково и подробно, как раз для новичков вроде меня. Перерыл кучу статей везде что-то пропущено, а тут по шагам и очень подробно, спасибо!

  2. Так все таки не понял смысл всей этой затеи. Меньше времени уходит что бы скачать все вручную. И нет слова о WordPress. И какая нужна команда что бы выполнить Gruntfile.js?

    1. Ну я скажу так, что когда разрабатываешь серьезный проект где css тысячи и тысячи строк + адаптация и м.д. очень легко запутаться в дальнейшем, тот же less помогает разбить все по отдельным файлам, а в основном файле потом просто указать:
      @import "less/fonts.less";
      @import "less/global.less";
      @import "less/header.less";
      @import "less/footer.less";

      Во-вторых минимизация css и js файлов на лету. Приводить примеров можно очень много.
      Например для grunt есть плагин grunt-html-build, с помощью него можно создать отдельно шаблон шапки и футера, а потом они подключаются к странице и генерируется уже готовый файл (только не говорите что никогда небыло ситуации, что приходилось править 20-30 файлов т.к. пришлось что-то переделывать), согласитесь очень полезная вещь.
      На счет запуска Gruntfile.js, надо после всех установок запустить в текущей директории команду grunt, ну а также я писал в статье “в примере demon.of.by есть задача watch которая отслеживает изменение файлов и сразу компилирует их”

  3. Спасибо за статьи. Продвинули меня в понимании этой темы. Конечно, это не единственное место, где я изучаю эти инструменты, но написано очень хорошо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">