После того как мы увидели как работают наши задачи, давайте сделаем нечто более эффективное и выполним всё сразу с помощью только одной задачи. Это гораздо лучше, чем отдельное выполнение grunt uglify, grunt jshint и т. д.
Для этого примера мы воспользуемся Less. Чтобы сделать то же самое для Sass вы можете использовать пакет grunt-contrib-compass. Вот наши настройки для компиляции Less-файлов. Как и в примере с минимизацией JavaScrip в параметрах определяются исходные и выходные файлы.
Подобно минимизации JS-файлов настройки для такой задачи довольно простые. Мы уже это проходили, так что создайте такую конфигурацию.
// Gruntfile.js
grunt.initConfig({
...
// параметры cssmin для минимизации CSS-файлов
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/css/style.min.css': 'src/css/style.css'
}
}
}
});
Будем использовать тот же формат. Вызовем пакет uglify, настроим его и укажем, какие файлы задействовать и создать.
Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?
Во время процесса веб-разработки возникает много задач, которые нам требуется периодически выполнять вроде минимизации JavaScript и CSS-файлов, модульного тестирования, проверки файлов на наличие ошибок, компиляции препроцессорных файлов (Less, Sass) в CSS и многое другое. Grunt предназначен для запуска задач, а значит повторяющиеся задачи, с которыми мы имеем дело каждый день, становятся автоматизированы.
Скажем, мы хотим, чтобы Grunt работал в процессе разработки, а затем, когда мы перейдём к рабочему сайту, нам потребуются другие задачи для выполнения. Мы можем определить несколько задач внутри каждой конфигурации. Например:
Задача watch будет выполняться каждый раз при изменении и сохранении файла. Всё, что нам надо сделать, это следить за определёнными файлами и сказать что делать, когда эти файлы изменятся. Давайте отойдём от базовой конфигурации build, которую мы использовали ранее и сделаем разделение на стили и скрипты. Мы делаем так потому, что хотим задать разные задачи для каждого типа файлов.
Чтобы задать настройки для Grunt мы воспользуемся файлом Gruntfile.js. Это то место, где по умолчанию хранится конфигурация для запуска.
Grunt является рабочей лошадкой в мире Node. Если вам нужно выполнять задачи, включите Grunt в работу. Если вы из мира Rails, Grunt похож на Rake. Существует масса документации о Grunt, но в этом руководстве я остановлюсь на основах, которые помогут вам в работе с приложением.