Блог о веб-разработке > Grunt > Grunt uglify — сжатие (минимизация) javascript файлов

Grunt uglify — сжатие (минимизация) javascript файлов

Grunt uglify — официальный плагин для сжатия и конкатенации (объединения) javascript файлов в экосистеме Grunt.

Установка Grunt uglify

Через командную строку:
npm install grunt grunt-contrib-uglifyjs --save-dev
После запуска команды uglifyjs установится в папку node_modules и появится запись в разделе devDependencies в файле package.json.
Добавим в файл Gruntfile.js следующий код:

module.exports = function(grunt) {
    grunt.initConfig({
      uglify: {
        my_target: {
          files: {
            'dest/minified.js': ['src/jquery.js', 'src/slider.js']
          }
        }
      }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify'); // загружаем задачу
    grunt.registerTask('default', ['uglify']); // устанавливаем задачу uglify по умолчанию
  };

module.exports = function(grunt) {

grunt.initConfig({

uglify: {

my_target: {

files: {

'dest/minified.js': ['src/jquery.js', 'src/slider.js']

}

});

grunt.loadNpmTasks('grunt-contrib-uglify'); // загружаем задачу

grunt.registerTask('default', ['uglify']); // устанавливаем задачу uglify по умолчанию

};

В опции files указываем сначала директорию для сжатого файла (‘dest/minified.js’) и затем файлы которые надо сжать и объединить ([‘src/jquery.js’, ‘src/slider.js’]).

Можно группировать файлы для сжатия и назначать несколько директорий для выходных файлов:

.
  ├── dest
  │   ├── file1.min.js
  │   ├── file2.min.js
  ├── dest2
  │   └── jquery.all.min.js
  ├── src
  │   ├── slider.js
  │   └── jquery.js
  └── src2
      ├── common.js
      └── animation.js

├── dest

│ ├── file1.min.js

│ ├── file2.min.js

├── dest2

│ └── jquery.all.min.js

├── src

│ ├── slider.js

│ └── jquery.js

└── src2

├── common.js

└── animation.js

Прописываем в Gruntfile.js:

first_target: {
    files: {
      'dest/file1.min.js': ['src/jquery.js', 'src2/jquery.mobile.js'],
      'dest/file2.min.js': ['src/jquery.js', 'src/angular.js']
    }
  },
  second_target: {
    files: {
      'dest2/jquery.all.min.js': ['src/jquery.js', 'src2/jquery.mobile.js', 'src2/jquery-ui.js']
    }
  }

first_target: {

files: {

'dest/file1.min.js': ['src/jquery.js', 'src2/jquery.mobile.js'],

'dest/file2.min.js': ['src/jquery.js', 'src/angular.js']

}

second_target: {

files: {

'dest2/jquery.all.min.js': ['src/jquery.js', 'src2/jquery.mobile.js', 'src2/jquery-ui.js']

}

Для запуска отдельных целей используем команду:

grunt uglify:first_target

1	grunt uglify:first_target

Добавляем banner

Banner — это комментарий в начале сжатого файла, в который обычно записывается основная информация о файле (названия сжатых файлов, версия, дата создания и т.д.).

grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
           banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
        } ...
      }
    });

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

uglify: {

options: {

banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +

'<%= grunt.template.today("yyyy-mm-dd") %> */'

} ...

}

});

Динамические имена файлов

first_target: {
    files: {
      'dest/script.<%= grunt.template.today('yymmddHHMM') %>.min.js': ['src/jquery.js', 'src2/jquery.mobile.js']
    }
  }

first_target: {

files: {

'dest/script.<%= grunt.template.today('yymmddHHMM') %>.min.js': ['src/jquery.js', 'src2/jquery.mobile.js']

}

После выполнения задачи будет создан файл script.1411161327.min.js с комментарием:

/*! grunt-contrib-uglifyjs - v0.0.0 - 2014-11-16 */

1	/! grunt-contrib-uglifyjs - v0.0.0 - 2014-11-16 /

Шаблон для выбора файлов

Если в вашем проекте большое количество javascript файлов, целесообразнее будет выбирать их с помощью шаблона, а не указывать каждый файл по отдельности:
first_target: {
files: [
{ src: ‘src/common/*js’, dest: ‘dest/common.js’}, // сжаты будут все файлы с расширением .js папке src/common/
{ src: ‘src/ui/*js’, dest: ‘dest/ui.js’}
]
}

Основные настройки Grunt uglify

separator

Объединенные файлы будут разделены указанными символами. Если файлы сжимаются, то разделения можно использовать ';\n'.

footer

Добавление комментария в конце сжатого файла.

stripBanners

Удаление комментариев.

false — по умолчанию
true — будут удалены комментарии /* ... */ ( /*! ... */ не удаляются)
дополнительные опции object:
- block — если true, удаляются все блочные комментарии
- line — удаляются строчные комментарии //