Статья последний раз была обновлена 02.07.2024
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']);
};
В конечный вариант конфига мною внесены небольшие изменения, ибо это был мой рабочий инструмент, но в них можно легко разобраться.
IT-специалист широкого профиля, в настоящее время занимаюсь разработкой и преимущественно продвижением веб-сайтов (SEO, SEM, SMO, SMM).
kupereal недавно публиковал (посмотреть все)
- Изменяем файл hosts автоматически при старте виртуальной машины Hyper-V с сайтом - 23.01.2026
- Настраиваем плагин Clearfy для WordPress - 05.06.2025
- Поднимаем веб-сервер на Ubuntu - 16.09.2024