Issues with Grunt + browserSync on Windows

I feel sorry about two things right now :

  • For my French readers (do I have some at least ? :p ) who’s have difficulties with english
  • For having left behind my blog for few months …

But apologizes never made the things goes better, so let’s act a bit ! About the first point I’m afraid it will be a persistent problem, I will try as I said before to write my articles in English.

Let’s focus on the main subject

I built a Jhipster application (which is a Yeoman  project generator which basically creates a SpringBoot + AngularJS project) and I struggled with making Grunt fully work.

Note : Grunt is a client tool to help web developers with the front-end work. It bundles a project, make it run from another server, connected via a proxy (your back-end application running) and you can edit your HTML/CSS/JS files and see changes in real-time. It does some other stuff but I’m not a pro with it yet, so I’ll stick with the basic explanation.

I made a grunt build and grunt serve, and everything seems to work as expected but …

I had my SCSS files, modified it and correctly got my CSS files generated. Then I

The issue was caused by 2 trivial things but it was really a pain to debug, I’ll explain why.

For those who wants to skip my debug major steps, and want to try the final solution, you can directly read the solution part to the bottom.

The story :

I checked Gruntfile.js to track down some errors, but I was unable to find any. My file was compliant with some working examples of the Web. Here is the relevant part of the file :

        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        'src/main/webapp/**/*.html',
                        'src/main/webapp/**/*.json',
                        'src/main/webapp/assets/styles/**/*.css',
                        'src/main/webapp/scripts/**/*.js',
                        'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
                        'tmp/**/*.{css,js}'
                    ]
                }
            },
            options: {
                browser: "google chrome",
                watchTask: true,
                proxy: "localhost:8080"
            }
        },

I added in options a logLevel: "debug" in order to see some feedback in the console. But it seems all normal at all.

Firstly I thought it was a Grunt version error. So I updated it. Nope, don’t seems to change anything. I completly reinstalled the Grunt environment (Karma, PhantomJS, browserSync …) but it did change nothing.

I tried to modify the browser and to add firefox in the game, but no chance here too.

The solution :

The browserSync Windows implementation have hard time reading the ‘**’ in the paths provided. Compared to the MacOSx version which is fine with it. In fact, Windows interpret webapp/**/*.html  for matching files patterns as webapp/<whatever_directory>/<whatever_html_file>. But on browserSync documentation and Web resources, I only found the way to go with Linux and MacOSX browserSync implementations, which interpret it as a RECURSIVE directory search (so webapp/<whatever_directory>/…<optionnal_others/dirs>/<whatever_html_file> ). This is the trap, because no errors are being logged, the files are just not processed by browserSync. Hence modifying and adding paths of the watched files of browserSync, this way :

'src/main/webapp/*.html',
'src/main/webapp/**/**/**/*.html'

Now the HTML files will be looked for in the right folder (compare to the initial file).

And also, on modern browser the cache will prevent your HTML from refreshing when making changes to the source file.So open the Web Tool Kit (F12) and disable the caching system.

Rerun grunt serve and you should now see changes.

In the Gruntfile.js check your bsFiles or files paths.

 

 

I hope it can save some time to anybody here having trouble with BrowserSync on Windows.

Laisser un commentaire