После того как мы увидели как работают наши задачи, давайте сделаем нечто более эффективное и выполним всё сразу с помощью только одной задачи. Это гораздо лучше, чем отдельное выполнение 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 является рабочей лошадкой в мире Node. Если вам нужно выполнять задачи, включите Grunt в работу. Если вы из мира Rails, Grunt похож на Rake. Существует масса документации о Grunt, но в этом руководстве я остановлюсь на основах, которые помогут вам в работе с приложением.
Чтобы задать настройки для Grunt мы воспользуемся файлом Gruntfile.js. Это то место, где по умолчанию хранится конфигурация для запуска.