Sttartter FrontEnd Static/WP geré via un Rakefile

Publié le 21 Sep 2016 par Tony

Depuis un moment, je travaille sur un starter (Sttartter-static-evn) pour faciliter mes projets d'intégration. Un starter maison qui compile via gulp, avec pug (ex Jade) pour le templating html. (Pug est un moteur de template performant fortement influencé par Haml et mis en œuvre avec JavaScript pour Node.js et navigateurs.)

Le build compilé d’origine est visible à cette adresse : http://lab.tnytr.me/sttartter.build/ . J’ai pris le parti d’inclure via NPM les ressources liées au core du starter et via Bower pour toutes les ressources qui concernent le front avec une rétrocompatibilité des navigateurs : IE10 - FF 3 - Safari 7 - Chrome 3. Mobile friendly.

Voici les librairies installées js/css par défaut :

LIB JS : jQuery, Modernaizr (CDN), Html5shiv (CDN), Owl.carousel, Magnific-Popup, Velocity.js, Jssocials, isMobile LIB SCSS : Bourbon/Neat, Animate.css, Font-awesome

Je l’ai travaillé comme un styleguide avec 8 sous rubrique :

  • Intro, qui présente les bases
  • Layout, pour l’affichage des grilles et table dispo
  • Typographie, pour les titres, paragraphes, liste et autres
  • Color, pour les codes couleurs
  • Form, buttons pour la partie UI des formulaires
  • Elements, pour la gestion du contenu média (image, map, icône …)
  • Plug & tool, pour l’affichage des sliders, modal, et divers snippet JS …

Bon OK pour le static mais pourquoi WP dans le titre et pourquoi rakefile ?

C’est là où j’ai pas mal réfléchi à comment pouvoir utiliser mon starter maison dans un projet Wordpress. Je me suis arrêté sur la possibilité de générer mes projets (static ou wordpress) via un rakefile. J’ai donc créé un dépôt Git nommé sttartter-wp-env, avec tout ce dont j’avais besoin pour faire tourner Wordpress en local dans de bonnes conditions, avec les plugins que j’utilise couramment, mais aussi pouvoir gérer les environnements (dev/stage/prod) et les déploiements. Je vais détailler mon rakefile après. J’ai également créé un autre dépôt Git nommé sttatter-wp-blanktheme qui reprend le Dom/Bem définies dans sttartter-static-env.

Comment se compose/comporte mon rakefile :

Une partie de question/réponse va gérer la façon dont les projets sont clonés/générés. Dans le terminal, je commence avec un :

$ rake start projet="nomduprojet"

qui me lance via :

desc "Add new project"
task :start do
-- Rake::Task["sttartttask"].invoke
end

la fonction suivante :

desc "Sttartttask"
task :sttartttask do
-- puts "Projet Wordpress ou Static(W/S)?"
-- get_input_chooseproject
end

Là, 2 choix sont possibles via :

def get_input_chooseproject
-- STDOUT.flush
-- input = STDIN.gets.chomp
-- case input.upcase
-- when "W"
---- Rake::Task['wordpresstask'].invoke
-- when "S"
---- Rake::Task['statictask'].invoke
-- else
---- puts "Please enter W, S"
---- get_input_chooseproject
-- end
end

Si je réponds (gentiment) S, la fonction ‘statictask' est lancée :

task :statictask do
-- puts "Démarage d'un projet static"
-- folderproject = ENV['projet']
-- system "git clone --depth=1 [email protected]:********/sttartter-static-env.git dev.#{folderproject}"
-- Dir.chdir("dev.#{folderproject}") do
---- system "rm -rf .git"
---- system "npm install"
---- system "bower install"
---- system "gulp build"
-- end
-- get_input_gitinitbitbucket
end

Ce qui a pour effet de cloner mon repo starter-static-env dans un dossier nommé dev.folderproject, de supprimer le dossier .git, de lancé les tache npm install, bower install et gulp build. Remarquez le get_input_gitinitbitbucket. Il permet de versionner directement le projet sur bitbucket, grâce a son API, via la fonction suivante :

def get_input_gitinitbitbucket
-- puts "Versionner le projet sur bitbucket (Y/N) ?"
-- STDOUT.flush
-- input = STDIN.gets.chomp
-- case input.upcase
-- when "Y"
---- Rake::Task['gitinitbitbucket'].invoke
-- when "N"
---- puts "OK pas de versionning alors ;)"
-- else
---- puts "Please enter Y or N"
---- get_input_gitinitbitbucket
-- end
end

Du coup si Y (yes), ça lance :

task :gitinitbitbucket do
-- folderproject = ENV['projet']
-- Dir.chdir("dev.#{folderproject}") do
---- system "git init"
---- system "git add -A ."
---- system "git commit -m 'Initial commit'"
---- system "curl --user USER:APIXXXXXXX https://api.bitbucket.org/1.0/repositories/ --data name=dev.#{folderproject} --data is_private='true'"
---- system "git remote add origin [email protected]:******/dev.#{folderproject}.git"
---- system "git push -u origin --all"
---- system "git push -u origin --tags"
-- end
end

