Meny

Lukk

Magento 2 UI utviklings-automatisering med Gulp-basert Snowdog Frontools og Livereload

Implementering av frontend for Magento er allerede en utfordring i seg selv, men etter lansering av Magento 2 har dette blitt ekstra utfordrende. Etter å ha lest oss gjennom bunker av Magento retningslinjer, how-to og diverse forum, forstod vi at hele prosessen hadde behov for å bli automatisert så mye som mulig. 

Vi valgte rammeverket Zurb Foundation 6 for nåværende theme, som ble opprettet med "The Sass Way" Så, for at vi fullt ut skal kunne kompilere Magento 2 Theme (inkludert JS og avhengigheter) valgte vi Snowdog Frontools– ett sett med frontend verktøy for Magento 2 basert på Gulp.js. Nedenfor vil jeg beskrive de grunnleggende trinn for to varianter av automatisert Frontend Compile & Development med Gulp-basert hjelp fra Snowdog Frontools:

Grunnleggende retningslinjer for installasjon

1. Kjør Composer - krever snowdog/frontools
2. Gå til package directory /vendor/snowdog/frontools
3. Kjør npm install
4. Bestem deg for hvor du ønsker å beholde config filer. Du kan lagre dem i frontools config dir eller i /dev/tools/frontools/config. Det finnes et Gulp-oppsett som kopierer alle config prøvefiler fra config til /dev/tools/frontools/config og som skaper en praktisk symlink i prosjekt root. Hvis du ønsker å beholde config filer inne i frontools config dir, må du håndtere dette manuelt.
5. Definer dine Themes i themes.json

Frontend automatisering med Gulp av Snowdog Frontools og Livereload

  • Installer Snowdog Frontools fra Composer
  • Legg til noen justeringer for Gulp tasks (for å kopiere skreddersydd JS fra themet fordi Magento ikke klarer det, som standard i det minste, og ta kontroll over themet sine avhengigheter)

  • Installer Livereload og match det med målmappen som inneholder kompilert theme (for eks. "config.projectPath + theme.dest + '/' + locale")

  • Utfør gulp-watch i ProjectFolder/vendor/snowdog/frontools

  • Dra nytte av å ikke måtte refreshe siden manuelt hver gang du gjør en oppdatering!

 

For å kunne fullføre og perfeksjonere frontend theme-kompilering etter bin/magento setup: static-content:deploy, utvidet vi standard Snowdog oppgavesett med disse elementer: 

  • gulp copyjs - kopier alle JS-filer fra "config.projectPath + theme.src +'/web'" til "config.projectPath + theme.dest + '/' + locale" mappen.

  • gulp-bower- sjekk om "config.projectPath + theme.src" inneholder bower.json fil, og hvis ja, så krever "gulp-bower"-plugin en nedlasting av nødvendige avhengigheter (for eksempel jQuery, Foundation 6 og noen polyfills.) 

  • Etter dette utvidet vi standard gulp release kommandoen på følgende måte: plugins.runSequence ( 'clean', 'deploy', 'bower', 'copyjs', 'styles'); 
  • Fordelen: Fra nå av må vi kun kjøre tre kommandoer for å kunne kompilere alle Themes fra scratch:
    1.bin/magento setup:static-content:deploy i prosjektmappen
    2.gulp release i ProjectFolder/vendor/snowdog/frontools
    3.gulp-watch i ProjectFolder/vendor/snowdog/frontools

Eksempel på Gulp Bower Task Code:

'use strict';
module.exports = function() {

// Global variables
const gulp    = this.gulp,
      plugins = this.opts.plugins,
      config  = this.opts.configs,
      themes  = plugins.getThemes();

themes.forEach(name => {
  const theme = config.themes[name];

  plugins.fs.stat(config.projectPath + theme.src + '/bower.json',function(err, stat){
      if (err == null) {
        plugins.bower({
          directory: config.projectPath + theme.src + '/bower_components',
          cwd: config.projectPath + theme.src
        })
        .pipe(gulp.dest(config.projectPath + theme.src + '/bower_components'))
          console.log("bower: bower.json has found");
      } else {
          console.log("bower: no bower.json found - " + err.code);
      }
  });
});
};

Frontend automatisering med Gulp kun ved hjelp av Snowdog Frontools

Installer Snowdog Frontools fra Composer

  •  Setup config.projectPath/dev/tools/frontools/config/browser-sync.json med slike linjer: 

{"proxy":"projectName.local",  "files":"config.projectPath/pub/static/frontend/VendorName/ThemeName/locale/css/*"}

  •  Kjør gulp dev - -theme theme-name. Denne oppgaven omfatter browserSync og følger subtasks.

 Du tenker kanskje: "Hei, jeg tror måten uten Livereload ser ganske enkel ut!" - og ja, det er sant.  Men du må ikke glemme at denne metoden ikke tillater helautomatisert kompilering av theme frontenden. Du kan kun kompilere SCSS til CSS og må passe veldig godt på akkurat dette. Dessuten brukes da browserSync tasks som fungerer med proxy, og dette bremser ned hastigheten når siden refreshes. 

Selvfølgelig bør alle utviklere velge de metoder som passer deres behov best når det kommer til å implementere løsningene for sine kunder. Det er derfor vi valgte alternativet som inkluderer Snowdog Tools og Livereload. Det sparer vår tid under Theme kompilering og ikke minst, reduserer tiden for rutineoppgaver under Frontend implementeringen.