Gulp! Refreshment for Your Frontend Assets

Hey Shairyar,

I have worked with npm and can help answer your questions:

1) I would keep everything that is in your node_modules folder. A lot of times when you install something using npm, it will also load any other dependencies that package may require. It's a lot like Composer for the front-end.
2) You don't have to upload the folder. If you have dependencies in the node_modules folder that your project requires, you can install node on your production server and just run `npm install` and all of your dependencies with be installed on your server. Again, this is a lot like Composer. You just need to pay attention to whether or not you link to any assets in your node_modules folder. Usually, I do not use npm for assets. Instead, I use Bower, so I know that I do not have to upload my node_modules folder and I don't have to run `npm install` on my production server. I simply use it for Gulp and that just helps me while in development, not in production.
3) You could move it inside of your vendor folder, but most of the time, all of the things in your node_modules folder are not dependencies, unlike the things in the vendor and bower_components folder. This is more of a personal preference, but I would keep them separated.

Hi Deric,

Many thanks for the information. Ya i don't think i will be uploading the node_module either as i am just using gulp to merge and compress files.

I am really beginning to enjoy gulp and bower :)

Regards,
Baig

Hey Baig!

Can I call you Baig - I saw you signed with that this time :)

1) Yep, this directory can get *huge* - it's just how npm is designed. But, it doesn't even need to be deployed (if you build your assets locally first) - you could ignore it from your deploy. And yes, node is famous for having many, many sub-directories. It's kinda crazy :). Btw, make sure you have the latest npm - *some* of this has changed I believe (but I think it's still huge).

2) Nope - well, not if you build your css/js first (which I do). If you do that, you can just deploy those generated css/js files and completely ignore the node_modules directory

3) A quick googling makes this unclear, surprisingly. But, I would keep it anyways - it helps other people understand your project more quickly - many people understand what will live in node_modules. I sometimes move the bower directory because I want it in my web directory (and btw, it seems bower is being used less and less, and things like npm + browserify are being used instead: https://lincolnloop.com/blo.... But, I haven't switched over just yet :).

Cheers!

Hi Ryan,

Yes you can call me Baig :)

Thanks for getting back to me. Sad to hear that gulp is being used less as i just learnt it :)

Are you planning to create a tutorial on npm + browserify?

Baig

Hi Shairyar,

if you use bower, then your packages will get updated automatically on new package installation, which is pain. Solution is eaither use npm to manage packages or use git to keep track. It does not work like composer.

for this reason and many other, people are moving to webpack.

Yep, webpack and browserify are "competitors" - though I just read an article today that said that webpack seems to be winning.

However, I'm not sure that "gulp" is necessarily going away - browserify/webpack can be used *inside* of gulp - i.e. https://webpack.github.io/d.... If you read the first comment there, there's some discussion about this :).

Anyways, yes, I'd like to make a "2.0" version of this tutorial - the JS world moves so quickly :). But I have a few other tutorials that need to get done first.

Cheers!

thanks for sharing the information, that really sounds like a pain.

Hey @majk!

Hmm, not exactly for Symfony. What you would do is:

A) Find a JavaScript library that is able to create a slideshow
B) Use Symfony/Twig to render the images that you want in a way that the JavaScript library requires.

By the way, next week we'll be starting a tutorial about file uploading, in case it's useful: https://symfonycasts.com/sc...

Cheers!

Hey Hitesh Vaghela

Have you tried Basit's solution? https://knpuniversity.com/s...

Cheers!

Nop as he is not 100% sure. So temporarily I found a workaround. I am maintaining two different manifest files for css and js and reading them from same function via parameter. I know its not the best solution but it works for me. At least for this project.

Yo Hitesh Vaghela!

Yea, it's a good workaround. There's an annoying race condition I believe, between multiple pipelines (e.g. js & css) all trying to write to the manifest. I thought I had fixed this before recording the tutorial, but apparently not :/. I believe it's a bug in the manifest library itself, as it's supposed to not do this. Basit's solution makes a lot of sense (running the tasks in parallel, but since he says it still happens sometimes, it sounds like there's yet another race condition somewhere. Very annoying - I apologize. I'm not sure what the solution is. I now use Webpack in place of Gulp in my day-to-day.

Cheers!

Haven't yet tried Webpack. Is it better than Gulp? And will we get a web series on that?

Hey Hitesh,

Yep, it's trendier and definitely better. Actually, it has a different approach - it allows you *requiring* JS files like you did in PHP. And yes, we already have! The course has been even completely released, check it out here: https://knpuniversity.com/s...

Cheers!

