How Web Developers Can Use Alfred
videos

How Web Developers Can Use Alfred

on Aug 8th 2012 with 53 comments
Tutorial Details
  • Topic: Alfred
  • Platform: Mac
  • Length: 12:21

Final Product What You'll Be Creating

In this screencast, we’ll use Alfred to write an extension that assists us when creating new projects. As you’ll find, Alfred makes the process of executing predefined shell scripts a cinch.

Choose 720p for the clearest picture.

Final Bash Script

# Create our new project directory
cd ~/Desktop && mkdir {query} && cd {query}

# Begin by copying our BB template to the new folder
cp -R ~/Templates/Backbone/ .

# Pull in Backbone
curl http://backbonejs.org/backbone-min.js > assets/js/libs/backbone.js

# Pull in Underscore
curl http://underscorejs.org/underscore-min.js > assets/js/libs/underscore.js

# Pull in jQuery
curl http://code.jquery.com/jquery.js > assets/js/libs/jquery.js

# Open our new project in Sublime Text
/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl .
Final Script

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Edward

    How many new projects do you build, so this would actually be worth the effort?

    • http://envexlabs.com Matt Vickers

      If you’re a freelancer, there is a chance you could be making a new project every week.

      • http://jedrek.me jędrek

        Exactly, I’ve had periods when I was churning out a facebook app every week.

  • ^Lestat

    I saved an automator workflow as an application. In the workflow I load up all my webdev apps (MAMP, SublimeText2, Sequel Pro, browser, iTerm, and finder into a predetermined dev directory). Conveniently named ‘webdev’.

    Then I fire the ap via Alfred. Automator is pretty slick and I haven’t scratched the surface. I need to learn some AppleSripting.

  • http://ashleyclarke.me Ashley Clarke

    I don’t currently have the powerpack but I am definitely buying it now, great tut Jeff. I always love ways to improve my workflow.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Ashley!

      • http://daveismyname.com Dave

        What package are you using to create your files in Sublime? btw excellent tut think I’m going to buy the power pack now!

  • samir

    will there be something for windows users
    poor tutsplus fan windows users
    thank you jeffrey way

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Samir – Unfortunately, I don’t know of a Windows tool that offers that sort of functionality.

    • http://zuro.blogspot.com/ Mansour Blanco

      You could install cygwin, create your own shell script, and then launch it via the console

    • http://johnnyfreeman.us Johnny Freeman

      samir – For windows, I’m pretty sure Launchy can run scripts using the (built in) “runner” plugin. :)

  • http://www.jmfashion.co.uk Matt hanson

    I had forgotten that I had installed Alfred. This has encouraged me to start using Alfred again. Thanks

  • David
    • http://daveismyname.com Dave

      Excellent thanks!

  • http://nataliav.me Natalia Ventre

    Great tutorial, Jeffrey! I’m going to buy the Powerpack to use this, I feel so stupid right now for copying and pasting folders manually.

    I don’t use Sublime Text, the last line of the bash script is just the path to the app? What would it be for Espresso? /Applications/Espresso.app/MacOS/Espresso .

  • mmelo

    Great tutorial! Needed something like this a long time ago. But tell me, I already have Structurer set to fetch the most recent versions of JQuery, Backbone etc, how can one integrate this with Structurer? So there’s no need to have a copy of all the files one needs to start a project. In other words, instead of copying files from a certain location is it possible to call Structurer and have it generate those files?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There probably isn’t any need to use both. Structurer works great for those types of things.

      But if you want a makeshift alternative, using Alfred, this is the way to go!

      • mmelo

        I understand what you are saying but this means I’ll always need to have an actual copy of the files needed to start a new project, right?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Yes – unless you want to create all of the files in your Bash script. But, I prefer to store them in a templates directory.

      • mmelo

        This is why I come here every day, great tutorials and great feedback from the authors, specially yours Jeffery. Thank you very much!

  • http://coley.co Stephen Coley

    This great tutorial. I love seeing how people use Alfred to save time.

    I just did something similar, but I’m deploying my site from Github with Alfred. It’s much more secure than using the post-receive webhook. I call it BatSignal! – https://gist.github.com/3299526

  • Jon

    I use alfred all the time when working on multiple sites. I created a shortcut to use shift-cmd-space to go to my current site locally and wrote a c++ program a while ago to change the alfred config settings automatically. Personally, I would write this program in bash and save it in the path, so its not tied to alfred directly. You can always use a shortcut in alfred to call it on demand…

  • http://markanthonycianfrani.com/ Mark

    Love tips like these. Thanks!

    In case anyone doesn’t know, you can sync all of your Alfred preferences via Dropbox in case you’re working from multiple machines. Very useful.

  • http://noavinspire.com alex

    awesome tutorials. Great tips!

  • http://littlebitnerdy.com Scott Lyttle

    Very handy thanks Jeff! While you’re at it, set yourself up a week script to grab the latest WordPress as well. Perhaps something along the lines of:

    # Go to Desktop and create directory
    cd ~/Desktop && mkdir {query} && cd {query}

    # Grab latest WordPress
    curl -O http://wordpress.org/latest.zip

    # Unzip and Move
    unzip latest.zip && cp -R wordpress/* .

    # Cleanup
    rm latest.zip

    # Open that puppy up in Sublime
    /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl .

    • http://littlebitnerdy.com Scott Lyttle

      EDIT: you’re probably going to want to remove the ‘wordpress’ folder too. So that 3rd command should read:

      # Cleanup
      rm latest.zip && rm -rf wordpress

      • http://lukespoor.com Luke S

        Hey Scott, thanks for this. I’d like to expand this but I’m not sure what to do.

        After doing all of the steps but before opening up Sublime I’d then like it to create a new folder within wp-content/themes with the {query} while copying some files from a template (e.g. style.css, header.php etc).

        Any chance of the code I need to do this? The terminal code is all new to me!

      • http://littlebitnerdy.com Scott Lyttle

        Hey Luke,
        Yup that’s easy enough. I can’t test how it works in Alfred because I don’t have the powerpack (yet) but the terminal commands would look like:

        # Go to Desktop and create directory
        cd ~/Desktop && mkdir {query} && cd {query}

        # Grab latest WordPress
        curl -O http://wordpress.org/latest.zip

        # Unzip and Move
        unzip latest.zip && cp -R wordpress/* .

        # Cleanup
        rm latest.zip && rm -rf wordpress

        # Make new theme folder and go into it
        cd wp-content/themes && mkdir {query} && cd {query}

        # Copy files from your template folder into this new theme folder (path may need changing)
        cp ~/Desktop/templatefolder/index.php .

        # If you need to copy folders make sure to use -R (recursively)
        cp -R ~/Desktop/templatefolder/css .

        # Open that puppy up in Sublime
        /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl .

        If you run the Sublime command where it is then it will only open your new theme folder in Sublime. If you want to open the entire WordPress install then you need to get back to the root first. You can do so by adding the following command before you run the Sublime one:

        # Get back to WordPress root
        ../../..

      • http://littlebitnerdy.com Scott Lyttle

        Sorry, that last command should be: cd ../../..

      • http://lukespoor.com Luke S

        You say about copying files, can I not just copy the contents of a template folder into my newly created theme folder within wp-content/themes/ ?

      • http://littlebitnerdy.com Scott Lyttle

        You can copy an entire directory by using /* at the end. I interpreted it that you wanted to only copy some fo the files. So you’d run:
        cp ~/Desktop/templatefolder/* .

      • http://littlebitnerdy.com Scott Lyttle

        Also, if there’s any directories in that template folder it would need to be copied recursively, so:

        cp -R ~/Desktop/templatefolder/* .

    • George

      This is great! It would be cool if we could take it a step further and automate the WordPress installation on MAMP localhost using something like this https://gist.github.com/2296125 but I’m guessing that’s a little beyond Alfred’s capabilities if it only supports a single query… unless that query is relevant for all the variables in that script

  • http://littlebitnerdy.com Scott Lyttle

    4th command not 3rd command.

    I really need sleep.

  • xuechenwei

    longtime no see your tutorial

  • Edison Leon

    Thank you for this, after learning phing/ant, this should be easier when it comes to working from my desktop instead of the server.

  • http://airwolfe.com Alex

    Awesome quick tip Jeff. Great idea, thanks for sharing this!

  • http://littlebitnerdy.com Scott Lyttle

    For anyone interested, I put up a free alternative about how a similar thing can be done to set up WordPress using Automator:

    http://littlebitnerdy.com/sidenote/wordpress-automator-script/

  • http://www.fiveonline.in/ dave@Fiveonline

    Thanks for this quick idea. Looking forward for more of such tips.

  • http://blog.anthonyterrell.com Anthony Terrell

    I’ve created some plugins myself. Sometimes when I need to watch a folder for SASS changes I use my SASS Watch plugin: https://github.com/anthonyterrell/sass-watch-alfredplugin . When trying to find those pesky .htaccess files or .gitignore files I use my show/hide system files plugin: https://github.com/anthonyterrell/show-hide-alfredextension

    :)

  • http://www.cartondonofriopartners.com KC Hunter

    Great tip. Interested in seeing more tips like this.

  • http://www.socialagencyinc.com SEO Guru

    Thankful for the good information! I take part with a search engine optimization business in Miami , FL and will definitely be advising this with buddies of mine!

    Thanks Again! ;)

    Steph Jones

  • Albert

    Great tutorial, I’ve been using alfred for about two years now, but without the powerpak and it makes searching so much more efficient and quicker, but I don’t have powerpak. I currently use sublime text 2 and have setup fetch to do most of the my downloading and updating of packages and scripts, although this seems more involved, I don’t see the need to switch just yet.

  • Jeppe Albrektse

    Hi,
    Is there any one here, who can help me opening Coda 2 instead of opening Sublime text?
    :-)

  • Resting

    Running scripts through Alfred is addictive and fun. But I’m still sceptical about paying just to run scripts which I do so in iTerm.

    Nice tutorial anyway!

  • Ganeshan Nadarajan

    Alfred makes the process of executing predefined shell scripts a cinch.

  • http://twitter.com/YetiDesign Damien Metcalf

    How can I tell this to open index.html in chrome?

    I tried this:

    # open Chrome

    /Applications/Chrome Goolge.app/Contents/MacOS/Google Chrome .

    But no luck

  • Adrià Marcet

    Great trick! Thanks!

  • shinokada

    I just wrote a follow-up post doing it with Sublime Text 2 without Alfred. Basically you can install Shell-Turtlestein and create a snippet with the following will do the same things.

    assets/js/libs/backbone.js ; curl http://underscorejs.org/underscore-min.js > assets/js/libs/underscore.js ; curl http://code.jquery.com/jquery.js > assets/js/libs/jquery.js ; /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl .

    ]]>

    bb
    source.shell

    Shift+Command+c to open a Shell-Turtlestein console. Type bb +tab to display commands, then enter to run it.

  • Pradeep

    Great Work ! Keep up…..

  • http://www.multiinfotech.com/ Web Development Company

    We know the critical areas to address the right questions to ask, and mix with innovative solutions and solid research techniques, and quality control mechanisms to provide a Web application that runs in full consistency with the business model and meet all their needs. Since the master plan for the design and development, we focus on the project objectives of our clients, which in turn is the most important element in our decision making.