Sinon : OK pas de versionning alors ;) Revenons à notre première question : Projet Wordpress ou Static(W/S) Si je réponds (gentiment) W, la fonction ‘wordpresstask' est lancée :

task :wordpresstask do
-- puts "Démarage d'un projet Wordpress"
-- folderproject = ENV['projet']
-- system "git clone --depth=1 [email protected]:********/sttartter-wp-env.git dev.#{folderproject}"
-- Dir.chdir("dev.#{folderproject}") do
---- system "rm -rf .git"
---- system "composer install"
-- end

-- system "svn co https://core.svn.wordpress.org/trunk/ dev.#{folderproject}/wp"
-- Dir.chdir("dev.#{folderproject}/wp") do
---- system "rm -rf .svn"
-- end

-- system "git clone --depth=1 [email protected]:********/sttartter-wp-themes.git dev.#{folderproject}/wp-app/themes/#{folderproject}"
-- Dir.chdir("dev.#{folderproject}/wp-app/themes/#{folderproject}") do
---- system "rm -rf .git"
---- system "rm -rf .gitignore"
-- end

-- system "git clone --depth=1 [email protected]:********/sttartter-static-env.git dev.#{folderproject}/wp-app/themes/#{folderproject}/assets"
-- Dir.chdir("dev.#{folderproject}/wp-app/themes/#{folderproject}/assets") do
---- system "rm -rf .git"
---- system "npm install"
---- system "bower install"
---- system "gulp build"
-- end

-- system "svn co https://plugins.svn.wordpress.org/wordpress-seo/trunk/ dev.#{folderproject}/wp-app/plugins/wordpress-seo"
-- Dir.chdir("dev.#{folderproject}/wp-app/plugins/wordpress-seo") do
---- system "rm -rf .svn"
-- end

-- system "svn co https://plugins.svn.wordpress.org/breadcrumb-navxt/trunk/ dev.#{folderproject}/wp-app/plugins/breadcrumb-navxt"
-- Dir.chdir("dev.#{folderproject}/wp-app/plugins/breadcrumb-navxt") do
---- system "rm -rf .svn"
-- end

-- system "svn co https://plugins.svn.wordpress.org/wp-pagenavi/trunk/ dev.#{folderproject}/wp-app/plugins/wp-pagenavi"
-- Dir.chdir("dev.#{folderproject}/wp-app/plugins/wp-pagenavi") do
---- system "rm -rf .svn"
-- end

### et ainsi de suite ....

-- get_input_woocomerce
-- get_input_gitinitbitbucket

end

Ce qui a pour effet de cloner mon repo starter-wp-env dans un dossier nommé dev.folderproject, de supprimer le dossier .git, de lancé la tache composer installe (pour la gestion de multi-env (phpdotenv). Puis l’installe du core de wordpress dans le folder /wp (oui je sépare le core WP du content). Ensuite le clone du mon starter-wp-theme dans wp-app/themes/nomduprojet, dans lequel je clone mon starter-static-env dans un dossier nommé assets (avec les mêmes options que pour la fonction statictask : taches npm/bower/gulp build). Et pour finir les différents plug que j’utilise régulièrement (pour gravity form et ACF pro, j’ai créé des repo dédiés) J’ai ajouté une condition woocomerce qui fonctionne comme pour le versionning a savoir :

def get_input_woocomerce
-- puts "Projet woocomerce (Y/N)?"
-- STDOUT.flush
-- input = STDIN.gets.chomp
-- case input.upcase
-- when "Y"
---- Rake::Task['woocomtask'].invoke
-- when "N"
---- puts "OK pas de woocommerce alors ;)"
-- else
---- puts "Please enter Y or N"
---- get_input_woocomerce
-- end
end

Si Y alors :

task :woocomtask do
-- folderproject = ENV['projet']
-- puts "Clone de woocommerce en cours ..."
-- system "git clone --depth=1 https://github.com/woothemes/woocommerce dev.#{folderproject}/wp-app/plugins/woocommerce"
-- Dir.chdir("dev.#{folderproject}/wp-app/plugins/woocommerce") do
---- system "rm -rf .git"
-- end
end

À noter, pour chaque clone je supprime les infos liées au versionning (.svn et .git).
Je précise aussi que j'ai ce genre de condition pour middleman, pour la génération de newsletter via un snipet maison MJML et que cela peut également marcher pour Drupal (c'est en cours …
Le temps de prendre un café et j'ai un environnement WP de prêt.
Ps : Merci à Joël (#teamgreaaat) pour la relecture.

Tony.

comments powered by Disqus