Будем использовать тот же формат. Вызовем пакет uglify, настроим его и укажем, какие файлы задействовать и создать.
// Gruntfile.js
grunt.initConfig({
// получить конфигурацию из package.json
// так мы можем использовать штуки вроде name и version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
…
// настройка uglify для минимизации JS-файлов
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/magic.min.js': 'src/js/magic.js'
}
}
}
});
Здесь настраивается параметр с именем banner, он добавит хороший комментарий вверху нашего минимизированного файла. Обратите внимание, что мы используем pkg.name из файла package.json. Внутри build мы определяем файл, который желаем создать (dist/js/magic.min.js) из исходного файла (src/js/magic.js). Нам нужно больше кода в файле, чем просто какие-то две строки сделанных ранее, так что поработаем с гигантским файлом для минимизации. Возьмём jQuery. Скопируйте содержимое несжатого файла jQuery и вставьте его в src/js/magic.js. Видите, какой у них классный комментарий в начале файла? Мы сделаем такой же с помощью параметра banner. Теперь пора минимизировать наш файл. Перейдите в консоль и наберите:
$ grunt uglify
Мы уменьшили оригинальный файл размером 360 Кб до скромных 97.1 Кб!
Минимизация нескольких файлов в один
Можно сделать гораздо больше, чем просто минимизировать единственный файл — взять несколько файлов и уменьшать их все в один выходной файл. Это может ускорить наши сайты, поскольку мы обрабатываем только один JS-файл для посетителей. Настройка нескольких файлов довольно проста:
// Gruntfile.js
grunt.initConfig({
// получить конфигурацию из package.json
// так мы можем использовать штуки вроде name и version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
…
// настройка uglify для минимизации JS-файлов
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/magic.min.js': ['src/js/magic.js', 'src/js/magic2.js']
}
}
}
});
В данном примере мы берём два указанных файла и минимизируем их в magic.min.js. Можно также применить краткую форму, которую мы узнали ранее и просто сказать минимизировать все JS-файлы в папке src. Для этого вы должны использовать src/**/*.js.