Today I’ll continue the series on command-line tools for productivity, with sed. Stream EDitor is the most complicated tool so far, an entire language in its own right. It is much too big to cover completely in one post, so I’m going to have a few posts covering the major parts of sed.
The bread and butter of sed is its search-and-replace functionality. Let’s start with that and then throw in some other fun commands.
Tutorial
As with the previous posts, if you are on Windows you’ll want to install Cygwin or one of the various other tools suggested in the previous comments. sed also uses regular expressions so you’ll want to keep your regex reference handy. From Wikipedia:
[sed] reads input files line by line (sequentially), applying the operation which has been specified via the command line (or a sed script), and then outputs the line.
[sourcecode language="bash"]
sed ‘s/#FF0000/#0000FF/g’ main.css
[/sourcecode]
We can read this like so: search [s/] for red [#FF0000/] and replace it with blue [#0000FF], globally [/g] in main.css. Two notes here: 1) This does not actually modify the file, but outputs what the file would look like if it did the replace and 2) If we left off the "g" at the end it would only replace the first occurrence. So let’s modify the file this time.
Global Regular Expression Print is a staple of every command-line user’s toolbox. As with find, it derives a lot of power from being combined with other tools and can increase your productivity significantly.
Following is a simple tutorial that will help you realize the power of this simple and most useful command. If you are on Windows and haven’t already, download and install Cygwin. If you are also new to regular expressions (regex), here is a great regular expressions reference to get you started.
Tutorial
Suppose we want to search for duplicate functions in all of our JavaScript files. Let’s start basic and work up to it. This technique can be used to search for a TON of duplicate items like:
You already know that Firebug is quite possibly a web developer’s best friend. You also know that you can edit pretty much anything with it and see results immediately. We can add one more thing to that list today.
You may not have known that you can also edit the values in the layout pane as well! (You can find it on the right side of the HTML tab) This makes it even easier to adjust the layout of a block and see the results. As a bonus, if you press the up and down arrow keys while editing a value the pixel value will adjust by one pixel in that direction. One note on this though, you can’t specify values in anything other than pixels (sorry fluid layouts).