Grunt: the ultimate task runner for web developers.

Grunt Simplifying your workflow is an invaluable undertaking that can be applied to any type of work. Web development is no exception, and the Javascript task runner Grunt is probably the most popular tool for automating monotonous tasks and speeding up your workflow. Like many people I was scared of the command line at first so I opted for a task runner with a GUI, namely Prepros. Eventually I realized I needed more power, which even the paid version of Prepros couldn’t provide. So I decided to give Grunt a go and I followed Chris Coyier’s guide “Grunt for People Who Think Things Like Grunt are Weird and Hard.” As the name suggests it was very beginner-friendly, which is why I don’t feel I need to write my own guide. What you will find here is a supplement to Chris’s guide with a few more in-depth explanations of the few things I had trouble with, as well as some of my own modifications. Before we jump into it, here is a list of some of the things Grunt can do for you:

  • Compile LESS, SASS, SCSS, Compass, and loads of other languages
  • Autoprefix CSS files
  • Code-hinting
  • Concatenate and minify various file types
  • Optimize images
  • Build image sprites and SVG icons automatically (!)
  • Start a server

And a hell of a lot more! After installing Grunt and its dependencies, it’s up to you to configure the tasks you want it to carry out for each project and when. From there, it’s a breeze: simply type grunt into the command line and it all happens automagically. Alternatively, specify a single task by typing grunt [task name]. For example, grunt concat concatenates everything you’ve configured Grunt to concatenate in your project. Alternatively, grunt:css would concatenate only CSS files. If this all sounds confusing, I recommend just jumping into it and things will start making sense.

Installing Compass

One of the things Chris Coyier doesn’t mention in his article is how to incorporate Compass into a Grunt workflow. As Christian Krammer mentioned in the article’s comments section, “if you use Compass (e.g. you use mixins like border-radius, which you really should), install grunt-contrib-compass instead of the mentioned grunt-contrib-sass. It’s basically the same with the same configuration variables.” The thing is that Compass has some dependencies so incorporating it into Grunt is not as straightforward as most other plugins. Compass The first thing you need to do is check if you have Ruby installed on your system and if not, install it. To do all that I recommend following the short Ruby on Rails Installation tutorial at tutorialspoint. Basically if you’re on OS X or Linus you probably already have Ruby installed, and if you’re on Windows, you can download and install it from RubyInstaller. The next step is setting up the Ruby environment. RubyInstaller should have created a shortcut called “Start Command Prompt with Ruby” inside the Start menu. Click on it and then type gem update –system && gem install compass into the command prompt. You don’t have to be in your project’s directory to do this. After installing the Ruby environment, it should be available to all your projects and you can install grunt-contrib-compass like any other plugin.

Installing LiveReload

LiveReload The last thing Chris Coyier shows us in his article is how to incorporate LiveReload into our Grunt installation. Unfortunately it didn’t go so smoothly for me. I suspect it’s because I’m running my site from a DesktopServer server, but I haven’t tested on different servers to confirm this. What happened was I got a pop-up message from the LiveReload plug-in when I tried to activate it: “Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is running. (We recommend guard-livereload, until LiveReload 2 comes to your platform.)” If you run into the same problem you can solve the issue by actually installing the LiveReload app in addition to the browser plug-in. That also means you can forego the extra code (options: {livereload: true,}) in gruntfile.js. Add your project folder to the LiveReload app and remember: you need to have both the app running and the browser plug-in activated in order for live changes to show in the browser.

Subtasks

You can get pretty specific about what you want Grunt to do and when. Suppose you wanted to concatenate both Javascript and CSS files, so that you would end up with production.js and production.css. The plugin grunt-contrib-concat Chris Coyier recommends works on a variety of file types, so all you need to do is define the Javascript and CSS subtasks separately and then call them by their name. An example will make it easier to understand:

