Пошаговая работа с Grunt

Статья последний раз была обновлена 04.05.2023

1. В корне проекта создается файл package.json с настройками для Node

{
  "author": "nickname",
  "name": "FrontEnd-Project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

2. Теперь необходимо установить все пакеты и зависимости, описанные в файле

npm install

3. Установить инструмент командной строки Grunt

npm install -g grunt-cli

4. Первая задача, объединить несколько *.js файлов

npm install grunt-contrib-concat --save-dev # Устанавливаем плагин Grunt для объединения файлов

5. Файл конфигурации package.json будет автоматически обновлен, он будет обновляться и дальше

{
  "author": "kupereal",
  "name": "FrontEnd-Project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "^0.5.1"
  }
}

6. В корне проекта создается файл Gruntfile.js и происходит настройка Grunt под задачу объединения

module.exports = function(grunt) {
    // 1. Вся настройка находится здесь
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            // 2. Настройка для объединения файлов находится тут
            dist: {
                src: [
                    'js/libs/*.js', // Все JS в папке libs
                    'js/global.js' // Конкретный файл
                ],
                dest: 'js/build/production.js',
            }
        }
    });
    // 3. Тут мы указываем Grunt, что хотим использовать этот плагин
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
    grunt.registerTask('default', ['concat']);
};

7. Запуск одной командой

grunt

8. Новая задача, минифицировать полученный JavaScript

npm install grunt-contrib-uglify --save-dev # Устанавливаем плагин Grunt для минификации кода

9. Настройка Grunt под задачу минификации

module.exports = function(grunt) {
    // 1. Вся настройка находится здесь
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            // 2. Настройка для объединения файлов находится тут
            dist: {
                src: [
                    'js/libs/*.js', // Все JS в папке libs
                    'js/global.js' // Конкретный файл
                ],
                dest: 'js/build/production.js',
            }
        },
        uglify: {
            build: {
                src: 'js/build/production.js',
                dest: 'js/build/production.min.js'
            }
        }
    });
    // 3. Тут мы указываем Grunt, что хотим использовать этот плагин
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
    grunt.registerTask('default', ['concat', 'uglify']);
};

10. Далее просто — задача, плагин, конфиг

11. Задача — оптимизация изображений

npm install grunt-contrib-imagemin --save-dev

module.exports = function(grunt) {
    // 1. Вся настройка находится здесь
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            // 2. Настройка для объединения файлов находится тут
            dist: {
                src: [
                    'js/libs/*.js', // Все JS в папке libs
                    'js/global.js' // Конкретный файл
                ],
                dest: 'js/build/production.js',
            }
        },
        uglify: {
            build: {
                src: 'js/build/production.js',
                dest: 'js/build/production.min.js'
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'images/build/'
                }]
            }
        }
    });
    // 3. Тут мы указываем Grunt, что хотим использовать этот плагин
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
    grunt.registerTask('default', ['concat', 'uglify', 'imagemin']);
};

12. Далее еще проще — все задачи, плагины, и итоговый конфиг

Задача — автоматизация всех процессов:

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

Простейший веб-сервер для статических сайтов:

npm install grunt-contrib-connect --save-dev

Быстрое подключение плагинов вместо loadNpmTasks:

npm install load-grunt-tasks --save-dev

Задача — чистка дублей изображений:

npm install grunt-contrib-clean --save-dev

Задача — использование sass (gem install sass):

npm install grunt-contrib-sass --save-dev

Задача — минификация html:

npm install grunt-contrib-htmlmin --save-dev

module.exports = function(grunt) {
    // 1. Вся настройка находится здесь
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
        server: {
        options: {
            port: 8000,
            base: '.'
        }
        }
    },
    /*
    htmlmin: {
        dist: {
        options: {
            removeComments: true,
            collaoseWhitespace: true
        },
        files: {
            'index.html': 'inc/index.html'
        }
        }
    },
    */
    sass: {
        dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'css/build/global.css': 'css/global.scss'
        }
        }
    },
    concat: {
        // 2. Настройка для объединения файлов находится тут
        dist: {
        src: [
            'js/libs/*.js', // Все JS в папке libs
            'js/global.js' // Конкретный файл
        ],
        dest: 'js/build/production.js'
        }
        },
    uglify: {
        build: {
        src: 'js/build/production.js',
        dest: 'js/build/production.min.js'
        }
    },
    clean: {
        build: {
        src: ['images/build/']
        }
    },
    imagemin: {
        dynamic: {
        files: [{
            expand: true,
            cwd: 'images/',
            src: ['**/*.{png,jpg,gif}'],
            dest: 'images/build/'
        }]
        }
    },
    watch: {
        html: {
        files: ['**/*.html'],
        //tasks: ['htmlmin'],
        options: {
            spawn: false,
            livereload: true
        }
        },
        css: {
        files: ['css/*.scss'],
        tasks: ['sass'],
        options: {
            spawn: false,
            livereload: true
        }
        },
        scripts: {
        files: ['js/*.js'],
        tasks: ['concat', 'uglify'],
        options: {
            spawn: false,
            livereload: true
        }
        },
        images: {
        files: ['**/*.{png,jpg,gif}'],
        tasks: ['clean', 'imagemin'],
        options: {
            spawn: false,
            livereload: true
        }
        }
    }
    });
    // 3. Тут мы указываем Grunt, что хотим использовать этот плагин
    //grunt.loadNpmTasks('grunt-contrib-connect');
    //grunt.loadNpmTasks('grunt-contrib-concat');
    //grunt.loadNpmTasks('grunt-contrib-uglify');
    //grunt.loadNpmTasks('grunt-contrib-imagemin');
    //grunt.loadNpmTasks('grunt-contrib-watch');
    require('load-grunt-tasks')(grunt);
    // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
    grunt.registerTask('default', ['connect', 'sass', 'concat', 'uglify', 'clean', 'imagemin', 'watch']);
};

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