What are the advantages u have found using gulp inside ur projects?
I like working with Pug instead of HTML, SCSS instead of CSS and Babel instead of plain JS. Each of these require preprocessing to compile to plain HTML, JS etc.
Instead of running the CLI for sass and compiling files manually and then doing the same for Pug and Babel every time i want to see the results of my changes, I can use gulp to compile these on save and then automatically reload a browser window. If you’re working with node and making back end apps, it’s even more valuable.
You’ll save yourself tons of time at the cost of writing a small gulpfile. It’s a gift from the gods of code.
EDIT : I’m linking to the repo of my current side project: a remake of my portfolio after finishing the front end certificate (plus some React and Node projects). Gulp basically let’s you have the comfort of Codepen’s live reload on your own system. It’s fantastic.
Livereload is the main reason I started using it (only a week ago). I did find setting it up quite difficult and I am still not really happy with it. But it can do a lot of stuff for you: minifying images/files, compiling sass/less/jade etc.
BTW: reason I am not totally happy, is that I can’t get it to work well with my node app. The livereload (browser-sync plugin) is absolutely great, though!
I just use gulp (or grunt) for the reloading page ability it provides, other than that I found it such a hassle to maintain that I have been staying away from it entirely.
What am I missing?
If you only want to reload your files (and don’t need to compile, lint, optimize, etc) as you save, I’ve found Browsersync pretty useful. This below is pretty much all you need (from scotch.io):
browser-sync start --server --files "*.html, css/*.css"
My main uses for gulp is to compile my SCSS (autoprefix it too), concatenate my JS files if I have more than one, then I usually lint, then minify my files. I also pretty much just use one gulpfile and have a standardized folder/file structure (I like to output my compiled/minized code to a different folder) which made my life easier overall.
Hey guys, great info thanks for sharing
In short, it can automate mundane repetitive tasks so you can focus on higher level thinking + development.
You really should consider trying Webpack instead of gulp. It probably has a bit more of a learning curve but offers a much better user experience in my opinion.
I avoided Webpack for a while and built up some pretty big gulp files. I wish I had gone to Webpack much sooner.
I also like webpack better.
However, I’d still encourage people to learn gulp before learning webpack. For three reasons:
The easy learning curve
Understanding how build systems work
Learning gulp gave me a base to make comparisons to. I can better understand why people choose webpack over gulp. In fact, I actually learned Grunt first. Gulp was a godsend compared to Grunt lol.
That’s a good point. I agree that having used gulp gives me a better appreciation of Webpack. That said, if you’re ultimately going to be using Webpack, learning gulp might not be worth the time.
So, I have a workflow for Camper here:
Is base on Grunt but it’s similar to Gulp, I mean is doing the exacly the same stuff.
It’s doing the follow tasks:
- reload the browser each time your save your file
- Jade compilation to index.html, with different option(you choice)
- sass compitaltion css/main.scss to css/maincss
- each error in your code send an popup
Give him a try, it’s very easy to use.