Grunt js — установка и настройка
Grunt js — незаменимый инструмент любого font-end разработчика. Он поможет автоматизировать основные задачи сборки проекта:
- сжатие CSS файлов
- сжатие Javascript
- сжатие HTML
- расстановка вендорных (браузерных) префиксов (autoprefixer)
- компиляция Sass (grunt sass)
- компиляция Less (grunt less)
- и многое другое
Для установки на Windows и работы Grunt js вам потребуется установить Node.js и npm.
Установим интерфейс командной строки. Для этого надо открыть консоль (Пуск — Выполнить — cmd) и запустить команду:
1 | npm install -g grunt-cli |
Флаг -g указывает, что Grunt установится глобально и команду grunt можно будет запустить из любой директории.
Настройка package.json
package.json — файл с настройками nodejs, в которым мы пропишем модули, нужные для работы.
Зайдите в папку с проектом и в корне создайте файл package.json. Пример заполнения файла:
1 2 3 4 5 6 7 8 9 10 11 12 13 | { "name": "grunt-getting-started", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.4", "grunt-contrib-jshint": "latest", "jshint-stylish": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-less": "latest", "grunt-contrib-cssmin": "latest", "grunt-contrib-watch": "latest" } } |
"name" указываем имя проекта.
"version" — версия проекта.
"devDependencies" — в этом поле указывается имя модуля, который необходимо установить, и его версию. Вы можете указать точную версию или задать значение "latest", тогда установится последняя версия.
Установка модулей запускается командой:
1 | npm install |
После выполнения команды в папке вашего проекта появится папка node_modules, в которой будут лежать файлы установленных модулей.
Настройка Grunt — файл Gruntfile.js
Gruntfile.js содержит задачи и их описание. Именно с этим файлом вы будете работать используя Grunt.
Создайте в корне вашего проекта файл Gruntfile.js.
Пример заполнения файла:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // Gruntfile.js // Вся конфигурация находится внутри этой функции module.exports = function(grunt) { // =========================================================================== // Конфигурация GRUNT =========================================================== // =========================================================================== grunt.initConfig({ //Здесь будут указаны модули и их настройки }); // =========================================================================== // Загружаем модули GRUNT ======================================================== // =========================================================================== grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); }; |
Для примера создадим конфигурация плагина Jshint, который выполняет валидацию javascript кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Gruntfile.js grunt.initConfig({ // зададим конфигурацию модуля ----------------------------------- jshint: { options: { reporter: require('jshint-stylish') // используем jshint-stylish для вывода стилизованного отчета об ошибках }, // здесь мы указываем файлы, которые необходимо проверить // после запуска задачи будет проверен Gruntfile.js и все файлы с расширением .js в папке src build: ['Gruntfile.js', 'src/**/*.js'] } }); |
Работа с Grunt
Для начала работы с Grunt вам необходимо перейти в корневую папку вашего проекта. Запустите командную строку и введите команду:
1 | cd <путь к папке проекта> |
Для запуска задач введите команду Grunt. После запуска команды Grunt выполнит все задачи default.
1 2 3 4 5 6 7 8 9 10 11 | // Gruntfile.js grunt.initConfig({ ... // ============= // Создаем задачи ========== // grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'less']); }); |
default — имя задачи.
['jshint', 'uglify', 'cssmin', 'less'] — список задач, которые будут выполнятся в порядке слева на право.
Вы можете создавать свои задачи, например:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Gruntfile.js grunt.initConfig({ grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'less']); grunt.registerTask('dev', ['jshint:dev', 'uglify:dev', 'cssmin:dev', 'less:dev']); grunt.registerTask('production', ['jshint:production', 'uglify:production', 'cssmin:production', 'less:production']); }); |
Чтобы запустить задачу dev, надо ввести команду grunt dev.