Thanks. I have decided to go with your version, which covers everything. Just one question I had. You haven't mention about how to make sure clean is done first, before others function start running.

since everything required on promise and clean does not have such. I have just return true on clean task, would it work fine with return true, to make sure clean is run first and then others.

btw, if you add requireJs also on this tutorial. It will complete the set. but for those who were interested in requirejs to complete the set, following is link for slideshow by Ryan http://www.slideshare.net/w...

Hey Basit!

Great! Let me know how you like things!

About clean. I believe what you're saying is that the "clean" task does not return a promise, so there's no guarantee that it will clean will finish before the other tasks start. Your logic is correct, however, the clean task (I believe) is special because I use the "del.sync" - which deletes things *synchronously*. In other words, unlike everything else that gulp is doing, each line in clean waits to finish before it goes to the next line. The result is that the clean function doesn't actually finish until all of its tasks are actually done. This means that it will finish before the others start.

If you're seeing something different, let me know! But it's very good of you to notice that this function appears to behave different than the others :).

Cheers!

Yea, I *do* have Elastic specifically in mind. I need to integrate it anyways with our search to make it a lot more awesome. When I do that, I'll put a tut on it :)

I'm using same technique, have same problem.

You can overcome by providing finish condition on each task, so don't run other until first is finished, then dont run third, until second is finished.

gulp.task('styles', ['fonts'], function...

gulp.task('scripts', ['styles'], function()

gulp.task('watch', ['styles', 'scripts'],...

This will help you a lot, but it is still not 100% accurate, because I do get still problem time to time.

Thanks Basit I will give this idea a try.

Hey Shairyar!

It sounds like the "race condition" we talk about here: https://knpuniversity.com/s...

Does it happen during the "watch" task? I mean, if you run gulp, does it compile correctly at first, but then *later* the rev-manifest.json becomes broken after you update some CSS or JS files? Or, does it happen only when initially running gulp? My guess is that there's still a race condition somewhere... Also, make sure you have the merge: true option on the manifest (I'm guessing you do, else you would see this problem constantly).

Let me know what you see!

It happens randomly, if i open up a project and run the command gulp first time there is a chance that it will be successful but then there are times even the first gulp command does not work, i have to keep trying it 7 to 8 times to get it to work.

The same happens if i am in the middle of the project and make a change to the css or js file there are times the manifest does not get updated then i have to manually stop and run gulp again which takes 7 to 8 times to get going again or if i am lucky the first try will work.

Hey Shairyar!

Oh wow, that just sounds buggy :/. With the "merge: true", the manifest plugin should only *update* the file, and not override it. And with the pipeline, we should not have race conditions if you have multiple CSS or JS files. I do wonder if Shairyar Baig recommendation will help here - the only thing I can think of is a race condition between the CSS and JS processes themselves. If that *does* help, I'd love to know.

Cheers!

ya, i will try that and see if that helps.

Hey Mark!

Yep, you'll need 2 things for the Twig extension, and both (as you probably already know) are on this page: https://knpuniversity.com/s...

1) You'll need the finished, AssetVersionExtension class itself - check out the code-blocks
2) You'll need to "steal" the YAML code from the services.yml file and put it into *your* services.yml file. That code is also on the linked page, but I just realized that we're "hiding" the good parts. I'll fix that right now - but you can find the services.yml on that page and click the little errors to expand and see the entire file.

If you're new to registering things as services, and this "tags" thing, I encourage you to check out http://knpuniversity.com/sc... and http://knpuniversity.com/sc... - those will really help you feel comfortable :).

Cheers!

Thanks a lot for ur quick reply Ryan,

thats what i was wondering, since i dont have a services.yml file...i guess i need to install symfony to the gulp project folder to make it work?. i will try to figure it out. i am working on a gulp project that outputs html and/or craft templates..so i dont have to migrate the site to craft afterwards..if u are interested i will post it once i am done...if i get lost with the yml file and sznfony i will get back to u ..thanks again :)

Hey Mark!

Ah, I see! So you certainly don't need Symfony to do this - this was just the approach if you *are* in Symfony :). Basically, one way or another, you just need some dynamic code (e.g. PHP) that's able to read that rev-manifest.json file and map each file name (e.g. main.css) to its current revision filename (e.g. main-123abcd.css).

Let me know how I can help - and of course it's always great when people are able to share their solutions! I look forward to it.

Cheers!

Yes, the frontend world moves so fast!

I Agree soo much with Ryan on this. Angular 3 is coming out soon. No? well wait and check again lol. No really. once you done learning one thing, there is new thing that replaced the thing you learned lolz.