Gulp task manager – A Quick Look

If you are a developer and have not discovered the magic of a task manager like Grunt or Gulp, I highly suggest you check one of them out. I recently started learning Gulp. Once I got a basic grasp of what the Gulp task manager did, I felt like it opened a whole new world of awesomeness to me. My brain exploded with the possibilities and I feel that this is going to be a game changer for me

A look at the gulp task manager

What is a task manager?

Exactly what the name implies. It allows the running of tasks from an environment to perform any number of things. But where the real cool stuff comes to play is in the plugins. People have created plugins that do many things, from minifying CSS and JS files to automatically compiling pre-processed code like SASS or LESS to creating a deployable folder structure. There are so many awesome plugins that I am still wading through all of the great things that might improve my workflow.

Grunt vs Gulp task manager

I chose to delve into Gulp only after a little bit of online research, but there was no overwhelming information that pushed me toward it. There are syntactical differences and apparently some speed differences, but to me, it seems like the all of the important things are somewhat similar. I suppose a case could be made that Grunt has been around longer and the community might be a little bit more invested, but I have found there to be an enormous Gulp community, as well. Also, the Gulp task manager appears to be a bit more code friendly, while Grunt seems to be more configuration and set up through JSON.

Really, just pick one and roll with it. I will be talking more about the Gulp task manager in this post.

The Basics

You don’t need to know Node.js to get started, but a basic understanding of JavaScript and how Node.js works will help. I am a Node beginner, but feel comfortable enough with programming concepts, JavaScript and not being afraid to look at documentation, so it works for me. I am not going to be able to give you a better first try than the actual documentation, so here you go… Gulp ‘getting started.’

The short version is that the Gulp task manager, surprisingly, runs on tasks. The tasks can be dependent on other tasks. Most of the functionality revolves around having a source, which could be a file, an array of files, folders or any other pattern-able group of items. Gulp uses node globs for searching, plus a little extra. Here is an example of a basic Gulp task that does not use outside plugins.

gulp.task('copy-fonts', function(){
  gulp.src('fonts/**')
  .pipe(gulp.dest('dist/fonts'));
})

