Gulp – Getting Started With Javascript Build Automation

Gulp helps us automate tasks within your javascript projects. Why would we want to do this? Well it helps us to be more productive. Not only do frontend developers have to sit down and write code, there is a ton of other work we have to do. Things like minification, contatentation, writing vendor prefixes, using LESS to compile CSS, optimizing third party code like jQuery, Angular etc, injecting files into HTML, unit testing, caching templates, file revisions and versioning, code analysis, and the list goes on and on. As you can already tell, frontend development is no joke when done right. And here is where Gulp comes in. You can delegate these tasks to gulp. By allowing you to provide files to it, it will alter them to a destination by streaming them through its pipeline. For example, want to minify a javascript file? Send it through the pipeline and out comes a file that is minimized! File goes in, and comes out new (like magic). The typical build pipeline can be described as follows.

Develop > Code Analysis > Testing > Build > Deploy

With Gulp, we can just type in one simple command and it will build and deploy our project! Read More

Getting Started With Webpack

On a basic level, webpack is a build tool.  A build can be described as converting source code files into standalone artifacts that can be run on a computer. What webpack does, is bundle modules used within a frontend application into a single file. So what does this have to do with javascript? When working with javascript, there are certain tasks that you do on a regular basis (especially if you are building a large scale application). Things like file concatenating and minification of javascript and CSS files, running tests, linting etc. The reasons why we do these is so our javascript applications are performant. By having a build step we can solve issues like multiple web requests, code file size, file order dependencies, code syntax checking(linting) and many more. Having a build step mitigates these problems related to development.

Webpack is just like any task runner(like gulp and grunt). Setting up a task runner in your project will enable you to do things like watching file changes, concatenating/minifying files, prefixing files for different browsers, linting Javascript, and module loader order. What makes webpack special from other task runners is that has something called loaders. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript( one less http request )!  Read More