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

18.01.2018

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

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

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

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

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

Точно такую же настройку делаем для bower командой “bower init”. Почти такая же ситуация как и с настройкой 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. – Bi3X

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