Командная строка в Веб-дизайне: Автоматизация с Grunt

() translation by (you can also view the original English article)

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

Скомпилировать код препроцессора в CSS
Добавить к CSS префиксы
Почистить CSS
Скомпилировать Jade в HTML
Объединить и Минифицировать JavaScript файлы

Даже если все эти команды состоят из нескольких слов, данный процесс быстро станет довольно утомительным, на протяжении создания сайта.

Вот где “Сборщик Проектов” приходит на помощь. Со сборщиком вы можете описать все необходимые вашему проекту задачи и их порядок выполнения в одном файле. Далее в этом файле вы можете создать кастомные команды, при запуске которых, единовременно, будут выполнятся все описанные задачи.

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

Обратите внимание: Данный туториал подразумевает, что вы прочитали предыдущие статьи из этого цикла. Если же нет, я рекомендую ознакомиться с ними прежде чем двигаться далее.

Два Основных Сборщика Проектов

Вообще-то на данный момент доступны несколько сборщиков проектов, однако для целей данного туториала мы сфокусируемся на самых популярных: Grunt и Gulp.

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

Создаём Проект - Пример

Мы сделаем проект, который отслеживает изменения и автоматически компилирует Stylus и Jade, также оптимизирует CSS и JavaScript. Для начала мы будем использовать Grunt, далее (в следующем туториале) взглянем на Gulp.

Чтобы приступить к работе, для примера нам необходимо создать проект с некоторыми файлами, которые будет обрабатывать наш сборщик. Создайте папку под названием “Grunt Project”, затем добавьте поддиректорию “build”, затем поддиректорию с именем “source”.

В папке “source” добавьте две новых поддиректории “stylus”, “jade”. Добавьте несколько файлов подходящего типа для каждой папки.

Файлы могут содержать любой код, какой вы захотите, просто для того, чтобы проверить, что процесс компиляции работает.

Подсказка: если вы не уверены, какой код добавить, попробуйте взять некоторые образцы кода с Codepen: песочницы с тэгом stylus, песочницы с тэгом jade.

К примеру:

Мы также применим знания, которые мы получили при изучении Bower в предыдущем уроке и добавим jQuery и Modernizr, которые затем соединим и минифицируем.

Запустите эти команды:

1	bower install jquery --save

1	bower install modernizr --save

Теперь сделайте копию всего проекта и переименуйте его его в “Gulp Project”.

Таким образом вы сможете выполнять шаги в этом туториле, используя Grunt в папке “Grunt Project”, а шаги для Gulp туториала в папке “Gulp Project”.

Начинаем Работать с Grunt

Устанавливаем Grunt CLI

Для запуска Grunt команд вы должны поставить Grunt CLI (интерфейс командной строки - command line interface). Установите его глобально командой:

1	[sudo] npm install -g grunt-cli

Настройте Проект для Grunt

Добавьте файл package.json

Каждому проекту, в котором используется Grunt, необходим файл “package.json” в корневой папке.

Мы разобрали, как создать “package.json”, используя команду npm init в предыдущем туториале - Использование сторонних библиотек. Если вы его не проходили, предлагаю вам вернуться и прочитать об этом.

Установка Библиотеки Grunt

Установите Grunt для вашего проекта и сохраните его, как девелопмент зависимость:

1	npm install grunt --save-dev

Добавьте Gruntfile

Также каждому проекту нужен, так называемый, Gruntfile в корневой директории.

Gruntfile - это файл под названием “Gruntfile.js”, или “Gruntfile.coffee”, если вы предпочитаете писать на CoffeeScript. В нашем случае мы будем работать с JavaScript, так что добавьте файл, называемый “Gruntfile.js”, в корень вашего проекта.

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

Добавьте следующий код в ваш Gruntfile.js:

1	module.exports = function(grunt) {
2
3	};

Установите Плагины Grunt

Вы помните, что при поиске необходимой библиотеки через npm или Bower, вам приходилось искать в нужном месте, чтобы найти версии способные работать с каждой системой.

Тоже самое относится к библиотекам используемым с Grunt. С Grunt'ом у вас будет доступ к широкому набору плагинов, которые в свою очередь являются просто обёртками для оригинальных npm библиотек. Эти плагины также устанавливаются посредством npm, но они разработаны специально для работы с Grunt.

