Что такое Грунт?
Grunt.js — это средство запуска задач, которое автоматизирует повторяющиеся задачи, такие как:
- Префикс правил CSS
- Компиляция файлов SASS в CSS
- Минификация файлов JS/CSS
- Объединение файлов
- И многое другое…
А как насчет глотка?
Gulp также является средством запуска задач и, по сути, делает то же самое, что и Grunt. В настоящее время моя команда использует Grunt.
В этой статье мы объединим файлы JS/CSS.
Установка Гранта
- Установите Node.js и npm: https://www.npmjs.com/get-npm
- Установите grunt-cli глобально:
$ npm install grunt-cli -g
3. Создайте файл package.json:
$ npm init
4. Установите grunt локально:
$ npm install grunt --save-dev
5. Создайте Gruntfile.js
$ touch Gruntfile.js
Что делает этот Gruntfile.js?
It:
- Настраивает наши задачи и сообщает плагинам, где найти определенные файлы;
- Загрузить плагины в файл (например, uglify);
- Зарегистрируйте задачи, которые необходимо выполнить.
Добавьте следующий код в свой Grunfile.js:
При запуске grunt этот файл будет прочитан в следующем порядке:
- Конфигурация: с помощью grunt.InitConfig() вы можете ставить задачи и настраивать их отдельно;
- Загрузка: с помощью grunt.loadNpmTasks() вы можете загрузить плагины;
- Регистрация задач: с помощью grunt.registerTask() вы можете вызывать задачи, заданные в initConfig(), блоками или по отдельности.
Введите в терминале:
$ grunt run $ grunt sleep $ grunt all
Он вернет то, что установлено в соответствующем grunt.registerTask().
Установка плагинов
Репозиторий плагинов Grunt находится здесь: www.gruntjs.com/plugin.
Ставим вот этот: https://github.com/gruntjs/grunt-contrib-concat. Этот плагин объединяет файлы. Например: все файлы JS в папке будут объединены в один файл JS.
Для установки введите команду:
$ npm install grunt-contrib-concat --save-dev
Объединение файлов JS
Добавьте папку /js и три файла: one.js, two.js и three.js. Поместите в них любой JS-код.
/js/ /js/one.js /js/two.js /js/three.js
Введите следующий код в Gruntfile.js
- initConfig(): параметр concat и его дочерняя конфигурация определяются подключаемым модулем.
- loadNpmTasks(): это загрузит плагин в папку /node_modules.
Теперь запустите:
$ grunt concat
Он обработает параметр .initConfig({concat}). Другими словами, будет создана папка /build, а код файла scripts.js будет содержаться во всех файлах /js/*.js. Он объединил все файлы в один.
Объединение файлов CSS
Теперь давайте сделаем то же самое с файлами CSS. Создайте папку /css и три файла: one.css, two.css и three.css. Поместите в них любой код CSS.
/css/ /css/one.js /css/two.js /css/three.js
Обновите Gruntfile.js:
Бегать:
$ grunt concat // It'll run concat:js and concat:css $ grunt concat:js // It'll run concat:js $ grunt concat:css // It'll run concat:css
Регистрация и запуск задач
Отлично, теперь пришло время понять, как работают задачи. Зарегистрируйте его, добавив следующий код ниже // Регистрация задач:
Бегать:
$ grunt concat-js // It'll run concat:js $ grunt concat-css // It'll run concat:css $ grunt concat-js-css // It'll run concat:js and concat:css $ grunt concat-all // It'll run concat:js and concat:css
Если вы попытаетесь запустить просто $ grunt, вы увидите следующую ошибку: Предупреждение: Задача «по умолчанию» не найдена. Итак, давайте определимся. Обычно задача по умолчанию запускает все, что настроено в Gruntfile.js:
Бегать:
$ grunt
И теперь это работает!
Вот и все! Каждый плагин будет иметь свои конфигурации, и очень важно читать и следовать их документации.