Grunt concat — конкатенация (объединение) файлов CSS и Javascript
Одна из самых часто используемых при работе с Grunt — это конкатенация (объединение) файлов CSS и Javascript. Плагин grunt-contrib-concat может объединить отдельно заданные файлы или целые директории с файлами.
Установка Grunt concat
Установка через командную строку:
npm install grunt-contrib-concat --save-dev
Пример описания задачи grunt-contrib-concat в файле gruntfile.js:
1 2 3 4 5 6 7 8 9 | concat: { js: { src: [ 'dev/jquery/jquery.js', 'dev/js/main.js', 'dev/libs/*.js' ], dest: '../pod/min.js', options: { separator: ';' } }, } |
Опции grunt concat
separator
Объединенные файлы будут разделены указанными символами. Если конкатенируете javascript файлы с последующей минификацией, вы можете использовать для разделения символы ';\n'.
Пример:
1 2 3 | options: { separator: ';' } |
banner
Banner добавляется в начало выходного файла после конкатенации.
Пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 | concat: { options: { separator: '\n\r', banner: '/*\nConcatinated CSS file \n' + 'Author: Alexey \n' + 'Created Date: <%= grunt.template.today("yyyy-mm-dd") %>' + '\n */ \n' }, dist: { src: ['dev/css/*.css'], dest: 'dev/css/style.css', }, }, |
В начале файла style.css мы получим следующий код:
1 2 3 4 5 | /* Concatinated CSS file Author: Alexey Created Date: 2015-09-18 */ |
stripBanners
По умолчанию установлено значение false . Данная опция позволяет удалить комментарии из javascript файлов.
Если значение опции true, будут удалены все /* … */ комментарии (не /*! … */).
Дополнительные опции:
- block — удаляются все блоковые комментарии /* ... */ , если установлено true
- line удаляются строковые комментарии //
- По умолчанию обе опции имеют значение true
Пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | concat: { options: { stripBanners: { block : false, line : true }, separator: '\n\r', banner: '/*\nConcatinated JS file \n' + 'Author: Alexey \n' + 'Created Date: <%= grunt.template.today("yyyy-mm-dd") %>' + '\n */ \n' }, dist: { src: ['dev/js/*.js'], dest: 'prod/js/scripts.js', }, }, |
footer
Значение будет добавлено в конец файла после конкатенации.
process
Если вы хотите выполнить какую-то функцию перед началом конкатенации, воспользуйтесь опцией process.
Пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | concat: { dist: { options: { // Переместит 'use strict' из всех js файлов в начало выходного файла project.js banner: "'use strict';\n", process: function(src, filepath) { return '// Source: ' + filepath + '\n' + src.replace(/(^|\n)[ \t]*('use strict'|"use strict");?\s*/g, '$1'); }, }, files: { 'dist/built.js': ['src/project.js'], }, }, }, |
sourceMap
По умолчанию false .
Данная опция позволяет создать файл sourceMap. Файл будет создан в той же директории, что и сконкатенированный файл и будет иметь то же имя только с расширением .map. Чтобы изменить имя файла sourceMap используйте опцию sourceMapName.
Пример кода:
1 2 3 4 5 | concat: { options: { sourceMap: true, sourceMapName: 'mySourceMap' }, |
Пример настройки файла Gruntfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | module.exports = function (grunt) { grunt.initConfig({ concat: { options: { stripBanners: true, sourceMap: true, separator: '\n\r', banner: '/*\nConcatinated JS file \n' + 'Author: Alexey \n' + 'Created Date: <%= grunt.template.today("yyyy-mm-dd") %>' + '\n */ \n' }, dist: { src: ['dev/js/*.js'], dest: 'prod/js/scripts.js', }, }, grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat']); }; |