Автоматизация рабочего процесса с помощью Grunt.js

Автоматизация рабочего процесса с помощью Grunt.js

Grunt — это средство выполнения задач на Javascript. Он автоматизирует повторяющиеся задачи и рабочий процесс Steamline. Он использует Node JS и может быть установлен через npm (диспетчер пакетов Node).

С прошлого года я использую Grunt для нескольких своих проектов — для конкатенации, минимизации файлов css и JavaScript, а также для компиляции SASS, проверки синтаксических ошибок и запуска модульного теста.

Два важных файла Grunt

Package.json
Файл метаданных проекта хранит информацию обо всех зависимостях. При запуске установки $npm гарантируется, что будет установлена ​​правильная версия.

{
 "name": "my-project-name",
 "version": "0.1.0",
 "devDependencies": {
   "grunt": "~0.4.5",
   "grunt-contrib-compass": "~0.10.0",
   "grunt-contrib-hologram": "~0.4.1",
   "grunt-contrib-uglify": "~0.5.0"
 }
}

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

module.exports = function(grunt) {
 // Project configuration.
 grunt.initConfig({
   // Concatenate JavaScript files
   uglify: {
     all: {
          files: {
            'app/assets/js/all.min.js': ['app/assets/js/main/*.js', 'app/assets/js/common.js']
            }
          }
    },
   // Compile SASS to CSS 
  compass: {      
      dist: {                    
        options: {
          sassDir: '../sass',
          cssDir: '../css',
          outputStyle: 'compressed'
        }
    },
   // Generate pattern library  
  hologram: {
      generate: {
        options: {
          config: 'hologram_config.yml'
        }
      }
    },
   }
 });
 // Load the plugin
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-hologram');
 
 // Default task(s).
 grunt.registerTask('default', [
    'uglify:all',
    'compass',
    'hologram'
  ]);
};

grunt.initConfig — здесь мы определяем конфигурации плагина Grunt.

grunt.loadNpmTasks — здесь мы загружаем подключаемый модуль Grunt.

grunt.registerTask — здесь мы регистрируем задачу Grunt.

Настройка Grunt

Убедитесь, что у вас установлены node.js и npm, вот пошаговое руководство. После завершения установки, давайте начнем!

Установите интерфейс командной строки

$npm install -g grunt-cli

Установить Grunt

$npm install grunt --save-dev

Установите подключаемый модуль Grunt

$npm install [grunt-plugin-name] --save-dev

Беги хрюканье

Просто введите ниже, чтобы запустить все задачи одновременно

$grunt

Вы также можете настроить registerTask и запустить конкретную задачу

grunt.registerTask('compass', ['compass']);

затем введите ниже, чтобы запустить

$grunt compass

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

Running "compass:dist" (compass) task
    write /StyleGuide/css/crlib.styles.no-query.css (6.04s)
    write /StyleGuide/css/crlib.styles.css (6.859s)
  Running "compass:dev" (compass) task
  Running "hologram:generate" (hologram) task
  Custom markdown renderer Cortanamarkdownrenderer loaded.
  Build completed. (-: 
  Done, without errors.

Проверьте это с Grunt

Jasmine — это фреймворк для тестирования разработки, ориентированной на поведение, для JavaScript. Его также называют безголовым тестированием, потому что оно не зависит от браузеров, DOM или какой-либо инфраструктуры JavaScript. Использовать Grunt для автоматизированного тестирования очень просто.

Установить Жасмин

$npm install grunt-contrib-jasmine --save-dev

Настроить задачу

jasmine : {
      src : 'theme-build/js/*.js',
      options : {
        specs : 'theme-build/specs/*.js'
      }
    }

Добавить спецификацию
Создайте спецификацию Jasmine, specs/spec.js, как показано ниже.

describe("crlibSlidebarsr", function() {
    it("should be a constructor function", function() {
        expect(typeof window.crlibSlidebars).toBe("function");
    });
  });

Загрузить плагин

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

Запустите подключаемый модуль

$grunt jasmine

Терминал должен выглядеть так…

Running "jasmine:src" (jasmine) task
  Testing jasmine specs via PhantomJS
  >> ReferenceError: Can't find variable: angular at
  >> theme-build/js/main.js:12 
  >> theme-build/js/main.js:17 
  crlibSlidebars
    X should be a constructor function
      Expected 'undefined' to be 'function'. (1)
  1 spec in 0.005s.
  >> 1 failures

Смотри вместе с Грантом

Grunt может наблюдать за изменениями файлов, выполнять задачи, а затем перезагружать страницу для нас. Фрист, давайте установим Grunt watch

$npm install grunt-contrib-watch --save-dev

Настроить задачу

// Watch files
  watch: {
    // Watch .scss files
    sass: {
      files: ['css/sass/**/*.scss'],
      tasks: ['sass:dev'],
    },
    // Live reload files
    livereload: {
      options: { livereload: true },
      files: [
        'css/**/*.css',
        '**/*.html',
      ]
    }
  },

Загрузить плагин

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

Запустите подключаемый модуль

$grunt watch

Тада! Это сделано! Теперь Grunt будет следить за изменениями в любых файлах .scss, а затем автоматически запускать задачу.