Создайте свой первый стартовый комплект проекта с помощью Grunt и Bower

Создайте свой первый стартовый комплект проекта с помощью Grunt и Bower

У большинства из нас есть собственный процесс, через который мы проходим при запуске нового веб-проекта; настройка файловой структуры, загрузка фреймворков, знаете, основы. Затем, как только мы начинаем работать, мы обнаруживаем, что повторяем определенные задачи снова и снова, такие как минимизация нашего CSS или объединение файлов JavaScript. Может потребоваться некоторое время, чтобы сгладить наш рабочий процесс, чтобы каждый раз получать именно то, что мы хотим. Но есть более быстрый и простой способ настроить новый проект, и им можно поделиться с другими членами команды разработчиков, чтобы обеспечить согласованность. Сегодня мы собираемся настроить новый стартовый комплект проекта, используя два популярных инструмента: Grunt и Bower. Как только вы освоитесь с такой настройкой, вы, возможно, никогда не вернетесь к своим старым привычкам.

Что такое Грунт?

Grunt — это средство запуска задач на JavaScript, которое обрабатывает некоторые из тех повторяющихся действий, которые вы выполняете на протяжении всего проекта. Его просто настроить (как вы увидите), после чего его почти не сложно использовать.

Что такое Бауэр?

Bower — менеджер пакетов для веб-приложений. Хотите добавить последнюю версию Bootstrap в свой проект? Конечно, вы можете зайти на веб-сайт Bootstrap и загрузить последнюю версию, добавить ее в свою файловую структуру и перейти оттуда. Но если вы используете несколько пакетов в своем проекте, это может занять довольно много времени, особенно если вы используете одни и те же пакеты снова и снова. Просто настройте файл JSON, запустите Bower, и он все сделает за вас. Мы даже станем супер-ленивыми и позволим Grunt сделать это за нас!

Прежде чем мы начнем

Во-первых, вам нужно убедиться, что Node установлен на вашем компьютере. Посетите nodejs.org и следуйте инструкциям. Мы будем использовать npm (менеджер пакетов узлов), чтобы добавить необходимые пакеты в наш стартовый набор.

Объявление зависимостей — Grunt

В корневом каталоге вашего проекта создайте файл с именем «package.json». Здесь мы объявим каждый пакет Node, который нам понадобится для проекта. Конечно, вы можете вручную установить каждый пакет, но, поскольку вы, вероятно, захотите использовать множество пакетов, это простой способ сохранить согласованность. Файл «package.json» должен выглядеть примерно так…

{ 
     “name”: “project_starter”, 
     “version”: “1.0.0", 
     “description”: “Project Start Kit”, 
     “main”: “Gruntfile.js”, 
     “dependencies”: {}, 
     “devDependencies”: { 
          “grunt”: “~0.4.5", 
          “grunt-bower-task” : “latest”, 
          “grunt-contrib-copy” : “latest”, 
          “grunt-contrib-cssmin”: “latest”, 
          “grunt-contrib-imagemin”: “latest”, 
          “grunt-contrib-jshint”: “latest”, 
          “grunt-contrib-sass”: “latest”, 
          “grunt-contrib-uglify”: “latest”, 
          “grunt-contrib-watch”: “latest”, 
          “grunt-rsync”: “latest”, 
          “load-grunt-tasks”: “latest” 
     }
}

Этот файл объявляет имя, версию и описание нашего проекта, а также устанавливает зависимости, на которые опирается наш проект. Возможно, самая важная строка в этом файле — «main»: «Gruntfile.js». Это сообщает Node, что все наши задачи, связанные с Grunt, будут объявлены в файле с именем «Gruntfile.js». Мы вернемся к этому через минуту. Пакеты (Grunt и плагины Grunt), которые я включил выше, часто используются в проектах и ​​включают в себя:

