search

SnowdogApps / magento2-frontools

Set of front-end tools for Magento 2 based on Gulp.js
MIT License
430 stars 142 forks source link

Gulp dev and watch doesn't work since 1.5 upgrade #223

Closed VincentMarmiesse closed 7 years ago

VincentMarmiesse commented 7 years ago

Hello,

First of all, thank you for your work, it's highly appreciated! I have upgraded the extension from ^1.4 to ^1.5 and both commands gulp dev and gulp watch doesn't work anymore. No error is raised, gulp just seems to wait but doesn't detect any change. All worked fine with the previous version.

gulp styles works perfectly.

Any thoughts?

Thanks!

Igloczek commented 7 years ago
  1. Check if you use 1.5.2.
  2. Did you installed fresh node.js dependencies?
  3. Could you share your themes.json?
VincentMarmiesse commented 7 years ago

Hi,

  1. Yes I am
  2. No
  3. {
"project_default": {
"src": "app/design/frontend/Project/default",
"dest": "pub/static/frontend/Project/default",
"locale": ["fr_FR"],
"stylesDir": "web/css"
}
}

As I said, it worked on previous version and gulp styles is working.

Thanks!

Igloczek commented 7 years ago

Could you send me your theme as a zip package to debug this issue? bartek.igielski@snow.dog

VincentMarmiesse commented 7 years ago

@Igloczek I just sent you a wetransfer ;)

VincentMarmiesse commented 7 years ago

Hello @Igloczek,

I just updated to 1.5.3 and still have the same issue, is it normal?

Thank you for your time!

Igloczek commented 7 years ago

1.5.3 isn't realted to your issues, but I didn't have enough time to investigate it.

adyry commented 7 years ago

@VincentMarmiesse I also have problem with 1.5 watchers, right now my solution is to stay with 1.4.5 (commit 87a12e86da6a0ea23fafd22295a7453584de1d31 ) What system do you use? After private talk with Igloczek we came to conclusion it might be related to OS, as it works fine on macOS and malfunctions on my Ubuntu 16.04. You might also want to try investigate cb1375d8308b204eb2e2ab0831dc51ba76f18843 which introduced watcher refactor.

VincentMarmiesse commented 7 years ago

Hi @adyry, I am on an Ubuntu 16.04 VM on a macOS, but it's Ubuntu which runs gulp so it seems to be coherent with what you say.

Thanks for the info!

Igloczek commented 7 years ago

Are you using Docker / Vagrant?

VincentMarmiesse commented 7 years ago

I'm using Parallels desktop, so I think it's quite the same technology behind.

JoostWan commented 7 years ago

Here the same problem. Version 1.5.3 installed. Gulp watch is running but nothing happens. System running is macOS Sierra.

mattgreenfield commented 7 years ago

I'm having this issue too. Gulp watch is detecting changes but it's not compiling my CSS.

When running gulp dev;

I'm on macOS Sierra. Frontools version 1.5.2

Could it be related to file names with leading underscores?

Igloczek commented 7 years ago

Could you guys open watch.js file and add console.log(path) bellow line 142 and confirm that it works while you made a change in any scss file?

If it works, the dependency tree builder can't parse your code in right way (mostly possible that you are writing @imports in other, not compatible away) and don't know which file to compile, even if they know there is a change in the source file.

VincentMarmiesse commented 7 years ago

I added the console.log(path) instruction, but where am I supposed to see this log?

Igloczek commented 7 years ago

Run watch task and you should see path of changed scss file in console.

VincentMarmiesse commented 7 years ago

Ok I see why I didn't see any log, the script never goes into the change section. The code under tempWatcher.on('change', path => { is never called.

Do you want me to log anything else?

Igloczek commented 7 years ago

😭 that's weird...

