Making Javascript more complex with Gulp.js

Posted by in Javascript and TypeScript

I have enough trying to learn TypeScript and now that I can manage myself quite well, I go to a new level by stating to use Gulp.js, a software community implemented using Node.js with several plugins, in order to automating tasks with Javascript.

Gulp.js

gulp is a Javascript library written for Javascript developers, a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. Now that I am developing with TypeScript, it is convinient to use it for the conversion, minimize code, remove comments, …. Too much tasks that can be done for us.

This is the theory, because I am larning the tool right now, but in my opinion, it seems like a new complex mechanism. In order to use it, you must use the command line (after my progress with Linux, I am used to).

Anyway, using Gulp.js mean to be clean with your project, because it can be easy if everything is ordered. Also, you can read this great introduction.

Gulp.js plugins

There is a lot of gulp.js plugins that increase functionality, and that’s good because it expand knowledge, and it make developers an “easy” life. Well, you need to know how to use it, becuase it is ready!

Every pluing is designed for one task, so in order to create several tasks, you need to know what plugin you need to use. Also, the way of loading the plugins is by using npm. not a problem any more!

The first plugin to meet is gulp-util, the main plugin, and it is the base in case you need to code a new plugin! Good to know!

Another interesting plugin is gulp-empty, if you want to remove empty dirs.

Gulp-concat is designed to concatenate javascript files, while gulp-uglify is another plugin for minimizing and uglify your Javascript files.

Node.js

In Linux I already wrote how to install Node.js, while Windows users only need to download the installer, and next, next, next, … end.

node_version

node_version

Node is ready to work! First thing to do is downloading gulp.js with the command npm install -g gulp:

install gulp

install gulp

If you need to use npm behind a proxy, you must visit this blog entrance.

It is recommended to install gulp.js also locally, in the working dir. I will do it with the project preseented here.

install gulp local

install gulp local

Now, everything is ready.

TypeScript and gulp.js

The way of using gulp.js is by creating gulp files, which content is where tasks are defined using Javascript. Maybe you want to create these type of files using Typescript, so you need to pay attention to this entrance where it explains how to work with gulp.ts.

install ts

install ts

Next step is writting the gulp.ts file, with the task that must be done, with the files of this project: http://www.manejandodatos.es/2015/11/adding-jquery-plugins-using-requirejs-and-typescript.

But this is material for a new entrance!

Happy coding.