Co to jest Grunt.js? Część 2

Poprzednio opisałem do czego służy grunt i jak go zainstalować. Jednak zakończyłem na jednej z najważniejszych rzeczy w grunt – mianowicie pliku który jest odpowiedzialny za definicje zadań jak i konfiguracje tego co ma nam ten biedny grunt robić :)

Niestety, z grunt nie jest tak łatwo jak z NPM – by stworzyć gruntfile.js lub gruntfile.coffee mamy dwie opcje:

1. Ręczne utworzenie pliku
2. Wykorzystanie kolejnej paczki (kiedyś była częścią grunt) grunt-init

Ręcznie możemy to zrobić za pomocą poleceń

touch gruntfile.js
notepad grutfile.js

To nam da pusty plik, który musimy sami uzupełnić, na razie to pozostawmy w spokoju, jedynie możemy dodać do pliku:

module.exports = function (grunt) {

}

Niezależnie co będziemy robić to jest część wymagana. Daje nam ona dostęp do obiektu grunt i jego API konfiguracyjnego.

Jeżeli jednak nie chcemy tego pisać ręcznie, możemy wykorzystać paczkę grunt-init, która daje nam kilka ekstra możliwości – ogólnie jest to paczka która udostępnia narzędzie do scaffoldingu. To może być cokolwiek – od pliku gruntfile.js po pełną strukturę katalogu dla pluginu jQuery, Node czy innych – strona dokumentacji, listuje oficjalnie paczki oraz opisuje co one nam dają.

Nas będzie intersował jedynie szablon dla pliku gruntfile.js.

Instalacja grunt-init jest prosta:

npm install –g grunt-init

Da nam to dostęp do komendy grunt-init która z sama z siebie nic nam nie da. By móc utworzyć nasz plik, musimy jeszcze zainstalować szablon grunt-init-gruntfile. Niestety, nie jest on paczką npm, więc by go dodać trzeba sklonować repro z GitHuba do katalogu ~/.grunt-init/:

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

Teraz mamy dostęp do komendy:

grunt-init gruntfile

Spowoduje to odpalenie wizzarda w którym będziemy mogli określić:

• Czy nasza aplikacja będzie miała cokolwiek wspólnego z DOM (jakikolwiek plik HTLM)
• Czy pliki będą łączone i minifikowane
• Czy będzie plik package.json dostępny
• Czy chcemy dokonać jakiś zmian w powyższych odpowiedziach przed kontynuowaniem

Po skończeniu, zostanie dla nas utworzony plik Gruntfile.js i jeżeli odpowiedzieliśmy Tak na pytanie z package.json to albo ten plik zostanie utworzony albo zaktualizowany o paczki gruntowe, które są niezbędne do uruchomienia skryptu z pliku Gruntfile.js.

Więc teraz musimy wykonać polecenie

npm install

By zainstalować wszystkie niezbędne paczki dla grunt.

Jeżeli zaś odpowiedzieliśmy Nie na pytanie o package.json, to sami będziemy musieli ręcznie te paczki zainstalować (o czym zaraz).

Jeżeli odpowiedzieliśmy na wszystkie pytania Tak (oprócz tego ostatniego) to nasz plik Gruntfile.js wygląda tak:

/*global module:false*/
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    // Metadata.
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
      '<%= grunt.template.today("yyyy-mm-dd") %>n' +
      '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */n',
    // Task configuration.
    concat: {
      options: {
        banner: '<%= banner %>',
        stripBanners: true
      },
      dist: {
        src: ['lib/<%= pkg.name %>.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '<%= banner %>'
      },
      dist: {
        src: '<%= concat.dist.dest %>',
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        unused: true,
        boss: true,
        eqnull: true,
        browser: true,
        globals: {}
      },
      gruntfile: {
        src: 'Gruntfile.js'
      },
      lib_test: {
        src: ['lib/**/*.js', 'test/**/*.js']
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    watch: {
      gruntfile: {
        files: '<%= jshint.gruntfile.src %>',
        tasks: ['jshint:gruntfile']
      },
      lib_test: {
        files: '<%= jshint.lib_test.src %>',
        tasks: ['jshint:lib_test', 'qunit']
      }
    }
  });

  // These plugins provide necessary tasks.
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task.
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

Teraz by wykonać skrypt zdefiniowany w gruntfile.js wystarczy komenda:

grunt

Zostanie wtedy wykonany domyślny task ze wszystkimi swoimi powiązanymi zadaniami.

Jeżeli nie mamy pliku package.json i zdefiniowanych paczek tam, to przy odpalaniu dostaniemy błąd informujący jakich paczek nam brakuje:

>> Local Npm module "grunt-contrib-concat" not found. Is it installed?
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-contrib-jshint" not found. Is it installed?
>> Local Npm module "grunt-contrib-watch" not found. Is it installed?
Warning: Task "jshint" not found. Use --force to continue.

Innym sposobem uzyskania informacji na temat paczek wykorzystywanych przez gruntfile.js jest znalezienie linii kodu w pliku gruntfile.js zaczynających się od:

grunt.loadNpmTasks

Niestety, grunt nam tych paczek sam z siebie nie zainstaluje :) więc albo bawimy się ręcznie, ale usuwamy plik gruntfile.js i na nowo odpalamy grunt-init gruntfile :)

Jeżeli mamy już wszystkie paczki jakie są nam potrzebne to domyślnie mamy dostępne następujące polecenia:

// odpali wszystkie taski
grunt

// wykona jedynie testy
grunt qunit

// połączy jedynie pliki js w jeden plik
grunt concat

// zminifikuje jedynie plik utworzony przez contact
grunt uglify

// wykona jshint na plikach js
grunt jshint

Tyle na dzisiaj :) następnym razem pobawimy się gruntfile.js i dowiemy się skąd brać paczki, i skąd czerpać inspiracje :)