This code snippet, or task, will look for all files and folders in “fonts/**” and copy them all to a folder named “dist/fonts”. In this case, I am moving it for the sake of making an easily deployable folder where my minified and concatenated files reside.

Once the source in a task is determined, things happen to that source via plugins. For example, there is a plugin called ‘gulp-minify-html’ and this might be what a task looks like that contains this.

gulp.task('default', ['package-project'], function() {
  return gulp.src('dist/pages/homepage.html')
    .pipe(minifyHTML())
    .pipe(gulp.dest('dist/pages'))
});

Note that the task is called ‘default’. This is a task with special meaning in Gulp in that if no task is identified when running it, it will look for the ‘default’ task. Also notice that there is an array passed into the task. This is a list of tasks that are required to run before this task can be executed. So, in this case, ‘package-project’ will need to run before the minifyHTML stuff happens.

Once package-project completes, the task above will look for homepage.html, run the minifyHTML file and send the minified file to ‘dist/pages’.

My Gulp Use Case

I worked through some of the initial setup and wanted to get a good feel for how Gulp functions, so I created a bit of a use case demo for myself.

What I have Gulp doing is watching my group of development folders. Whenever I make a change to the CSS, HTML, JavaScript, images folder or font folder, Gulp then automatically senses that something is modified and goes through a set of tasks I have set up to run.

It compresses everything in the images folder and moves it to the ‘deploy’ staging area. It moves all font files as appropriate, as well. The task then takes all designated CSS and Javascript files and minifies them, concats them and in the case of JavaScript, uglifies it and finally moves it to the staging area. Finally, it minifies the HTML and moves it as well.

Because of this little script that works automagically in the background, I have a physical size saving on a webpage of 30%, I reduced the number of HTTP requests by about 20% and ultimately made a page that is quicker. My front end set up, that I feel could be standardized on a project by project basis) has given me measurable improvements with a small amount of effort.

And really, this is just the beginning of what I can do. There are so many more plugins and efficiencies to be had with the Gulp task manager.

Gulp Summary

I am 100% sold on the Gulp task manager. It is magical. The kinds of development and deployment efficiencies that can be created with little effort is mindboggling to me.

If you are a front end developer at all, I would suggest taking a look at one of the task manager tools that are available and seeing how they might help your workflow

Tech Round Up – Jan 4

Monday Round Up – What has been going on the past week and some links that interest me.

Best Science Fiction list – This isn’t really a new one for me, but for any of you science fiction fans out there,
here is a list of the classics. If you are looking for something to read, give this list a look over. Here is a review if interested.

Hack My Resume – I didn’t play around with this much and it is on my infinite ‘todo’ list, but it looks like a handy thing. It looks like it is a cl tool to easily and rapidly generate resumees in many formats. I am not really looking for a position at the moment, but it is good to always be prepared.

Poop to save the world – This is an interesting idea… use already running water to harness energy. I would wonder about maintenance and cost of something like this, but I love to see thinkers make unique ideas come to fruition that could help revolutionize our energy consumption/production

Falcon 9 ready to launch again? – Elon says YES! Make it happen, please. The sooner this happens the sooner we can get on with the business of taking over the galaxy and universe. Lets do this, man.

Banks in the Bitcoin business – Bitcoin may not be the money of the future, but the big dogs are investing money in it. Me? I personally think that some variation of Bitcoin, if not Bitcoin itself, will become the money of standard at some point in the future. Once we have chips in our heads (ok… that was sarcasm – well, half sarcasm), how nice would it be to just think a payment? But I suppose all the hard currencies of the world, and the governments behind them, might have something to say about this.

Google getting serious about wiring the US with fast internet – Be afraid, cable companies. Oh, afraid you are not? You will be… you will be.

A nice, feely, recap of the futuristic stuff 2015 brought us – Bring on the future!

A beautiful resolution suggestion post – More bring on the future!

CSS Best Practices – Find Yours

I have been on a best-practice research rampage lately and wanted to take a few minutes to share some of the things that I have found in regards to CSS best practices. I will show some of the research I found and some of the common themes.

CSS Best practices

In my search for making good decisions, I thought it was important to try and find what other people are doing. I have talked about ‘being part of the conversation’ before and a good start to finding what I think is right is to look at what other people feel is right. That does NOT mean I need to follow what other people do, but it can give me the basis making my own informed decisions.

What are other organizations doing in terms of CSS Best Practices?

I found four online CSS style guides and CSS best practices that seemed like really good sources to begin forming my own thoughts.

Google’s Style Guide – – Because Google.

Code Guide by @mdo This person is one of the creators of Twitter Bootstrap and current Director of Design at GitHub.

Code Guide by Harry Roberts – the guy behind @csswizardry.

Air BnB

I am sure there are others out there, but these are all legit CSS style guides from prominent entities in the tech industry.

What do these example CSS best practices teach us?

One thing I was interested in was finding what is common among all of these style guides? If these widely regarded entities generally agree on something, it would seem appropriate to at least look at the similarities.

Here is a list of items that seem to be agreed on in at least ¾ of the style guides

  • Soft Tabs. They’re the only way to guarantee code renders the same in any environment. 3 of the 4 recommended 2 spaces. One recommended four.
  • When grouping selectors, keep individual selectors to a single line. 2/4 indicated that in some cases (only one selector and attribute), single line css could be used.
  •  
    
    /* Bad CSS */
    .selector, .selector-secondary, .selector[type=text] {
      padding:15px;
      margin:0px 0px 15px;
      background-color:rgba(0, 0, 0, 0.5);
      box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    }
    
    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }
    

    .selector {padding: 15px;}

  • Include one space before the opening brace of declaration blocks for legibility.
  • /* Bad CSS */
    .selector{
      padding:15px;
    }
    
    /* Good CSS */
    .selector {
      padding:15px;
    }
    
  • Place closing braces of declaration blocks on a new line
  • Include one space after : for each declaration, but none before.
  • End all declarations with a semi-colon. The last declaration’s is optional, but your code is more error prone without it.
  • All class names should be lowercase-hyphen (although 2/4 recognizes/encourages BEM and OOCSS naming conventions. The other two do not mention them.) Google does not explicitly call this out for classes, but “All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).”
  • Comments – use them. Everyone includes that comments are needed and that it should be done in a consistent manner, but they each have slightly different comment styles.
  • Javascript hooks. 3/4 Javascript hooks in selectors to separate presentation from functionality from document “.js-“. Google does not call out specific js-hooks, but does talk about “Separating structure from presentation from behavior is important for maintenance reasons.”
  • IDs. 2/4 say never use IDs in css. 1/4 say to avoid using them. 1/4 (Google)makes no comment.
  • 4/4 have some verbiage about avoiding qualifying selectors and avoiding specificity (als0 related to ID item) . The more specific a rule is, the more fragile it tends to be and more labor intensive for the browser. 3/4 seem to have a preference to classes in lieu of any dom elements and Google doesn’t really mention much about it.
  • They all talk about appropriate class naming. Trying to avoid presentational naming and more reflects the purpose of the element. Brief as possible, but long as necessary.

What am I supposed to do with these CSS best practices?

Well, use them. They don’t NEED to be a part of your CSS best practices, but use them to understand what other people are doing and to be intentional about how you and your organization writes CSS. Even among the linked style guides, they each have some sort of discussion about consistency and working together to make a choice or respecting the formatting of the environment you are working in.