Walka z grunt-init

Kolejny dzień walki z grunt'em, czyli bez pliku configuracji nie pojedziemy

Tworzymy plik gruntfile.js


Uwaga:
Po co instalować globalnie?
Na próbę zainstalowałem grunt-init --save-dev

i polecenie nie było rozpoznane, ale po instalacji globalnie już działa.

npm install grunt-init -g

Pierwsze podejście
niestety spełzło na niczym... 

grunt init

poinformował mnie, że niema pliku konfiguracji :)

z kolei grunt-init i grunt-init init zwracają to samo żądanie o templates.

Zaglądam do poradników i widzę kilka szablonów:
 https://gruntjs.com/project-scaffolding#installing-templates

okazuje że muszę je sobie ściągnąć z repozytorium gita, a nie przez npm (dziwne)

wybieram grunt-init-gruntfile

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

Trochę walki z lokalizacją i działa.

Co zrobiłem? 
katalog gruntfile jest w miejscu w którym grunt-init się go spodziewa czyli

"grunt-init /path/TEMPLATE" 

- z tym, że TEMPLATE to plik template.js który znalazłem w grunt-init-gruntfile

Potem kilka pytań i plik utworzony:-)

[?] Is the DOM involved in ANY way? (Y/n)
[?] Will files be concatenated or minified? (Y/n)
[?] Will you have a package.json file? (Y/n)
[?] Do you need to make any changes to the above before continuing? (y/N)

Writing Gruntfile.js...OK
Writing package.json...OK

Initialized from template "gruntfile".

Done, without errors.

Działa?

DEBUG'owanie
sprawdzam...

grunt

>> 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.

Aborted due to warnings.

Nie?

npm install

[...]

grunt

to samo, sprawdzam plik Gruntfile.js i package.json.
Widzę odwołania do:

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',

 więc coś tam dopisuje do package.json bi istniały wartości

"title":"test",
  "homepage":"homepage",
  "version":"123",
  "licenses":"brak",
  "author:{"name":"ja"}

 uruchamiam...

 grunt

Loading "Gruntfile.js" tasks...ERROR
>> Error: Unable to parse "package.json" file (Unexpected token
>>  in JSON at position 364).
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

 Dobra to literówka - brak "

znow start...

grunt

>> 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.

Aborted due to warnings.

OK muszę zainstalować, ale czemu same się nie instalują?

npm install

npm install --save-dev

npm update

Ciągle niechcą same...

 npm install grunt-contrib-concat --save-dev

+ grunt-contrib-uglify@4.0.1
added 18 packages from 44 contributors and audited 176 packages in 2.626s
found 44 vulnerabilities (11 low, 25 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

grunt

>> 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.

Aborted due to warnings.

Postęp...

ale na dziś koniec... płacz dziecka

Grunt czy Grunt-CLI

Zajmuje się teraz NodeJS

Definicja:
Napiszę później :-)

Jednym z dostępnych pakietów jest Grunt i odrazu zadaje sobie Pytanie

Co to jest Grunt i czy po co mi Grunt-CLI

Grunt (alternatywa dla Glup) to kod który wykonuje listę tasków (zadań) w reakcji na eventy.

Tylko co to właściwie znaczy?

Przykładowo po zakończeniu pracy zawsze sprawdzamy czy kod nadal działa, możemy ustawić zadanie by sam uruchomił testy, albo chcemy zminifikować js i css (zmniejszyć wielkosć przez usunięcie opisów, spacji i długich nazw) dwa polecenia robią to automatycznie.
Lista zadań jest wciąż rozwijana przez społeczność i już jest pokaźnych rozmiarów.

Jakie eventy? Wymienię dwa:
- plik w podanym katalogu (np. js) został zmieniony
- w konsoli uruchomiłeś grunta z flagą karma (grunt karma)

Konfiguracja i liste flag trzymamy w pliku Gruntfile.js lub Gruntfile.coffee

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

 Opis:
 pobiera dane projektu z package.json
 uglify banner - tworzy komentarz
uglify build - pobiera i zapisuje pliki
Task default - oznacza że gdy niema żadnej flagi

No to co to jest Grunt-CLI ??

Z tego co ustaliłem to jest interface dla Grunta, do urzywania w lini komend.
Przeszukuje ona nasze katalogi w poszukiwania grunta i uruchamia jego konfiguracje, jeśli nie to zwraca błąd.

instaluje się go globalnie -g

npm install -g grunt-cli

Czyli musimy Grunta zainstalować w projekcie lokalnie

npm install grunt --save-dev

polecenie npm install ... dodaje nam wpis do pliku package.json, a flaga --save-dev zadba by dodać do wartości devDepedencies w tym pliku.

Dodam jeszcze, że zainstalowany pakiet w pliku package.json jest z wersją która została zainstalowana ~ oznacza, że jak pojawi się nowsza wersja to ma ją zaktualizować

zainstalowana? no to jeszcze plik configuracji grunt'a który jest niezbędny do pracy.

Może być ten powyżej - jak zainstalujemy grunt-contrib-uglify

albo można użyć generatora pliku, który przeprowadzi nas za ręke.
Może stworzyć tylko plik, albo pobrać liste zainstalowanych już pakietów i opisuje co one nam dają.

npm install –g grunt-init

Tylko to już nie dziś bo dziesko skończyło poranną drzemkę.
Narazie