In addition to producing various helpful apps for web developers, in 2012, we’ll also be commissioning and releasing smaller plugins and extensions. Today, I’d like to announce the first entry in this initiative: “Nettuts+ Fetch” – a Sublime Text plugin.
The 20 Second Example
Choose 720p for a clearer picture.
The Dilemma
Let’s say that you’re a fan of Normalize.css. Perhaps, you download it and save it to a snippet, or store the stylesheet, itself, in an assets folder. That way, for future projects, you only need to copy and paste.
The only problem with this method – as we’ve all discovered – is that, if a few months have passed, it’s more than possible that the asset (in this case, Normalize.css) will have been updated by the creator. So your options are to either use the, now, out-dated version of Normalize, or, once again, return to the GitHub page and pull in a fresh copy. This all seems tedious.
The Solution
Created by Weslly Honorato, Nettuts+ Fetch is the solution to our dilemma.
I thought to myself: “What if there was a plugin that would automatically pull in the latest copy of a file, simply by typing a keyboard shortcut. It’ll perform a curl request to your specified URL (saved away for future use), and allow you to rest assured that, for all new projects, you’re using the latest copy of a particular asset.
Created by Weslly Honorato, Nettuts+ Fetch is the solution to our dilemma.
Installation Instructions
While you can manually download Nettuts+ Fetch from GitHub, the easiest way to set it up is through Package Control (which all ST2 users should be using). Once you’ve installed package control, press ctrl+shift+p (Windows, Linux) or cmd+shift+p (OS X), and type “Package Install.” Next, search for “Nettuts+ Fetch,” press enter, and you’re done. Simple.
Usage
You’ll only use two commands, when working with Fetch. First, we need to save some file references. Again, bring up the command palette, and search for “Fetch.” For now, choose “Manage Remote Files.”
What’s great about Sublime Text 2 is that configuration is incredibly simple. To assign references to online asset files, we only need to create an object, like so (don’t worry; one will be pre-populated for you, after installation):
So, to pull in the latest copy of jQuery (if you don’t want to use a CDN):
{
"files":
{
"jquery": "http://code.jquery.com/jquery.min.js"
}
}
Packages
Even better, I can pull in entire packages, or zip files. What if we want to start a new project, using HTML5 Boilerplate? In that case, we add the reference to the “packages” object.
{
"files":
{
"jquery": "http://code.jquery.com/jquery.min.js"
},
"packages":
{
"html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
}
}
Fetch, Boy
Now that we have a package and script saved (add as many as you like), we can pull them in by using the Fetch command. Pull up the command palette – ctrl+shift+p (Windows, Linux) or cmd+shift+p (OS X) – type “Fetch,” and make your selection.
Choose HTML5 Boilerplate from the list, give it a few seconds, and, bam, you’re ready to go with the latest release.
Pretty sweet, huh? I hope you like it! Thanks again to Weslly Honorato for building it for us.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
All In One Banner–jQuery R ... only $8.00 
feelandlive - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow, this is a great plugin to add onto sublime text editor. Sublime already makes things faster when using zend coding and now with this plugin workflow can be even more faster. Thanks for this!
Very nice idea. I assume it works with tar.gz, zip, and .php just fine, so I can easily add wordpress.org/latest.zip without issues?
Hell yeah it works! :D
This is one of those ideas that’s just so brilliant and simple, when you see it you can’t help but feel a little irritated with yourself for not having thought of it – unless, of course, you happen to be Jeffrey Way.
Nice work.
Thanks guys. If you notice any issues, just leave a comment, and I’ll ask Weslly to look into it.
Now that to me is a $400 idea. Nice to see recognition given to Weslly, who finished this plugin 2 hours after being requested.
For anyone on Nettuts+, feel free to submit a plugin request on the Sublime Text forum here: http://www.sublimetext.com/forum/viewforum.php?f=6
Absolutely. He did an excellent job, and we’ll be working with him on more plugins in the future.
Great! very nice idea!
I found just one issue when copy/paste the configuration that is in this tutorial. There’s an extra comma in the jquery line:
“jquery”: “http://code.jquery.com/jquery.min.js”, //Extra comma
This throws an error when executing the “fetch” command.
Regards
YES! I love it. Great work. Beyond tired of updating all the files all the time during new builds, which is the focus of my work. I don’t like maintenance so much ;)
Cheers
Great little tool. I’ve been using Sublime more and more lately, this might make me switch fulltime.
Would it be possible to add a preference on where to store the files? I use /lib/assets/javascripts/ for things like jQuery, would be great to automatically set that as the output path.
To set a default path for your downloaded projects:
Project > “Remove all folders from Project” > Project > “Add folder to Project” > Select Desktop or whatever > Now Fetch away
Yea, but I want to set up a specific path only for jquery, then a specific path for modernizer, then a specific path for SASS plugin etc.
Would be great to have the output path as the tird option in the config. Something like this:
{
“files”:
{
“jquery”: “http://code.jquery.com/jquery.min.js”, “/my/jquery/path/
},
“packages”:
{
“html5-boilerplate”: “http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped”, “/my/path/”
}
}
Is there an caching option?
so you don’t have to download Codeigniter 20 times if there’s no new version?
I don’t think so – but I’m not sure you’d need one. How often are you going to be fetching CodeIgniter?
Incredibly handy. Thank you so much!
Weirdly, my settings file wasn’t pre-populated. It was completely blank.
Not an issue at all, but perhaps a bug?
Same here
Fixed it! :)
Great plugin! – Simple, fast and easy.
This can defiantly boost my productivity, as im avoiding the browser, where im easily distracted:)
thank you jeffry way
you are awesome!
Actually, this guy made it: http://about.me/weslly
Good idea though if it was Jeff’s.
Great idea, and very easy to configurate!
Excellent plugin and tutorial, thank you!
Just started using the plugin and it seems to be working but every time I try and fetch a file or package it would ask me the directory to extract and then nothing would happen. The url : http://codeigniter.com/download.php is a valid one, i’ll keep tinkering.
Other than that, it’s a great plugin!
Hi Daniel – Do you have the CodeIgniter reference within the packages object?
I’m having this problem too, unfortunately. I’m just trying with the default file (jQuery) and package (HTML5 boilerlplate). I am able to fetch jQuery no problem (single file), but the HTML5 boilerplate does not work. It asks for the directory (which shows the current directory of the project I have open), I press enter…and nothing. Any ideas whats wrong?
Never mind, I restarting Sublime Text (a second time) and it started working. Very cool.
Very cool. The use of it in the screencast was very nice…
One question: is it ok to use the name “fetch” as that’s also the name of a software company that makes FTP?…. Fetch seems an apropos name, just mentioning it….
It’s also the name of FreeBSD’s built-in web-and-FTP download program (similar to wget or curl) and about 1,000 other FTP clients written over the years. Yeah, I think “fetch” is pretty safely generic in this space.
Brilliant Idea. I’m going to see if I can write a VIM plugin for this :D
Looks awesome!
@pradeek please let me know if you come up with a vim plugin for this.
Jeffrey, do you know of a plugin for vim that could do this?
My settings file wasn’t pre-populated either. I don’t see that as issue though, as Sublime 2 files are pretty straightforward to work with.
Great work guys, all we need now is CSS Reset links.
This is an awesome idea. I’ll use the crap out of this for WordPress, jQuery, reset, Drupal, etc.
The only problem I see is that it’s hard to grab certain libraries. The only way this could be fixed is if some big, awesome, great, site kept up with all the big files/packages and listed a repository somewhere…
If only there was a site that would keep a list of all the most current (s’ok if you’re a week or so late on some) projects….
If you guys would be willing to do something like that and tie it into the Fetch plugin, I’d be up for letting you know when I notice a script or package is outdated and giving you the updated URL. I’m sure I’m not the only one who would help and it would make a lot more people drool over Nettuts.
Btw, for everyone missing the content of the settings file, here’s a sample of a few things I’ve put together. Feel free to update: http://piratepad.net/6L9KllaTBL
It’d be nice if it worked in the bg. Not sure if it’s a bug or not, but when I import a package, I have to wait for it to download and such before I can click anything else or else it just stops working completely. Not expected.
Wow. Nice tool! this has great future
Great work.
Sublime Text 2 has become my fav text editor (thanks Mr Way for the introduction). This is a great enhancement.
Thanks.
Great little plugin. I have a question, however. When I pulled jQuery it just plopped it right into the file I had open at the time on the top. Is this the expected behavior? My expectation was that it was going to download jQuery into the folder that I was working in. Am I wrong?
Yeah – it’ll bring the contents into the current file.
I see. That’s definitely something I’d like to see changed to maybe a popup that says “put in which directory” and save as the filename that was supposed to be grabbed into the selected dir. Oftentimes you’ll want to d/l the file into your folder structure somewhere and not have to create that folder structure, create a new file, and then save it in there after it plops it all in. Just a suggestion for a future version. Great plugin nonetheless.
At first this bothered me a bit too, but once you realize it’s as quick at Ctrl + S to trigger that “popup window”, it’s not a problem.
Ctrl + N (new file), Ctrl + Shift + P, “Fetch” > “jquery”, Ctrl + S (save)
This was unexpected behaviour for me too but i`m still not sure if it is the right way or wrong, for me.
If you are putting all your javascript in one file and all your css in one file, which you should in production, this is good. However, in development i think it`s often not the best thing to do and since this plugin is meant to be used in development i think it should download the file and put it in the projects directory.
I’d also plus one that feature request to be able to download single files like you can as a package. Specifically in the instance of jQuery I’d like to be able to have that downloaded as it’s own file rather than creating a new blank document, pasting the contents and then saving it somewhere.
Great plugin! :) Thanks!
really great work i liked it here is fuelphp download settings
“fuelphp”: “https://github.com/downloads/fuel/fuel/fuelphp-v1.1.zip”
I think the point is to avoid the need for versions, but then again, it seems to cripple the plugin w/o versions. I really wish there was an official single repository for all the latest/greatest packages (since most of them are in “foo_version_number.zip” format).
Here’s an idea: Use Gists (https://gist.github.com/) as snippets, so that your snippets are always available to you online. Then create a snippet for your Fetch.sublime-settings file. Just Fetch your Fetch.sublime-settings file and you’ll have access to all your snippets on any machine!
gracias por el trabajo, una pizza para el senor Weslly Honorato, gracias Way por compartirlo
This is an awesome idea. Just downloaded ST2 to try this out.
A suggestion would be…why not make the local fetching available? In case you don’t care getting the latest file or maybe you don’t want to wait too long you can use the local copy that you keep, you would only have to specify were you’re hiding it. Now if the purpose is to always use the latest file then if it is possible make the plug-in search for latest file and update your local file that way you don’t download the latest file 20 times (I know this means having 20 different projects, this is just an exaggerated example) and just once and keep the file in “cache”.
Just my 2 cents.
This is actually an awesome idea and doesn’t seem too hard to implement. Not so you can keep “your very own copy of jQuery”, but imagine making your own boilerplates and being able to import them to whatever directory you want just by specifying where you want them unpacked to.
I put a .zip of a web boilerplate I always use on my CDN, now I can import custom packages like nobodies business.
I agree. Importing local boilerplates would be very useful.
Just a suggestion, in the package option you should automatically open extracted folder in project.
I love it. Great work.
Awesome plugin! Thank you!
It would be great if it could somehow fetch the version number of the file or package you’ve requested to download, so you could cancel the fetch if it’s not a new version.
Nice tool ! But…
I work always from FTP, so I use the SFTP plugin and this doesn’t work really nice together? Single file works fine but the packages doesn’t:
Error: You must have at least one folder opened to download this package.
This because I work from the FTP trought the SFTP plugin, so I don’t have a folder opened…
Wow, this is a great plugin. Its simple but amazing. Thanks, I’m definitely going to use it.
Maybe its me, but how can i find the right link on github to put in my fetch?.
if i go to https://github.com/EllisLab/CodeIgniter/downloads and then kopi the download link
https://github.com/EllisLab/CodeIgniter/zipball/develop
and put in my fetch package then i just got a file named: __tmp_package.zip
how can i get the real link to the github codeigniter ?
I think it literally has to come in some type of zipped format. Which sucks..
I suggest you get a CDN, then grab the latest version of whatever you want, put it in a zip and fetch that way.
I don’t know if anybody has noticed this, but when I use Fetch to download the HTML5 Boilerplate package in Sublime Text 2, the plugins.js file is different than if you download it directly from the HTML5 Boilerplate website.
It’s the stripped version.
Hey! Wouldn’t it be awesome if there was a way to fetch zip packages from the Envato Marketplace!?!?!?! Possibly a new sublime package? I’d love to be able to fetch wordpress themes I’ve purchased to pull into my projects.
Brilliant Weslly for the plugin!! and Thanks Jeffrey for let us know!!… and NOW time to start playing with it….
That’s so cool, but how many fetch apps would be available? was it just codeigniter, html5boilerplate or there is something more like fuel, symfony, tw-bootstrap, etc. let me know how please.
There’s no limit. Just grab a link to the downloadable zip file, and add it to your files object.
As a nettuts user, I would like to see links to all related articles at the bottom. Appreciate if that’s something you can implement. Thanks!
really great plugin ! and thaks JW to share it with us
Thanks.I think your Articles are very useful.
Very nice idea. I assume it works with tar.gz, zip, and .php just fine
Nice and useful plugins… great…
Awesome util, thanks.
It would be nice to save files the same way as packages also with a question for the path rather than pasting the content of the file (configurable in the settings).
Greetings.
Great plugin, just a quick question how would you set it up to fetch the latest version of the twitter bootstrap css? If I only wanted the minified `.css` file I could reference it to `http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css` but then if 1.5 gets released I’d have to change this in the options, not sure if they have a “latest” reference somewhere :(