К примеру, вместо npm библиотеки UglifyJS, для Grunt вам понадобится плагин - “grunt-contrib-uglify”.

Вы можете найти плагины для Grunt на http://gruntjs.com/plugins

Для нашего проекта мы установим следующие, шесть Grunt плагинов:

Каждый из них будет установлен в поддиректорию вашего проекта “node_modules” и сохранён, как девелопмент зависимость.

Запустите каждую команду, в вашем терминале, находясь при этом в папке “Grunt Project”:

1	npm install grunt-contrib-stylus --save-dev

1	npm install grunt-autoprefixer --save-dev

1	npm install grunt-contrib-cssmin --save-dev

1	npm install grunt-contrib-jade --save-dev

1	npm install grunt-contrib-uglify --save-dev

1	npm install grunt-contrib-watch --save-dev

Когда вы закончите, вы должны увидеть следующие папки в вашем “node_modules”:

Активируйте Плагины посредством Gruntfile

Теперь мы собираемся использовать grunt.loadNpmTasks метод для активации наших плагинов.

Внутри угловых скобок текущего Gruntfile'а, мы добавим шесть строчек, каждая из которых активирует grunt плагин:

module.exports = function(grunt) {

// Load grunt plugins.
 grunt.loadNpmTasks('grunt-contrib-stylus');
 grunt.loadNpmTasks('grunt-autoprefixer');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-jade');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-watch');

};

Данный код регистрирует имя каждого плагина, как grunt команду, позволяя нам использовать эту команду для запуска плагина, как таска. К примеру, мы будем использовать команду grunt stylus для запуска stylus таска, grunt autoprefixer для запуска таска по добавлению префиксов, и так далее.

Настроим Таски в Gruntfile

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

Делается это с помощью метода grunt.initConfig, который нужно добавить в Gruntfile, затем передавая посредством него информацию, которая и описывает, что делает каждый таск, когда он запущен.

Сначала, мы добавим метод grunt.initConfig, выше строчек, загружающих наши grunt плагины:

1	grunt.initConfig();

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

1	grunt.initConfig({
2
3	});

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

Для каждого плагина существует свой набор настроек, которые вы можете использовать, и вы можете узнать больше деталей о них на страницах, которые были перечислены в секции “Установите Плагины Grunt”.

Вы также можете прочитать подробную информацию о конфигурации Grunt тасков, здесь: http://gruntjs.com/configuring-tasks

Пример Конфигурации Grunt Таска: Stylus

Мы начнём с добавления конфигурации для нашего stylus таска.

Между недавно добавленными, фигурными скобками, на том месте где вы поставили пустую строку, добавьте следующий код:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Теперь ваш Gruntfile должен выглядеть следующим образом:

module.exports = function(grunt) {

  grunt.initConfig({

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

  });

  // Load grunt plugins.
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
};

Подробнее разберём код, который только что добавили. Мы не будем разбирать каждый таск, но рассмотрев один из них, вы должны понять синтаксис используемый при конфигурации Grunt таска.

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

Первое что мы сделали, добавили запись в наш конфиг, для нашего stylus таска, с кодом:

1	stylus: {
2
3	},

Внутри мы добавили запись compile, которая будет контролировать то что случится во время компиляции:

    stylus: {
      compile: {

      }
    },

Затем, уже внутри таска complie мы создали место для описания опций - options.

Мы использовали это место для того, чтобы добавить туда compress опцию, со значением false, так как мы займёмся оптимизацией позже.

Также мы зададим значение опции paths - [’source/stylus’], чтобы Stylus если найдёт где-то директиву @import во время компиляции, искал файлы в папке “source/stylus”:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        }
      }
    },

Затем после options мы добавим files, чтобы указать итоговую директорию и имена файлов, также как и директорию с исходниками и их имена.

Мы указали папку в которую будут добавлены файлы после компиляции, как ’build/style.css’, а файл, который нужно компилировать ’source/stylus/main.styl’.

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Теперь, откройте терминал в корневой папке и запустите команду:

1	grunt stylus

Посмотрите в папке “build” и там вы должны увидеть скомпилированный “style.css” файл.

Настраиваем Оставшиеся Таски

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

Autoprefixer

