gulp and js

[starchild]

I realise this is not a helpdesk as such, but I figure this working, will be of great benefit to everyone else using the framework...

I'm trying to get gulp watch working with js files, and it just seems to run the scripts task in an endless loop. The task should concatenate any js file in main/assets/js/*/, create the scripts.js and then rename and minify.

instead it just loops and loops. Dependencies have been installed using: npm install gulp-concat gulp-rename gulp-uglify --save-dev as shown on https://codehangar.io/concatenate-and-minify-javascript-with-gulp/

What is wrong in here?

The initial build creates the js files just fine - it seems the "watch" command creates the loop;

Again, feel free to decline to answer, but i really do think it will be of great help to anyone else.

Thanks in advance.

gulpfile.js.zip

[starchild]

edit: I've solved this by simply changing the dest path to be outside of the source path.

Anyone else wanting to use gulp to combine the js files in the framework can use this gulpfile instead. gulpfile_fixed.js.zip

[claudia-romano]

Hi @starchild thanks for posting this solution. We are looking into it and see if we can include it in the gulp file of the framework. The downside of this approach is that you cannot control the order of the js files.

For example, if you are importing the slideshow component, you would need to include the swipe-content component as well (and make sure to include its js before the one of the slideshow for it to work properly).

Did you find a solution for that as well? Thanks.

[starchild]

Hi,

The file I posted is already my amended version of the CH gulpfile.

I worked out that by default, gulp will concat the js files based on alpha-numeric order, so all I had to do was rename the utils file to 1.0-util.js and it would be at the top of the output. Simple file renaming works a treat.

I saw there is also https://github.com/sirlantis/gulp-order if you want to define manually, but I don't want to do that, and the simple numbering/file naming hack works best for me - then i can just drag and drop the files into the folder and gulpwatch does the rest.

Also, it is possible to exclude the output files in the watch script if you want to keep all js files in the one folder (and not create an infinite loop), but moving the output to a new folder works just fine too.

[claudia-romano]

I see. Thanks for posting your solution.