concat: { // Javascript js: { src: [ ‘js/*.js’,], dest: ‘js/build/production.js’, }, // CSS css: { src: [ ‘css/style1.css’, ‘css/style2.css’, ], dest: ‘css/build/production.css’, }, },

Now anytime you want to concatenate only Javascript, you can call concat:js. When you want to concatenate only CSS, you can call concat:css.1 And if you want to concatenate everything, just call concat. 1 You don’t have to name these subtasks js and css; call them whatever you want. 

Final thoughts

Grunt is an extremely powerful task manager guaranteed to speed up your workflow. Installing things like Node.js and Ruby is a one-time thing. After that, you’ll be ready to install different plugins for different projects with just a single line of code. Configure Gruntfile.js (why not use a previous project as a template?) and you’re done! It’s actually simpler than it seems and will make your life easier in the long run.

Combining HTML, Javascript, and PHP

Surfing around today I came across the topic of combining different scripting languages in web design. Let’s keep this simple and talk only about HTML, Javascript, and PHP.

HTML, Javascript, and PHP:

  • HTML: not actually a scripting language, but a markup language. HTML is a client-side technology.
  • Javascript: a client-side scripting language.
  • PHP:server-side scripting language.

Client-side vs. server-side:

  • Client-side: the code you write is executed by the user’s web browser. That means if the user has Javascript disabled, for example, s/he won’t get that awesome Javascript experience you created.
  • Server-side: the code you write is executed by your server, which is probably in Utah or something, and you probably don’t have access to it. That means that if you have any PHP code on your page, it will work for all of your visitors as long as the server hosting your site has PHP installed. Most of them do, but if your code is not working maybe you should get in touch with your hosting provider. Server-side scripts are executed before they are sent to the client-side. Keep that in mind.

Alright, now that’s out of the way let’s get to the meat and potatoes of this!  You can actually create HTML (.htm, .html), Javascript (.js), and PHP (.php) files. Each one will of course support code written in its respective namesake, but some will also support other codes. So here’s another list for you, to make it easy (or maybe confuse you more):

  • HTML (.htm, .html) files: in here you can write both HTML and Javascript scripts, no problem! The user’s browser will read everything at the same time. To begin writing in Javascript, make sure to open the code with <script type=”text/javascript”> and close it with, you guessed it </script>. Normally you cannot have PHP code in an HTML file. There are ways if you google around, but if you know you’re gonna be using PHP code, it’s much better to do it in a .php file.
  • Javascript (.js) files: sorry, but you can only write Javascript code in here and if you open it with a browser it will just show you a bunch of code. So what’s it good for? Well, here you can write scripts that you want to use on multiple pages. Reference this file from the HTML or PHP file which actually contains all your content.
  • PHP  (.php) files: inside PHP files you can have it all! HTML, Javascript, and PHP, everything will work. In fact you can think of a .php file as a sort of beefed-up .html file. That is, if you’re using .php files as your main site files (where all the content is), it will work just like a .html file in regards to how you write your HTML and javascript: even though the extension is .php, that doesn’t mean you have to embed the HTML or anything like that. Just write your code as if it was a plain ol’ .html file. Again, Javascript code has to be inside the Javascript script tags. It is actually only if you wanted to use PHP that you would have to embed it first by using <?php in front of the code and ?> at the end. The cool thing about it is that you can place this PHP code anywhere, even inside HTML tags or within Javascript scripts, but always remember that PHP is server-side so it is executed before Javascript. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

Alright, let’s look at some examples of combining PHP, HTML, and Javascript:

PHP embeded in HTML (in a .php page)

<form>
      <?php $name = “Enter name”; ?>
      <input type=”text” value=”<?php echo $name ?>“>
</form>

The example above is written in a .php file. Everything in bold is PHP and everything else is plain HTML. The result will be an input box with “Enter name” pre-written into it.

PHP EMBEDED IN JAVASCRIPT (in a .php page)

<script type=”text/javascript”>
function bacon() {
alert(“This was written in Javascript”);
alert(“<?php echo “This was written in PHP”; ?>“);
}

bacon();
</script>

Again, in the example above the PHP is in bold. Everything else within the <script> tags is Javascript. The result will be two popups on page load: “This was written in Javascript”, followed by “This was written in PHP”.

So now you can see that PHP can be embeded anywhere within a PHP file. But be careful combining Javascript and PHP. Again, remember that since PHP is server-side it will be executed first. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

JAVASCRIPT EMBEDED IN PHP (in a .php page)

<?php
     echo ‘<script type=”text/javascript”>; alert(“hey”); </script>
?>

The example above shows how to embed Javascript within PHP. Again, the PHP code is in bold. To embed Javascript in HTML, we use echo and then insert everything inside quotes. I used single quotes here and then double quotes inside the Javascript code, wherever it was necessary. I could also switch those single and double quotes around if I wanted. If I wanted to embed HTML in PHP I would follow the same procedure:

HTML EMBED IN PHP (in a .php page)

<?php
     echo ‘<a href=”http://frugihoyi.wordpress.com/”>my website</a>‘;
?>

That would output “my website“. The PHP code was in bold.

And that’s about it. I’ve already explained above how to embed Javascript in an HTML page. It’s pretty straight forward and if you know Javascript, you should know that already. As opposed to PHP you cannot have Javascript code actually INSIDE of an HTML tag, like in our first example, but you can of course use Javascript commands like onClick and onHover. As for embedding HTML within Javascript code, I can give you a last example.

HTML EMBEDED IN JAVASCRIPT

<script type=”text/javascript”>
document.write(“<font color=’red’>textextext</font>”);
</script>

The above will of course output textextext in red.

Well this turned out much longer than I expected, but I hope it was informative. I’m not sure what the next topic will be, but maybe AJAX so stay tuned!