Учебники

Grunt — настройка задач

Декабрь 12, 2018

Вы можете определить специфические для проекта данные конфигурации для Grunt в файле Gruntfile.js .

Конфигурация Grunt

Данные конфигурации задачи можно инициализировать в Gruntfile с помощью метода grunt.initConfig () . Внутри функции grunt.initConfig () возьмите информацию о конфигурации из файла package.json. Конфигурация будет содержать задачу с именем properties и любые произвольные данные. 

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

Конфигурация задач и цели

Когда вы запускаете задачу, Grunt ищет конфигурацию в свойстве с именем задачи. Мы определим задачи с несколькими конфигурациями и целевыми параметрами, как показано ниже — 

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

Здесь задача jshint имеет цели myfile1 и myfile2, а задача cssmin — цель myfile3 . Когда вы запускаете grunt jshint , он будет перебирать как задачу, так и цель для обработки конфигурации указанной цели.

Опции

Определите свойство параметров в конфигурации задачи, которое переопределяет значения по умолчанию для задачи. Каждая цель включает свойство параметров, которое переопределяет параметры на уровне задач. Это будет иметь следующий формат — 

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

файлы

Grunt предлагает некоторые идеи для определения того, с какими файлами должна работать задача, и использует различные способы указания сопоставлений файлов src-dest . Ниже приведены некоторые дополнительные свойства, которые поддерживаются отображениями src и dest.

  • фильтр — это функция, которая определяет совпавший путь к файлу src и возвращает значения true или false.

  • nonull — определяет несоответствующие шаблоны, когда для него установлено значение true.

  • точка — соответствует именам файлов, начинающимся с точки или иным образом.

  • matchBase — сопоставляет шаблоны, содержащие косые черты, с базовым именем пути.

  • раскрыть — он обрабатывает отображение файла src-dest.

фильтр — это функция, которая определяет совпавший путь к файлу src и возвращает значения true или false.

nonull — определяет несоответствующие шаблоны, когда для него установлено значение true.

точка — соответствует именам файлов, начинающимся с точки или иным образом.

matchBase — сопоставляет шаблоны, содержащие косые черты, с базовым именем пути.

раскрыть — он обрабатывает отображение файла src-dest.

Компактный формат

Он определяет отображение файла src-dest для каждой цели, которое может использоваться для задач только для чтения и требует только свойства src и никакого свойства dest . 

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

Формат файлов файлов

Он определяет отображение файла src-dest для цели, в которой имя свойства — это файл dest, а его значение — файл src . 

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

Формат массива файлов

Он задает сопоставление файла src-dest для каждой цели, используя дополнительные свойства для сопоставления. 

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

Старые форматы

Формат файла dest-as-target существовал до существования многозадачных операций, где путь к файлу назначения — это имя цели. Следующий формат устарел и не должен использоваться в коде. 

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

Пользовательская функция фильтра

Вы можете помочь целевым файлам с большим уровнем детализации, используя свойство фильтра . Следующий формат очищает файлы, только если он соответствует фактическому файлу. 

grunt.initConfig({
   clean: {
      myfile:{
         src: ['temp/**/*'],
         filter: 'isFile',
      },
   },
});

Globbing Patterns

Globbing означает расширение имени файла. Grunt поддерживает глобализацию, используя встроенные библиотеки node-glob и minimatch . Шаблон сглаживания включает в себя следующие пункты —

  • * соответствует любому количеству символов, но не / .
  • ? соответствует одному символу, но не / .
  • ** соответствует количеству символов, включая / .
  • {} указывает разделенный запятыми список выражений «или».
  • ! будет отменять совпадение шаблона в начале.

Например — 

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

Динамическое построение объекта Files

Когда вы работаете с отдельными файлами, вы можете использовать дополнительные свойства для динамического создания списка файлов. Когда вы устанавливаете свойство расширения в значение true, оно включает некоторые из следующих свойств:

  • CWD соответствует всем SRC по этому пути.

  • src соответствует шаблонам для сопоставления относительно cwd .

  • Свойство dest определяет префикс пути назначения.

  • ext заменит существующее расширение значением, сгенерированным в путях dest .

  • extDot указывает, где находится период, указывающий расширение. Используется либо первый период, либо последний период; по умолчанию устанавливается первый период

  • flatten удаляет все части пути из путей пути.

  • переименовать указывает строку, содержащую новое место назначения и имя файла.

CWD соответствует всем SRC по этому пути.

src соответствует шаблонам для сопоставления относительно cwd .

Свойство dest определяет префикс пути назначения.

ext заменит существующее расширение значением, сгенерированным в путях dest .

extDot указывает, где находится период, указывающий расширение. Используется либо первый период, либо последний период; по умолчанию устанавливается первый период

flatten удаляет все части пути из путей пути.

переименовать указывает строку, содержащую новое место назначения и имя файла.

Переименовать недвижимость

Это уникальная функция JavaScript, которая возвращает строку, и вы не можете использовать строковое значение для переименования. В следующем примере задача копирования создаст резервную копию README.md. 

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

Шаблоны

Вы можете указать шаблоны, используя < %% > разделители. Они будут расширены автоматически, когда они будут прочитаны из конфигурации. Он включает в себя два типа свойств —

  • Свойство <% = prop.subprop%> используется для расширения значения prop.subprop в конфигурации, которое может ссылаться на строковые значения, массивы и другие объекты.

  • Свойство <%%> выполняет встроенный код JavaScript, который используется для потока управления или зацикливания.

Свойство <% = prop.subprop%> используется для расширения значения prop.subprop в конфигурации, которое может ссылаться на строковые значения, массивы и другие объекты.

Свойство <%%> выполняет встроенный код JavaScript, который используется для потока управления или зацикливания.

Например — 

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

Импорт внешних данных

Вы можете импортировать внешние данные из файла package.json . Плагин grunt- contribribuglify можно использовать для минимизации исходного файла, и он создает комментарий баннера с использованием метаданных. Вы можете использовать grunt.file.readJSON и grunt.file.readYAML для импорта данных JSON и YAML.

Например —

43
Share: