Php:drupal:8:cog

De Les Tutoriaux du WebMestre
Aller à : navigation, rechercher

Création automatisée du sous-thème

  • Cette procédure est indiquée sur le REAME.md du StarterKit
  • la commande drush embarquée avec cog est décrite par le fichier php
  • Pour utiliser la commande drush attachée au starter Kit Cog, activer le projet cog:
# activation du projet cog
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php en -y cog
Cannot load Xdebug - it was already loaded
The following extensions will be enabled: cog
Do you really want to continue? (y/n): y
cog was enabled successfully.                                                                                                                                                                                                                             [ok]
# On peut passer la commande cog de création d’un sous thème :
## cette dernière prend comme paramètres (help command)
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php help cog
Create a theme using cog.

Examples:
 drush cog "Theme name"                    Create a sub-theme, using the        
                                           default options.                     
 drush cog some_theme "Theme name"         Create a sub-theme with a specific   
                                           machine name.                        
 drush cog "Theme name" --path=themes      Create a sub-theme in the specified  
 --description="This is a theme."          directory with a custom description.

Arguments:
 machine_name                              [optional] A machine-readable name 
                                           for your theme.                    
 name                                      A name for your theme.

Options:
 --description                             A description of your theme.        
 --machine-name                            [a-z, 0-9, _] A machine-readable    
                                           name for your theme.                
 --name                                    A name for your theme.              
 --path                                    The path where your theme will be   
                                           created. Defaults to: themes/custom
# je passe la commande complète 
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php cog bofip_cog "Thème BOFIP basé sur COG" --description="Création d'un thème pour REFBOFiPI basé sur le thème parent cog"
Cannot load Xdebug - it was already loaded
Copying files from STARTERKIT...
Updating .info.yml file…
Replacing "STARTERKIT" in all files…
Starter kit for "Thème BOFIP basé sur COG" created in: /var/www/bofiptest/web/themes/custom/bofip_cog

Activation du sous thème

  • On active le projet bofip_cog par drush:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php en -y bofip_cog 
Cannot load Xdebug - it was already loaded
The following extensions will be enabled: bofip_cog
Do you really want to continue? (y/n): y
bofip_cog was enabled successfully.                                                                                                                                                                                                                       [ok]
  • on définit bofip_cog comme le thème par défaut pour la partie frontend!
    • cela passe par une commande de la console drupal:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drupal/console/bin/drupal.php co system.theme default bofip_cog
Cannot load Xdebug - it was already loaded
 Configuration name system.theme
 ------------------- ---------------- ---------------- 
  Configuration key   Original Value   Override Value  
 ------------------- ---------------- ---------------- 
  default             bofip            bofip_cog       
 ------------------- ---------------- ----------------
  • le résultat est no stylé:

Activation cog.jpg

Installation de l'outillage NodeJS/Gulp

Création de NodeJS/Npm pour le projet via nvm

  • nvm (Node Version Manager) est un utilitaire permettant la co-existance de plusieurs environnements locaux (non root) de type NodeJS/npm
  • Le script qui installe nvm (et la version que l'on veut de NodeJS): install-node.js est livré à la racine du StarterKit:
    • Quels paramètres faut il passer au script ?
# quels paramètres passer au script ?
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ ./install-node.sh 
./install-node.sh: usage: install-node.sh 6.11.0
  • Au 11/12/2017, la dernière version stable de NodeJS est la 8.9.3
  • On passe la commande correspondante au script:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ ./install-node.sh 8.9.3  | tee install.log
Downloading and installing nvm
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  7750  100  7750    0     0  10728      0 --:--:-- --:--:-- --:--:-- 10734
=> Downloading nvm from git to '/home/jpmena/.nvm'
=> Clonage dans '/home/jpmena/.nvm'...
remote: Counting objects: 6660, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 6660 (delta 2), reused 3 (delta 0), pack-reused 6650
Réception d'objets: 100% (6660/6660), 2.05 MiB | 1.43 MiB/s, fait.
Résolution des deltas: 100% (4132/4132), fait.
Vérification de la connectivité... fait.
* (HEAD détachée sur v0.30.2)
  master

=> Appending source string to /home/jpmena/.bashrc
=> Close and reopen your terminal to start using nvm
Downloading and installing node version 8.9.3

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`

Usage:
  nvm help                                  Show this message
  nvm --version                             Print out the latest released version of nvm
  nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
    --reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
  nvm uninstall <version>                   Uninstall a version
  nvm use [--silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
  nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
  nvm run [--silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
  nvm current                               Display currently activated version
  nvm ls                                    List installed versions
  nvm ls <version>                          List versions matching a given description
  nvm ls-remote                             List remote versions available for install
  nvm version <version>                     Resolve the given description to a single local version
  nvm version-remote <version>              Resolve the given description to a single remote version
  nvm deactivate                            Undo effects of `nvm` on current shell
  nvm alias [<pattern>]                     Show all aliases beginning with <pattern>
  nvm alias <name> <version>                Set an alias named <name> pointing to <version>
  nvm unalias <name>                        Deletes the alias named <name>
  nvm reinstall-packages <version>          Reinstall global `npm` packages contained in <version> to current version
  nvm unload                                Unload `nvm` from shell
  nvm which [<version>]                     Display path to installed node version. Uses .nvmrc if available

Example:
  nvm install v0.10.32                  Install a specific version number
  nvm use 0.10                          Use the latest available 0.10.x release
  nvm run 0.10.32 app.js                Run app.js using node v0.10.32
  nvm exec 0.10.32 node app.js          Run `node app.js` with the PATH pointing to node v0.10.32
  nvm alias default 0.10.32             Set default node version on a shell

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)

Downloading https://nodejs.org/dist/v8.9.3/node-v8.9.3-linux-x64.tar.xz...
######################################################################## 100,0%
WARNING: checksums are currently disabled for node.js v4.0 and later
Now using node v8.9.3 (npm v5.5.1)
Please run the following command:
source ~/.bashrc && nvm use --delete-prefix 8.9.3
  • On passe alors les commandes proposées à la fin
    • pour prise en compte dans le shell de démarrage du nouveau PATH
    • et passage via nvm installé à la version 8.9.3 téléchargée par le script précédent
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ source ~/.bashrc && nvm use --delete-prefix 8.9.3
Now using node v8.9.3 (npm v5.5.1)
# on vérifie:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ node --version
v8.9.3
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ npm --version
5.5.1
# on n'installera jamais nodejs depuid le gestionaire de paquets Ubuntu, leur version est broken
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ nodejs --version
Le programme « nodejs » n'est pas encore installé. Vous pouvez l'installer en tapant :
sudo apt install nodejs

Chargement des outils basés sur NodeJS

jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ npm i
.........................................
g++ -shared -pthread -rdynamic -m64  -Wl,-soname=binding.node -o Release/obj.target/binding.node -Wl,--start-group Release/obj.target/binding/src/binding.o Release/obj.target/binding/src/create_string.o Release/obj.target/binding/src/custom_function_bridge.o Release/obj.target/binding/src/custom_importer_bridge.o Release/obj.target/binding/src/sass_context_wrapper.o Release/obj.target/binding/src/sass_types/boolean.o Release/obj.target/binding/src/sass_types/color.o Release/obj.target/binding/src/sass_types/error.o Release/obj.target/binding/src/sass_types/factory.o Release/obj.target/binding/src/sass_types/list.o Release/obj.target/binding/src/sass_types/map.o Release/obj.target/binding/src/sass_types/null.o Release/obj.target/binding/src/sass_types/number.o Release/obj.target/binding/src/sass_types/string.o Release/obj.target/src/sass.a -Wl,--end-group 
  rm -rf "Release/binding.node" && cp -af "Release/obj.target/binding.node" "Release/binding.node"
make : on quitte le répertoire « /var/www/bofiptest/web/themes/custom/bofip_cog/node_modules/node-sass/build »
gyp info ok 

Installed in "/var/www/bofiptest/web/themes/custom/bofip_cog/node_modules/node-sass/vendor/linux-x64-57/binding.node"

> bofip_cog@0.1.0 postinstall /var/www/bofiptest/web/themes/custom/bofip_cog
> find node_modules/ -name '*.info' -type f -delete

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1125 packages in 91.948s
  • On voit ci dessus la compilation de source c pour la création de libsass librairie de compilation de SASS en CSS ?

on installe ensuite globalement le client gulp:

  • toujours en non root malgré l'option -g (g: global à $USER)
#on lance la commande du README.md
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ npm install -g gulp-cli
/home/jpmena/.nvm/versions/node/v8.9.3/bin/gulp -> /home/jpmena/.nvm/versions/node/v8.9.3/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@1.4.0
added 139 packages in 8.133s
#on vérifie l'installation
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ gulp --version
[16:14:23] CLI version 1.4.0
[16:14:23] Local version 3.9.1

la compilation des sources SASS et la génération KSS

  • On lance la comande gulp par défaut (voir Gulpfile.js)
# soit via le script build du package.json (il lance juste gulp)
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ npm run build

> bofip_cog@0.1.0 build /var/www/bofiptest/web/themes/custom/bofip_cog
> gulp

[16:24:27] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_cog/gulpfile.js
[16:24:27] Starting 'compile:sass'...
[16:24:27] Starting 'minify:css'...
[16:24:27] Starting 'compile:styleguide'...
[16:24:27] Starting 'lint:js-gulp'...
[16:24:27] Starting 'lint:js-with-fail'...
[16:24:27] Starting 'lint:css-with-fail'...
[16:24:28] Finished 'minify:css' after 402 ms
[16:24:28] Finished 'lint:js-with-fail' after 280 ms
[16:24:28] Finished 'lint:js-gulp' after 774 ms
Style guide build completed successfully!
[16:24:28] Finished 'compile:styleguide' after 891 ms
[16:24:28] Finished 'lint:css-with-fail' after 785 ms
[16:24:28] Finished 'compile:sass' after 1.23 s
[16:24:28] Starting 'build'...
[16:24:28] Finished 'build' after 18 μs
[16:24:28] Starting 'default'...
[16:24:28] Finished 'default' after 3.49 μs
#Soit via la commande Gulp elle même
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ gulp
[16:25:22] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_cog/gulpfile.js
[16:25:22] Starting 'compile:sass'...
[16:25:23] Starting 'minify:css'...
[16:25:23] Starting 'compile:styleguide'...
[16:25:23] Starting 'lint:js-gulp'...
[16:25:23] Starting 'lint:js-with-fail'...
[16:25:23] Starting 'lint:css-with-fail'...
[16:25:23] Finished 'lint:js-with-fail' after 275 ms
[16:25:23] Finished 'minify:css' after 586 ms
Style guide build completed successfully!
[16:25:23] Finished 'compile:styleguide' after 737 ms
[16:25:23] Finished 'lint:js-gulp' after 750 ms
[16:25:23] Finished 'lint:css-with-fail' after 731 ms
[16:25:24] Finished 'compile:sass' after 1.24 s
[16:25:24] Starting 'build'...
[16:25:24] Finished 'build' after 24 μs
[16:25:24] Starting 'default'...
[16:25:24] Finished 'default' after 2.31 μs
  • Suite à la compilation du SASS, on passe nettoie les caches Drupal:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web$ php ../vendor/drush/drush/drush.php cr
Cannot load Xdebug - it was already loaded
Cache rebuild complete.                                                                                                                                                                                                                                   [ok]
  • Et le résultat est probant:
    • (Comparer avec l'image initiale)

SousThemeCogAprescompilation.jpg

Commande watch pour le développement

  • En cours de DEV, c'est la commande watch qui nous intéresse:
    • toujours 2 façons de la lancer :
# directement via GULP
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ gulp watch
[16:36:37] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_cog/gulpfile.js
[16:36:37] Starting 'watch:sass'...
[16:36:37] Finished 'watch:sass' after 8.54 ms
[16:36:37] Starting 'watch:styleguide'...
[16:36:37] Finished 'watch:styleguide' after 3.95 ms
[16:36:37] Starting 'watch:js'...
[16:36:37] Finished 'watch:js' after 523 μs
[16:36:37] Starting 'watch'...
[16:36:37] Finished 'watch' after 12 μs
^C #on tape CRL+C pour stopper l'écoute des modifcation SASS
# indirectement par npm run build
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_cog$ npm run build watch

> bofip_cog@0.1.0 build /var/www/bofiptest/web/themes/custom/bofip_cog
> gulp "watch"

[16:38:12] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_cog/gulpfile.js
[16:38:12] Starting 'watch:sass'...
[16:38:12] Finished 'watch:sass' after 8.83 ms
[16:38:12] Starting 'watch:styleguide'...
[16:38:12] Finished 'watch:styleguide' after 3.45 ms
[16:38:12] Starting 'watch:js'...
[16:38:12] Finished 'watch:js' after 441 μs
[16:38:12] Starting 'watch'...
[16:38:12] Finished 'watch' after 12 μs
^C #on tape CRL+C pour stopper l'écoute des modifcation SASS

Développement de thème avec le Susy/SASS