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

keymap

Skróty klawiszowe przyspieszają pracę - banał, ale zobacz →

odrywasz rękę od klawiatury. Klikasz myszką i wracasz na klawiaturę.

Te same keymap, są wielu programach, nawet pisząc to sprawdzam 

ctrl + ← 
przeskakuje o całe słowo
ctrl + shift + ←    
zaznacza mi całe słowo

szybciej niż po literce, prawda?

Testuje teraz phpstorm i zobaczmy co tam mają użytecznego...

alt + ctrl + s    
otwiera setings z podlądem kaymap 

ctrl + w
Zwiększa zaznaczoną sekcje - super


ctrl + shift + w
odwrotność zmniejsza zaznaczoną sekcje

alt + spacja
pokazuje auto dopowiadanie

shift, shift

otwiera mi  shearch Everywhere - wyszukiwanie w projekcie (pliki, zmienne, moduly)

Bardzo ciekawi mnie opcja Refactior

alt + ctrl + shift + t
ale to później sprawdzę, zapiszę by sprawdzić

ctrl+j
pozwala pracować z templatkami kodu - nie pisać całego, ale wstawić i wypełnić pola

alt + insert
generuje plik w projekcie


Dziecko wstało więc koniec na dziś. 
Mam nadzieję że o takich skrótach jak:
ctrl + c , ctrl + v, ctrl + x, ctrl + z,
ctrl + a, ctrl +f, ctrl +b

wspominać nie trzeba.
ctrl + s 
 to chyba programiści mają jako tik nerwowy

Pozdrawiam

Raport z Ćwiczeń nad gitem

Dziś ćwiczyłem pracę z Gitem.

Narzędzie:
- używam TortoiseGit

Zadanie.
1)
- Stworzyć repozytorium : https://bitbucket.org/born-kes/composer/src/master/
- Stworzyć instalator Composera w batch,
- plik bat, który pobiera pliki Composera i zapisuje w projekcie (tworzymy środowisko pracy).
- Sprawdzić czy pamiętam jak konfiguruje się composser'a

2)
- Stworzyć kilka wątków/kanałów (Branch) na repozytorium Git'a
- Wprowadzić zmiany, w każdym z wątków inne.
- Połączyć (Marge...) wątki (Branche)

Raport, jakie kroki podjołem:
- stworzyłem repozytorim
- sklonowałem na dysk
- stworzyłem wątki
- przełając się między nimi potworzyłem różne konflikty między wersjami (wątkami)

3) Rozwiązuje problem?
1) ustawiam wątek ( Switch/Checkout... )
 np.master
2) zaktualizować wątek (Pull...)
- są dwa wątki master (localny i serwera repozytorium)
3)  dołączyć (Marge..) do niego poprawki (commit'y)  z innego wątku (Branch)

4) Edytować poprawkę jeśli dotyczy jednego pliku...

5) Wysłać (Push...) na serwer
- bez dołączania już nowych plików z tego co widzę, nie mamy tu wyboru.

6) Hura udało się?

Kupno działki, opieka nad dziećmi i kilka książek i tygodni później, od rozpoczęcia porządkowania wiedzy.

Książki o :
-wzorcach projektowych,
- testowaniu danych,
- Twórcy ofiary i

i efektem jest Class'a testowa,
Ogarnę gita i dodam link do repozytorium.

/**
 * Class ExampleTest
 * $this->assertTrue
 * $this->assertFalse
 * $this->assertEquals ==
 * $this->assertSame ===
 * $this->assertContains('value', $array) ['value']
 * $this->assertArrayHasKey('key', $array) ['key'=>'value']
 * $this->assertInternalType('array', $a); type_of2

$date = new DateTime();
$this->assertInstanceOf('DateTime', $date);
 */

<?php
use PHPUnit\Framework\TestCase;
  
   class EtestTest extends TestCase
{
    /** @var  \Prophecy\Prophecy\ObjectProphecy */
    private $prophet;
    private $mock;
    private $Basic;
    private $x;

    protected function setup() {
        $this->prophet = new \Prophecy\Prophet;
        /** @var Prophecy\Prophet $x TYPE_NAME */
        $x = $this->x = $this->prophet->prophesize()->willImplement ('Basic\Routing');


        $x->get('b')->willReturn('hello b');
        $x->get('a')->willReturn('hello');
        $this->mock = $x->reveal();

        $this->Basic   = new \Basic\Basic($this->mock);
    }

    protected function tearDown() {
        $this->prophet->checkPredictions();
    }

    public function testBasicRun()
    {
        //$this->x->get('b')->willReturn('hello nowe');

         $this->assertEquals($this->Basic->run(), 'hello b') ;
        return true;
    }

    /**
     * jeśli test poprzedni działa
     * @depends testBasicRun
     */
    public function testNext($a)
    {
        $this->assertTrue($a);

    }

    /**
     * Dane z Provider'a
     * @dataProvider additionProviderOne
     * @dataProvider additionProviderSecond
     */
    public function testAdd($a, $b, $expected)
    {
        $this->assertSame($expected, $a + $b, "{$a}, {$b}, {$expected}");
    }
    /**
     * Dane z Provider'a
     * @dataProvider additionProviderOne
     * @dataProvider additionProviderSecond
     */
    public function testAddSecond()
    {
        list( $a, $b, $expected) = func_get_args();
        $this->assertSame($expected, $a + $b, "{$a}, {$b}, {$expected}");
    }

    public function additionProviderOne()
    {
        return [
            [0, 0, 0],
            [0, 1, 1],
            [1, 0, 1],
         //   [1, 1, 3]
        ];
    }

    public function additionProviderSecond()
{
    return [
        'adding zeros'  => [0, 0, 0],
        'zero plus one' => [0, 1, 1],
        'one plus zero' => [1, 0, 1],
     //   'one plus one'  => [1, 1, 3]
    ];
}

    public function testFailingInclude()
    {
        $this->expectException(Error::class);

        throw @include 'not_existing_file.php';
    }

    public function testExpectFooActualFoo()
    {
        $this->expectOutputString('foo');
        echo 'foo';
    }
}

// cls => czeuszczenie cmd

Notatka: instalacja narzędzi dla programistów

 -------------------------------------------
 Grunt / Glup (alternatywa)

- wykonuje listę tasków (zadań) napisanych w js.
minifikuje kod, łączy pliki, podmienia tagi na tekst, śledzi zmiany w plikach, powtarza testy.

 -------------------------
  front-end
 https://bower.io/

 śledzi pakiety które chcesz mieć w projekcie i ściąga potrzebną wersje, albo aktualizuje.

  -------------------------
  http://yeoman.io/ 

- Tworzy i rozbudowuje szkielet aplikacji - korzysta z gotowych generatorów
(aplikacje/strony mobilne, rozszerzenia firefox'a/chroma, wordpress itp),
 tworzy też procedury dla Grunt'a/Glup'a i zestawy testów jednostkowych.
  -------------------------

 Instalacja w cmd:

Czy masz zainstalowanego nodejs ?

nie:
 - pobierz z https://nodejs.org

tak:
sprawdzamy wersje nodejs & npm
npm --version



Czy masz plik package.json

Nie:
{
 - generate file package.json
npm init

 - zainstaluj grunt globalnie

npm install -g grunt-cli

 - zainstaluj grunt'a i modułów w projekcie

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

 - instal karma :supports test-driven development i moduły
 npm install karma grunt-karma karma-jasmine jasmine-core karma-browser-reporter karma-story-reporter --save-dev

 - instal launcher for browsers to test for karma
 npm install karma-chrome-launcher karma-cli karma-firefox-launcher karma-ie-launcher karma-phantomjs-launcher karma-script-launcher --save-dev
}

Tak:
npm install


 - Tworzymy pliki config
 * gruntfile.js
 * karma.config.js



 zapomniałem o  Composer jest dla php
https://getcomposer.org/

Tu za instalacje odpowiada w CMD

phar i wget

wget https://phar.phpunit.de/phpunit-6.5.phar
php phpunit-6.5.phar --version

ale opisze bardziej innym razem.

plik config phpunit

phpunit.xml