Grunt — наш менеджер задач JavaScript
Bower — наш менеджер пакетов
Copy — копирует и перемещает файлы из одного каталога в другой в вашем проекте
CSSMin — уменьшает ваши файлы CSS
ImageMin — сжимает и оптимизирует изображений в вашем проекте
JSHint — проверяет код JavaScript на наличие ошибок
Sass — мой предпочтительный препроцессор CSS
Uglify — объединяет файлы JavaScript вашего проекта
Наблюдение — отслеживает изменения файлов вашего проекта (аналогично Compass)
Rsync — развертывает ваш проект в различных местах (dev, prod и т. д.)
Загрузить задачи — загружает задачи, связанные с вашими плагинами Grunt.

Объявление зависимостей — Bower

Настройка пакетов Bower, которые мы хотим установить, будет очень похожа на то, что мы только что сделали с Grunt. Итак, теперь давайте создадим файл с именем «bower.json», который должен выглядеть примерно так…

{ 
     “name”: “project_starter”, 
     “version”: “1.0.0", 
     “dependencies”: { 
          “bootstrap-sass-official”: “latest”, 
          “fontawesome”: “latest” 
     }
}

Этот файл сообщает Bower, какие именно пакеты нам нужны и какие версии. Если вам нужна конкретная версия, это можно объявить. В противном случае просто используйте «latest», чтобы получить самую последнюю версию. Пакеты Bower, которые я здесь использую, это…

Bootstrap Sass — официальная Sass-версия Twitter Bootstrap
FontAwesome — набор супер-крутых иконочных шрифтов в стиле Sass

Последняя настройка, которую нам нужно сделать для Bower, — указать, где именно мы хотим установить наши зависимости. Для этого создайте файл с именем «.bowerrc», который должен выглядеть так…

{ 
     “directory”: “assets/”
}

Этот файл указывает Bower установить все загруженные пакеты в каталог с именем «assets». Это только для пакетов Bower, которые вы можете загрузить позже, после запуска проекта. Позже мы объявим этот же каталог в нашем файле Grunt, чтобы Grunt мог сообщить Bower, куда поместить первоначально загруженные пакеты. Просто, верно?

Регистрация задач

Теперь наступает самая важная часть работы с Grunt; регистрация задач! Нам нужно создать файл с именем «Gruntfile.js», в котором будут храниться все задачи, которые Grunt будет выполнять за нас. Ваш Gruntfile должен выглядеть примерно так…

