Учебники

Grunt — пример файла

Декабрь 12, 2018

В этой главе мы создадим простой файл Grunt, используя следующие плагины:

  • Грунт-вно-уродовать
  • Грунт-вно-CONCAT
  • Грунт-вно-jshint
  • Грунт-вно-часы

Установите все вышеперечисленные плагины и следуйте инструкциям ниже, чтобы создать простой Gruntfile.js —

Шаг 1 — Вам нужно создать функцию- оболочку , которая инкапсулирует конфигурации для вашего Grunt. 

module.exports = function(grunt) {};

Шаг 2 — Инициализируйте ваш объект конфигурации, как показано ниже — 

grunt.initConfig({});

Шаг 3 — Затем прочитайте настройки проекта из файла package.json в свойство pkg . Это позволяет нам ссылаться на значения свойств в вашем файле package.json . 

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

Шаг 4 — Далее вы можете определить конфигурации для задач. Давайте создадим нашу первую задачу concat, чтобы объединить все файлы, присутствующие в папке src /, и сохранить объединенный файл .js в папке dist / . 

concat: {
   options: {
      // define a string to insert between files in the concatenated output
      separator: ';'
   },
   dist: {
      // files needs to be concatenated
      src: ['src/**/*.js'],
      // location of the concatenated output JS file
      dest: 'dist/<%= pkg.name %>.js'
   }
}

Шаг 5 — Теперь давайте создадим еще одну задачу под названием uglify для минимизации нашего JavaScript. 

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

Вышеуказанная задача создает в папке dist / файл, содержащий минимизированные файлы .js. <% = Concat.dist.dest%> даст команду uglify для минимизации файла, создаваемого задачей concat .

Шаг 6 — Давайте настроим плагин JSHint, создав задачу jshint . 

jshint: {
   // define the files to lint
   files: ['Gruntfile.js', 'src/**/*.js'],
   // configure JSHint
   options: {
      // more options here if you want to override JSHint defaults
      globals: {
         jQuery: true,
      }
   }
}

Вышеупомянутая задача jshint принимает массив файлов и затем объект опций. Вышеуказанная задача будет искать любые нарушения кодирования в файлах Gruntfile.js и src / ** / *. Js .

Шаг 7 — Далее у нас есть задача наблюдения, которая ищет изменения в любом из указанных файлов и запускает указанные вами задачи. 

watch: {
   files: ['<%= jshint.files %>'],
   tasks: ['jshint']
}

Шаг 8 — Затем мы должны загрузить плагины Grunt, которые были установлены через _npm . 

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

Шаг 9 — Наконец, мы должны определить задачу по умолчанию . 

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

Задание по умолчанию можно запустить, просто набрав команду grunt в командной строке.

Вот ваш полный Gruntfile.js —

46
Share: