Kun kehität MyCashflow-teemaa, voit helpottaa työtäsi suuresti synkronoimalla lokaalien teematiedostojen muutokset automaattisesti verkkokaupan tiedostohakemistoon. Tämä onnistuu kaikkein helpoiten käyttämällä mycashflow-sync-työkalua.

Ominaisuudet

mycashflow-sync on Node.js-pohjainen komentorivityökalu, jonka avulla voit synkronoida omalla tietokoneellasi ja verkkokaupan hakemistossa sijaitsevat teematiedostot joko automaattisesti tai manuaalisesti.

Synkronointi on kaksisuuntainen, eli työkalu sekä lähettää että lataa tiedostoja verkkokaupan ja lokaalin ympäristön välillä. Synkronointi tehdään tiedoston iän perusteella: uudempi tiedosto ylikirjoittaa aina vanhemman. Ohjelma ei koskaan poista tiedostoja.

Ohjelma voi suorittaa tarvittaessa myös SASS-tiedostojen automaattisen käännöksen CSS-tyyleiksi ennen synkronointia.

Lisäksi mycashflow-sync näyttää kehitettävästä teemasta selainesikatselun (Browsersync) aina synkronoinnin yhteydessä.

Vaatimukset:

Voit käyttää työkalua millä tahansa käyttöjärjestelmällä, johon on asennettu Node.js (4.0.0 <= versio < 10) ja npm-pakettienhallinta.

Kehitettävän teeman on oltava kehitystilassa, jotta synkronointi toimii. Kehitystila asetetaan käyttöön määrittämällä {MinifyCSS}- ja {MinifyJS}-tageille attribuutti mode:'development'.

Verkkokaupassa on oltava käytössä FTP-yhteys, jonka saat asentamalla Web Designer -laajennuksen.

Asennus ja käyttöönotto

Avaa terminaali ja asenna mycashflow-sync seuraavan komennon avulla:

npm install -g mycashflow-sync

Kun työkalu on asennettu, luo uusi teemakansio, navigoi sinne ja määritä teeman synkronointiasetukset seuraavilla komennoilla:

mkdir teemakansio
cd teemakansio
mycashflow-sync init

Ohjelma kysyy sinulta seuraavat tiedot (pakolliset lihavoitu):

  • FTP-palvelin ja -portti (käytä oletusarvoja)
  • Käyttäjätunnus
  • Salasana

    FTP-käyttäjätunnus ja -salasana ovat saatavilla Web Designer -laajennuksen asetuksissa.

  • Verkkokaupan oletusosoite (esim. https://KAUPANNIMI.mycashflow.fi)
  • Teemakansion sijainti

    Esim. themes/shop/teemakansio tai themes/email/teemakansio

    Jos verkkokaupan tiedostohakemistossa ei vielä ole teemakansiota, luo se ja anna sen nimi synkronoinnin asetuksiin.

  • SASS-lähdekansio suhteessa teeman juurikansioon (esim. styles/scss)

    Jos asetat SASS-kansion, mycashflow-sync kääntää SASS-tiedostot automaattisesti CSS-tyyleiksi aina synkronoinnin yhteydessä.

    Jos et käytä SASS-tyylejä, voit jättää SASS- ja CSS-kohdat tyhjiksi.

  • CSS-tyylikansio (esim. styles)

    mycashflow-sync sijoittaa SASS-tiedostoista käännetyt CSS-tyylit tänne automaattisesti.

Kun olet määrittänyt synkronointiasetukset, voit suorittaa manuaalisen synkronoinnin tai asettaa työkalun seuraamaan muutoksia teeman tiedostoihin.

Jos sinun tarvitsee muuttaa synkronointiasetuksia, voit määrittää ne muokkaamalla teemakansioon luotua sync.json-asetustiedostoa. Ohessa esimerkki mahdollisista asetuksista:

{
	"ftp": {
		"host": "ftp.mycashflow.fi",
		"port": 21,
		"user": "<username>",
		"pass": "<password>"
	},
	"sync": {
		"url": "https://KAUPPA.mycashflow.fi",
		"path": "themes/shop/teemakansio",
		"ignore": [
			"./ignored/directory",
			"./*.scss",
			"./*.css.map"
		]
	},
	"sass": {
		/*
		* Syötä tähän tyylitiedostokansioiden sijainti
		* suhteessa teeman juurikansioon
		*/
		"source": "styles/scss",
		"dest": "styles"
	}
}

ignore-taulukossa voit määrittää tiedostoja tai tiedostotyyppejä, joita ei synkronoida.

Selainesikatselu (Browsersync)

mycashflow-sync näyttää aina synkronoinnin yhteydessä verkkokaupasta esikatselun verkkoselaimessa.

Jos annoit synkronointiasetuksissa verkkokaupan osoitteen https://-alulla, näet todennäköisesti selaimessa varoituksen suojaamattomasta yhteydestä. Ohita varoitus päästäksesi katsomaan esikatselua.

Teematiedostojen synkronointi

Kun olet määrittänyt teemakohtaiset synkronointiasetukset, voit synkronoida lokaalit ja palvelimella sijaitsevat tiedostot seuraavalla komennolla:

mycashflow-sync sync

Tällöin jokaisen tiedoston uusin versio ylikirjoittaa vanhemman ja kaikki uudet tiedostot lisätään, jos ne puuttuvat palvelimelta tai lokaalista kansiosta.

Synkronointi on kaksisuuntainen, eli työkalu lähettää tiedostoja palvelimelle ja lataa niitä lokaaliin ympäristöön.

Mikäli kaupan palvelimella sijaitsee uudempi versio tiedostosta, se ylikirjoittaa vanhemman lokaalin tiedoston.

Synkronointi ei koskaan poista tiedostoja.

Muutosten seuraaminen

Seuraavalla komennolla voit asettaa mycashflow-syncin seuraamaan muutoksia teeman tiedostoihin ja suorittamaan synkronoinnin automaattisesti, kun jokin tiedosto muuttuu:

mycashflow-sync watch

Tällöin sinun ei tarvitse ajaa synkronointikomentoa aina kun teet muutoksia, vaan saat muutokset näkymään teemassa heti kun olet tallentanut tiedoston.

mycashflow-sync seuraa muutoksia sekä lokaaleihin että verkkokaupan tiedostohakemistossa sijaitseviin tiedostoihin.

mycashflow-sync-työkalun käyttäminen sähköpostiteemoissa

Jos haluat käyttää mycashflow-sync-työkalua yhdessä oletussähköpostiteeman kanssa, sinun on suoritettava build ja synkronointi eri välilehdillä:

  1. Avaa yhdelle välilehdelle mycashflow-sync watch.
  2. Aja aina tarvittaessa npm run build toisella välilehdellä, jolloin mycashflow-sync lähettää tekemäsi muutokset palvelimelle.

mycashflow-sync ei käännä sähköpostiteeman SASS-tiedostoja CSS-kielelle. build-komento hoitaa SASS-tyylien kääntämisen.

Browsersync ei toimi sähköpostiteemojen kehittämisessä.