Could you try to this log in line 115

    tempWatcher.on('ready', () => {
      console.log(tempWatcher.getWatched());

It will print paths to all watched files in var/view_preprocessed/frontools directory.

VincentMarmiesse commented 7 years ago

Ok so now I have logs!

{ '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project': [ 'default' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default':
   [ 'Algolia_AlgoliaSearch',
     'Magento_Catalog',
     'Magento_Email',
     'Magento_LayeredNavigation',
     'Magento_Theme',
     'etc',
     'i18n',
     'media',
     'registration.php',
     'theme.xml',
     'web' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch': [ 'templates', 'web' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog': [ 'templates' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_LayeredNavigation': [ 'templates' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme': [ 'templates', 'web' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Email': [ 'email' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/etc': [ 'view.xml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/i18n': [ 'fr_FR.csv' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/media': [ 'preview.jpg' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web': [ 'css', 'fonts', 'images', 'js' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme/templates': [ 'html', 'messages.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme/web': [ 'favicon.ico', 'js' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch/templates': [ 'autocomplete', 'autocomplete.phtml', 'instant' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch/web': [ 'internals' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_LayeredNavigation/templates': [ 'layer' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog/templates': [ 'category', 'product' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Email/email': [ 'footer.html' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/css': [ 'main.css', 'main.scss', 'source' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/fonts':
   [ 'hind-bold-webfont.woff',
     'hind-bold-webfont.woff2',
     'hind-light-webfont.woff',
     'hind-light-webfont.woff2',
     'hind-medium-webfont.woff',
     'hind-medium-webfont.woff2',
     'hind-regular-webfont.woff',
     'hind-regular-webfont.woff2',
     'hind-semibold-webfont.woff',
     'hind-semibold-webfont.woff2' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/images':
   [ 'arrow-bottom-bold.svg',
     'arrow-bottom.svg',
     'arrow-up.svg',
     'broom.svg',
     'calendar-month.svg',
     'calendar-small-blue.svg',
     'calendar-small.svg',
     'calendar.svg',
     'chat.svg',
     'checklist.svg',
     'clock.svg',
     'coins.svg',
     'cross-close.png',
     'cross-close.svg',
     'handshake.svg',
     'left-arrow-without-dash.svg',
     'left-arrow.svg',
     'list.svg',
     'logo.svg',
     'logos',
     'map-pin-empty.svg',
     'map-pin-full-congress-blue.svg',
     'map-pin-full-curious-blue.svg',
     'map-pin-full.svg',
     'map-pin.svg',
     'menu.svg',
     'mini-logo.png',
     'mini-logo@2x.png',
     'next.svg',
     'previous.svg',
     'right-arrow-without-dash.svg',
     'right-arrow.svg',
     'search.svg',
     'settings.svg',
     'street-view.svg' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/js': [ 'project' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch/web/internals': [ 'common.js' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme/templates/html': [ 'breadcrumbs.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch/templates/autocomplete': [ 'category.phtml', 'menu.phtml', 'product.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Algolia_AlgoliaSearch/templates/instant': [ 'wrapper.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog/templates/category': [ 'products.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog/templates/product': [ 'list.phtml', 'view' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme/web/js': [ 'view' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_LayeredNavigation/templates/layer': [ 'state.phtml', 'view.phtml' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/css/source':
   [ '_global.scss',
     '_layout.scss',
     '_typography.scss',
     '_vars.scss',
     'blank',
     'components',
     'lib' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/images/logos':
   [ 'logo-aubade-big.png',
     'logo-aubade-big@2x.png',
     'logo-aubade.png',
     'logo-aubade@2x.png',
     'logo-coin-project.png',
     'logo-coin-project@2x.png',
     'logo-ebat.png',
     'logo-ebat@2x.png',
     'logo-facebook.svg',
     'logo-googleplus.svg',
     'logo-guide-artisan.png',
     'logo-guide-artisan@2x.png',
     'logo-le-materiel-electrique.png',
     'logo-le-materiel-electrique@2x.png',
     'logo-les-materiaux-big.png',
     'logo-les-materiaux-big@2x.png',
     'logo-les-materiaux.png',
     'logo-les-materiaux@2x.png',
     'logo-materiel-electrique-big.png',
     'logo-materiel-electrique-big@2x.png',
     'logo-pinterest.svg',
     'logo-share.svg',
     'logo-project-text.png',
     'logo-project-text@2x.png',
     'logo-twitter.svg',
     'mini-logo-aubade.png',
     'mini-logo-aubade@2x.png',
     'mini-logo-ebat.png',
     'mini-logo-ebat@2x.png',
     'mini-logo-ga-big.png',
     'mini-logo-ga.png',
     'mini-logo-le-materiel-electrique.png',
     'mini-logo-le-materiel-electrique@2x.png',
     'mini-logo-les-materiaux.png',
     'mini-logo-les-materiaux@2x.png',
     'site-recrutement.png',
     'site-recrutement@2x.png' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/js/project': [ 'checkbox.js', 'form.js' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Theme/web/js/view': [ 'messages.js' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog/templates/product/view': [ 'details.phtml', 'opengraph' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/css/source/blank': [ '_styles-l.scss', '_styles-m.scss' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/css/source/components':
   [ '_algolia.scss',
     '_appointment.scss',
     '_blog.scss',
     '_catalogrequest.scss',
     '_catalogsearch.scss',
     '_categories.scss',
     '_configurator.scss',
     '_contact.scss',
     '_findapro.scss',
     '_footer.scss',
     '_header.scss',
     '_homepage.scss',
     '_maps.scss',
     '_message.scss',
     '_news.scss',
     '_page.scss',
     '_product.scss',
     '_quality.scss',
     '_service.scss',
     '_shop.scss',
     '_sitemap.scss',
     '_slick.scss',
     '_terms.scss',
     '_widget.scss' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/web/css/source/lib': [ '_algolia.scss', '_slick.scss' ],
  '/media/psf/Home/www/project/var/view_preprocessed/frontools/frontend/Project/default/Magento_Catalog/templates/product/view/opengraph': [ 'general.phtml' ] }
Igloczek commented 7 years ago

It looks good, so the watcher is initialized properly.

Are you using some kind of network sync tool or any non-standard way of working with files, that might interrupt watcher?

Could you try to play with chokidar (lib responsible for the files watching) on you own to check if it works?

Igloczek commented 7 years ago

According to https://github.com/SnowdogApps/magento2-frontools/issues/236#issuecomment-316662614, you might want to try usePolling param. If it will help you, I'll add some option to enable it via tools configuration files.

VincentMarmiesse commented 7 years ago

Hello @Igloczek,

Indeed, adding usePolling: true to the tempWatcher initialization solved my issue! 🎉

Igloczek commented 7 years ago

Support for usePolling option added in 1.5.6 You have to create watcher.json file with config (same way as themes.json)