Добавьте этот код:

    autoprefixer: {
      compile: {
        files: {
          'build/style.css': 'build/style.css'
        },
      },
    },

Запустите autoprefixer таск с помощью:

1	grunt autoprefixer

Теперь если вы откроете файл “build/style.css”, вы увидите, что там были добавлены необходимые префиксы.

cssmin

Добавьте этот код:

    cssmin: {
      clean: {
        files: {
          'build/style.css': 'build/style.css'
        }
      }
    },

Запустите cssmin таск с помощью:

1	grunt cssmin

Если посмотрите ещё раз на “build/style.css”, увидите, что файл был почищен и оптимизирован.

Jade

Добавьте этот код:

    jade: {
      compile: {
        files: [{
          expand: true,
          cwd: "source/jade",
          src: "*.jade",
          dest: "build",
          ext: ".html"
        }]
      }
    },

Запустите jade таск с помощью:

1	grunt jade

Посмотрите внутри папки “build”, там вы увидите HTML файлы, которые соответствуют каждому jade файлу в папке “source/jade”.

Uglify

Добавьте этот код:

    uglify: {
      bower_js_files: {
        files: {
          'build/output.min.js': [
            'bower_components/jquery/dist/jquery.js',
            'bower_components/modernizr/modernizr.js'
          ]
        }
      }
    },

В примере вы видите, что мы ссылаемся на местоположение, установленных ранее, компонентов Bower.

Мы возьмём полные, не минифицированные версии jQuery и Modernizr из папки “bower_components”, затем объединим и минифицируем их в новый файл под названием “output.min.js”. Это отличный подход для отправки скриптов под управлением Bower, до браузера пользователя.

Запустите uglify таск с помощью:

1	grunt uglify

Вы увидите новый файл “output.min.js” в папке “build”.

Добавьте “watch” Таск

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

В Grunt один таск может запускать другой. Теперь мы настроим watch таск, который будет отслеживать изменения для определённых файлов, и автоматически запускать для нас stylus и jade таски.

Добавьте этот код:

    watch: {
      stylus: {
        files: [ 'source/stylus/*.styl' ],
        tasks: ['stylus', 'autoprefixer', 'cssmin']
      },
      jade: {
        files: [ 'source/jade/*.jade' ],
        tasks: ['jade']
      }
    },

В начале мы создали наш watch таск, внутри него мы настроили stylus и jade.

Опция files,в каждом таске, указывает в каких файлах отслеживать наличие изменений. Опция tasks в свою очередь даёт знать Grunt'у какие таски должны быть запущены, если в данных файлах были произведены изменения.

Для stylus, мы смотрим за всеми “.styl” файлами в папке “source/stylus”, и когда появятся изменения, будут запущены stylus, autoprefixer и cssmin таски в таком же порядке.

Так что теперь, когда запущен таск watch, всё, что вам нужно сделать это сохранить изменения в Stylus файле и компиляция, автоматическое добавление префиксом, оптимизация CSS, будут сделаны за вас, новый CSS файл будет записан в папку “build”.

Также с jade, мы настроили отслеживание для всех “.jade” файлов в папке “source/jade” и каждый раз после того как он будет сохранён, таск jade буедт автоматически запущен и соответствующие HTML файлы скомпилируются в папку “build” .

Запустите watch таск с помощью:

1	grunt watch

Остановить watch можно двумя способами:

Закрыть терминал
Нажать CTRL + C

Добавьте“default” Таск

На этом этапе вы скорее всего думаете, что же с JavaScript uglify таском?

Причина по которой мы не добавили его в таск watch в том, что вы не хотите делать изменения в jQuery и Modernizr файлах, за которые собственно и отвечает таск uglify. Поэтому, так как watch таск реагирует на изменения в файлах, он никогда не запустит обработку JavaScript.

Вместо этого мы будем использовать таск default, который может быть установлен в нашем Gruntfile. Этот таск будет запущен в том случае если после команды grunt нет никаких аргументов.

После последней строчки grunt.loadNpmTasks, но до закрывающей };, добавьте:

1	grunt.registerTask('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']);

Теперь таск default будет запускать stylus, autoprefixer, cssmin, jade, после чего uglify.

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

В Следующем Туториале

В следующем туториале мы повторим процесс, которому только что научились, но на этот раз используя Gulp для решения тех же задач вместо Grunt.