18.
Task Order
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
Whoops, an error! Please, try again later.
12 Comments
Hey Ryan. Very detailed tutorial, thanks. Switched from Assetic to Gulp.
I have experienced small problem with browserSync and cache busting - browserSync forces full page reload with versioning in dev environment. (Instead of Css injection) So, I have modified config: (All files are commented)
https://github.com/nix23/gu...
Shortly, I have added/modified following:
1) Added ability to execute console commands in order with Pipeline class; (If some command fails, command execution stops)
2) Added browserSync Gulp integration with Css injection support;
3) Modified AssetExtension class - now css/js assets are versioned only in prod environment, because dynamic name change will force browserSync to perform full page reload instead of Css injection on sass/css file changes;
4) Extended FosJsRoutingBundle to override initialize method in dump command and inject target arg to InputInterface object. (We want apply versioning to 'fos_js_routes.js' file as well on production environment);
Hope, this helps someone. ;)
Cheers!
Wow, this is really great work! Thanks so much for sharing - a working example is worth 1000 (or more) words :). Cheers!
Hey Ryan,
I notice you don't talk about the ordering issue for the 'clean' task. How do you know it will be finished before the other tasks start ? If not, what tells us it is not going to erase newly compiled assets ?
Hey Nicolas!
GREAT question - so great that I also forgot why this works! The answer is that I'm using del.sync exclusively inside clean - this is actually a synchronous function - it blocks the "clean" task from finishing *until* all of these lines have run. Because of this, the next task can't start. This was done by design (idea adapted from Laravel's Elixir): it appears that Gulp doesn't exactly "start all the tasks" at the same moment. Instead, I believe it calls all of the tasks one by one, waiting for each callback function to fully execute. Of course, *most* callback functions to asynchronous work, but if it works synchronously, then it in fact blocks the next tasks from having their callback function executed.
If you're seeing anything different, let me know!
Cheers!
Thanks Ryan ! I am seeing exactly what you are describing :)
On a side note, seems like Gulp 4 will be deprecating sync tasks and adding easier ways to manager sequences, but your solution works great for me !
Hi,
I wonder if you know it there is any tool that allows optimizing css first time a page is visited.
The idea would be using some plugin like uncss in conjunction with assetic.
The thing is that a site can be very big, with several languages, domains, routes... instead of pre-generating the css, the idea is generate one single css per page but optimized without having to set up a configuration with all routes of the system.
Thanks in advance!
Samuel
Hi Samuel!
This approach makes sense, but I haven't seen anything like this in action before (doesn't mean that it doesn't exist, however). One thing to watch out for is that you really don't want 1 single, completely independent CSS file per page. That reason is that a large amount of CSS rules will likely be shared across *every* page, and if you re-package that CSS into a different file for each page, you're actually making your user download those CSS rules repeatedly.
So, you'd still probably want 1 consistent "site.css" file that is included on every page, and a separate page-specific CSS file for each page that needs it. In theory, you could get some system to automatically set that up (I've just not seen this yet). In practice, what I often do (or try to do) is create a main CSS file and then include page-specific CSS when I know I have certain CSS files that only apply to certain pages. This helps reduce the file of that "main" CSS file, but adds a little bit of complexity (you need to manually remember to include the page-specific CSS files on pages where you're using CSS selectors form it). I saw a presentation by Jonathan Snook once (https://twitter.com/snookca) who basically recommended only having 1 CSS file for your entire site. The reason is that they organize their CSS so well (by building re-usable components, instead of one-off CSS styles) that they don't really have enough "extra" stuff to merit needing to add extra optimization.
Cheers!
Really great Gulp series. I'll post a new comment (Or edit this if editing works when I get round to it) with my updates. I like Laravel Elixir's "notify" showing when things worked/failed (Although more for the failure than the success) so I plan to add in that part. If you are like me, you'll notice not necessarily notice anything has failed - even with plumber(). A tidy notification on error is quite useful I find. Mine is also slightly adjusted for Zurb Foundation 6 (http://foundation.zurb.com/) over Twitter Bootstrap/Font-Awesome (work/personal preference)
Thanks again for these series Ryan. Any chance of more front-end stuff for us backend developers who are occasionally forced to dabble in the realms of front end?
Hey David!
I totally agree with the notifications. When I first saw that, I thought it was totally unnecessary. But, when things fail 1 hour into your "watch" task running in the background... it starts to make more sense :D. I would love if you posted your solution here (or on gist) - I might be able to integrate part of it into an eventual update of this tutorial.
And yea, I think you nailed a big direction for us coming up: "Frontend for backend devs" - because it's not as easy as it once was, and *most* of us still don't have a dedicated frontend team to "dump stuff off to". Wouldn't that be nice :D. No concrete plans for that, but watch for them.
Cheers!
Hey Ryan,
Thanks for the run through with Gulp. I enjoyed it.
I was wondering, would working with Gulp be a better way to work with public asset files with Symfony instead of using Assetic and scssphp? Which would you recommend?
We are also probably going to be using a javascript framework, which also uses Gulp and Bower (or jspm). So, it almost makes more sense to use Node JS and Gulp for our public assets too. It just seems a bit like a sacrilege to use another server side language and server though. LOL!
Scott
Hey Scott!
Ah, glad you enjoyed it! You even found you way to the final few chapters that aren't totally finished yet (like this one) ;). We'll have the videos up for those very shortly.
My overall opinion is that the nodejs tools have matured so far that they *are* the best way to do things now. They're also young, so it means that more stuff is still being "figured out", so certain things end up being difficult or confusing. Still, I think for many people, this stuff is the right choice. Assetic is still good if you're really new to this nodejs stuff still or have a simple setup. If you make the leap, I think you will hit some speed bumps, but I think it'll be worth it. For years, bigger companies I've worked with have tried Assetic, then used something else (e.g. Compass directly) after awhile.
I hear you on the server-side language thing - the fact that I promote "server side JavaScript" on a PHP tutorial site doesn't escape me ;).
Cheers!
Yep.:D Exactly what I meant and thought too. But who are we to stand in the way of progress? Thanks!
Edit - on a completely different subject. I just actually won a version of PHPStorm and was playing with it and noticed it isn't "dumbed down" like how your version is showing it. (You do use PHPStorm in the videos, correct?) Is that "mode" or customization also how you use it to develop? Because, to be honest, for me, getting rid of all the clutter that you aren't currently actually using simply helps with concentration and probably why so many devs just use a plain editor to code with, instead of IDEs. LOL!
Not sure it would work, but could you share your config for PHPStorm (export settings)? I am currently a Netbeans user (which I have customized considerably, but it is also still cluttered) and was hoping to get PHPStorm down to like how you show it in the videos. However, customizing PHPStorm isn't the easiest of tasks. (and neither is customizing Netbeans either;-)), but why invent the wheel a second time?:-D
Scott
"Houston: no signs of life"
Start the conversation!