‘use strict’;
module.exports = function(grunt) { 
     // load all grunt tasks matching the `grunt-*` pattern
     require(‘load-grunt-tasks’)(grunt); 
     
     grunt.initConfig({ 
          // get the configuration info from package.json ---- 
          // this way we can use things like name and version (pkg.name) 
     pkg: grunt.file.readJSON(‘package.json’), 
     
     bower: { 
          install: { 
               options: { 
                    targetDir: ‘./assets’ 
               } 
          } 
     }, 
     copy: { 
          main: { 
               files: [ // move the fontawesome font files {             
                    expand: true, 
                    flatten: true, 
                    src: [‘assets/fontawesome/fonts/**’], 
                    dest: ‘dist/fonts/’, 
                    filter: ‘isFile’ 
               }, ], 
          }, 
     }, 
     // watch for changes and trigger sass, jshint, and uglify
     watch: { 
          sass: { 
              files: [‘assets/styles/**/*.{scss,sass}’], 
              tasks: [‘sass’, ‘cssmin’] 
          }, 
          js: { 
               files: ‘<%= jshint.all %>’, 
               tasks: [‘jshint’, ‘uglify’] 
          }, 
          images: { 
               files: [‘assets/img/*.{png,jpg,gif}’], 
               tasks: [‘imagemin’] 
          }, 
          files: ‘**/**.php’, 
     }, 
     // sass 
     sass: { 
          dist: { 
               options: { 
                    style: ‘expanded’, 
               }, 
               files: { 
                    ‘dist/styles/style.css’: ‘assets/styles/style.scss’ 
               } 
          } 
     }, 
     // css minify 
     cssmin: { 
          build: { 
               files: { 
                    ‘dist/styles/style.min.css’: ‘dist/styles/style.css’ 
               } 
          } 
     }, 
     
     // javascript linting with jshint 
     jshint: { 
          options: { 
               jshintrc: ‘.jshintrc’, 
               “force”: true 
          }, 
          all: [ ‘Gruntfile.js’, ‘assets/js/**/*.js’ ] 
     }, 
     //uglify to concat & minify 
     uglify: { 
          main: { 
               options: { 
                   banner: ‘/*\n <%= pkg.name %> <%= grunt.template.today(“yyyy-mm-dd”) %> \n*/\n’ 
                   }, 
                   files: { 
                        ‘dist/js/main.min.js’: [ ‘assets/js/**/*.js’, ‘assets/bootstrap-sass-official/assets/javascripts/bootstrap.js’ ] 
                   } 
               } 
     }, 
    // image optimization 
    imagemin: { 
         dist: { 
             options: { 
                  optimizationLevel: 7, 
                  progressive: true, 
                  interlaced: true 
             }, 
             files: [{ 
                 expand: true, 
                 cwd: ‘assets/img/’, 
                 src: [‘**/*.{png,jpg,gif}’], 
                 dest: ‘dist/img/’ 
             }] 
         } 
     }, \
     // deploy via rsync 
     deploy: { 
          options: { 
               src: “./”, 
               args: [“—verbose”], 
               exclude: [‘.git*’, ‘node_modules’, ‘.sass-cache’, ‘Gruntfile.js’, ‘package.json’, ‘.DS_Store’, ‘README.md’, ‘config.rb’, ‘.jshintrc’, ‘bower.json’, ‘.bowerrc’], 
               recursive: true, 
               syncDestIgnoreExcl: true 
           }, 
           staging: { 
                options: { 
                     dest: “~/path/to/site”, 
                     host: “[email protected]” 
                } 
           }, 
           production: { 
                options: { 
                     dest: “~/path/to/site”, 
                     host: “[email protected]” 
                } 
           } 
     } 
}); 
// rename tasks 
grunt.renameTask(‘rsync’, ‘deploy’); 
// register tasks 
grunt.registerTask(‘start’, [‘bower’, ‘copy’]); grunt.registerTask(‘devel’, [‘sass’, ‘cssmin’, ‘uglify’, ‘imagemin’, 'jshint', ‘watch’]); };

Фу! В этом файле происходит очень много всего, но это не так безумно, как вы думаете. Давайте рассмотрим каждый раздел. Первая часть загружает все задачи Grunt, связанные с установленными плагинами Grunt. В разделе grunt.initConfig мы устанавливаем некоторые свойства для каждого из подключаемых модулей Grunt.

Bower — опять же, мы сообщаем Grunt, где должны быть размещены скачанные Bower пакеты. В данном случае он находится в папке с именем «assets» в корне каталога нашего проекта.

Копировать — на самом деле мы используем это только для перемещения файлов шрифтов FontAwesome из загруженного каталога пакета Bower в нашу папку «dist», которая станет частью окончательного проекта. (Я предпочитаю иметь папку «assets» для исходных файлов и папку «dist», которая будет фактически использоваться на сайте. «Dist» содержит минимизированный CSS, сжатые изображения и т. д., где «активы» содержат исходные версии)

Наблюдение — одна из самых важных задач, которую выполняет Grunt, она будет отслеживать все объявленные файлы и запускать соответствующие задачи. Например, мы будем запускать «sass» и «cssmin» всякий раз, когда будут какие-либо изменения в наших CSS-файлах Sass. Мы также настроили Grunt отслеживать изменения в файлах JavaScript, затем запускать задачи «jshint» и «uglify», а также следить за изменениями или добавлением любые файлы изображений для запуска «imagemin» для сжатия изображений. Вы можете видеть, что Grunt позволит нам запускать любое количество задач всякий раз, когда «watch» замечает объявленные изменения.

Sass — мы объявили, где мы хотим разместить скомпилированный файл CSS в нашем проекте, и что мы хотим, чтобы Sass компилировался в «расширенном» формате.

CSSMin — мы объявили наш исходный файл CSS (скомпилированный файл Sass) и место, куда мы хотим поместить уменьшенную версию нашего файла CSS (папка «dist»).

JSHint — определяет, для каких файлов JavaScript мы хотим запустить задачу JSHint.

Uglify — мы объявили, какие файлы JavaScript мы хотим объединить вместе и куда следует поместить экспортированный файл. Мы также добавили «баннер» в наш окончательный файл, который указывает имя проекта и дату его создания (в целях отладки).

ImageMin — мы установили, в каких папках будут находиться целевые изображения, какие типы файлов изображений мы хотим оптимизировать и где следует размещать оптимизированные версии изображений.

Rsync — мы настроили стандартные параметры, для которых папки будут развернуты на наших различных сайтах (промежуточных и рабочих), а также явно объявили, какие файлы следует игнорировать. Различные места развертывания были созданы и помечены как «промежуточные» и «рабочие». У нас может быть перечислено множество сайтов развертывания, которые можно активировать позже с помощью простой команды (подробнее об этом далее).

В разделе ниже вы можете увидеть, что я использовал функцию Grunt под названием renameTask, чтобы изменить задачу «rsync» на «deploy». Это мой личный выбор, потому что было легче запомнить название задачи «развертывание», чем «rsync». Это также служит примером того, как переименовать любую другую задачу Grunt во что угодно. Например, может быть, вы хотите добавить префикс компании к своим задачам Grunt для стартовых проектов масштаба предприятия. Выбор остается за вами!

Наконец, мы зарегистрировали две пользовательские задачи Grunt; «начать» и «разработать». Подробнее об этом в следующем разделе.

Запуск нового проекта

Теперь, когда у нас есть все настройки в наших файлах Project Starter Kit, мы готовы приступить к работе. Когда все настроено в его манере, вся ваша команда разработчиков может легко начать работу с одним и тем же набором файлов при работе над веб-проектом. В командной строке выполните следующие команды, чтобы приступить к работе….

npm install — устанавливает необходимые пакеты для проекта (package.json)

запуск Grunt — это будет первая задача Grunt, которую мы запускаем при запуске нового проекта (и ее нужно запустить только один раз). Вы можете видеть, что мы установили «bower» и «copy» в качестве связанных задач для нашей пользовательской задачи «start». Когда мы запускаем «grunt start» из командной строки, Grunt запустит Bower, чтобы загрузить необходимые пакеты, и Copy, чтобы переместить файлы шрифтов FontAwesome в соответствующую папку.

Grunt devel — это задача, которую мы будем использовать каждый раз, когда садимся за работу над проектом. Мы установили Sass, CSSMin, Uglify, JSHint, ImageMin и Watch в качестве связанных задач. Поэтому всякий раз, когда вы начинаете работать над своим проектом, вы набираете «grunt devel» в командной строке и вуаля! Grunt позаботится обо всем остальном за вас!

И так до тех пор, пока вы не будете готовы к развертыванию!

Развертывание вашего проекта

Когда вы будете готовы развернуть свой веб-проект, вы сможете сделать это с помощью одной простой команды:

grunt развернуть [назначение].

Поскольку мы настроили «staging» и «production», вы можете запустить «staging grunt deploy» или «runt deploy production».

Резюме

Это только верхушка айсберга, когда речь идет о Grunt и автоматизации многих задач разработки, которые мы выполняем ежедневно. Но, как я уже говорил ранее, как только вы начинаете использовать Grunt… трудно вернуться назад. Удачного кодирования!