piątek, 14 czerwca 2019

Grunt - podsumowanie mojej zabawy z pakietami do automatyzowania pracy

Skoro ostatnio odrzuciłem na razie używanie generatorów, to może napiszę czego się nauczyłem?

mamy 2 pliki:

package.json

{
  "name": "project",
  "title": "file_project",
  "version": "0.0.1",
  "homepage": "localhost",
  "author": {name:"Born-kes"}
}

i Gruntfile.js
...

to w tym drugim, mogę korzystać z danych zadeklarowanych w innym miejscu:

np.

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),

   concat: {
      dist: {
        src: ['
<%= pkg.title %>/*.js', 'test/{,*/}*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }

   },
   uglify: {
      dist: {
        src: '<%= concat.dist.dest %>',
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },


Wniosek jak tego użyć?

Daje to wrażenie, że można mieć powiedzmy już gotowe konfiguracje i dołączać je grunt.file.readJSON do projektu, a większość zmian opiera się o plik package.json.

To wygląda zachęcająco.

Faworyt:

Chyba najczęściej używanym pakietem jest grunt-contrib-watch - obserwator projektu.
Przeładowuje on Tasksi po każdej modyfikacji i może "piszczeć" jak któryś task coś znajdzie np.zrobimy literówkę, albo coś przestało działać...

Zmniejszanie plików

grunt-contrib-uglify minimalizuje plik usuwając zbędne białe znaki i czasem nazwy zmiennych by skrócić kod. Szybko działa i pozwala mieć fajny przejrzysty kod z tysiącem komentarzy, a na boku tworzy kod czysty od naszych komentarzy i spakowany (zminifikowany).
grunt-contrib-htmlmin - minifikuje pliki HTML
grunt-contrib-cssmin - minifikuje pliki CSS

grunt-contrib-connect umnie strasznie zamula, ale odświerzanie okna przeglądarki po każdej modyfikacji to fajny bajer jak się ma dwa monitory.

grunt-usemin - pozwala podmieniać fragmenty kodu , np używać tagów w HTML do generowania strony bez potrzeby generowania jej przez serwer www.

Pilnowanie składni i poprawności kodu

grunt-contrib-jshint pozwala mieć konfiguracje w pliku w projekcie ( plik .jshint ), nie wiem co na to praktycy, ale chyba porządkuje kod.

grunt-eslint jest chyba lepiej wspierany (od grunt-contrib-jshint) , będę starał się go lepiej poznać. Kontroluje semantycznosć kodu, czyli między innymi literówki i poprawność.

grunt-contrib-concat pozwala łączyć pliki, ale szału niema, jeszcze nie jestem na etapie by każdy fragmęt kodu (funkcjonalność, zadanie) mieć w innym pliku.

grunt-karma - pozwala pisać testy jednostkowe.



Ciekawostka

NodeJS ma jeszcze dostęp do phpUnit od composera. Czytałem, że composer potrafi używać pakietów nodejs :-) - na stonie o drupalu 8, jest duży poradnik.
Ciekawostka może ktoś skorzysta, szkoda mi trochę czasu na takie zabawy.


Jak coś jeszcze znajdę to dopiszę do listy

Słowo wyjaśnienia i jada delej

Koniec roku szkolnego, więc trochę byłem zarobiony i nie było czasu napisać.

Rozwiązanie jest banalnie proste:
Każdy pakiet trzeba zainstalować osobno.

- ALE jak to!!?? - no tak to nie udało mi się wymusić automatycznej instalacji, czyli muszę nad tym jeszcze posiedzieć ( chce to zrozumieć, bo tak nie może być.. )

Szukam dalej i od nowa stawiam projekt, punktem wyjścia jest ostatni commit z Gita na dzień dzisiejszy.

Notatka:

1)
Polecenie "npm cache clear" w konsoli ma czyścić cache'a w razie problemów z instalacją.
Inna opcja to instalacja z flagą --cache pozwala z niego nie korzystać.

2)
udało mi się też wywołać błąd :-) , którego rozwiązaniem jest chyba właściwą kolejnością użycia komend.
Czyli odpowiednio najpierw

npm install

npm init

istnienie pliku package.json bez pakietów wywołało błąd i musiałem go usunąć i utworzyć chwilę później. Korzystając z gotowych pakietów można nawet nie wiedzieć o tej zależności.

END Notatka.


Co by nie było to trochę się nauczyłem - generatory nie są dla nowicjuszy :-)
Chyba że właśnie dla nich są napisane ( chyba takiego zrobię ).

Pozdrawiam


piątek, 31 maja 2019

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