Tools

During my project’s development I researched into some tools to help make the process faster and easier. Out of the tools I research and used two really stood out as something truly awesome. These tools were Bower and Gulp.

Gulp

What is Gulp?

Gulp Is a task tool. Its functionally in what it can do seems limited less. Its built with node.js and it allows its users to create tasks in the form of node scripts, it makes use of nodes npm system to host all kinds of gulp plugins.

How was it helpful?

Gulp allowed me to take the time and effort out of resizing and compressing all the images in my application using the gulp plugins image-resize and image-min allowed me to reduce the size of my android app from 20mbs to 3mbs! In about 2 minutes.

It also allowed me to compress my html, javascript and css to save on file size.

I’ve only scraped the surface of what gulp and do, I’m glad it took the time to learn about and would use it in future projects.

How it works?

To start using gulp you need to install gulp globally with npm (nodejs is needed) once its installed globally you need to create a gulpfile.js.

In your gulpfile.js you need to define the gulp variable

var gulp = require(‘gulp’);

gulp.task(‘compressImg’, function () {

}

Inside your task you place the logic for the gulp task. Most of this is done for you if you are using a premade plugin from npm. You just need to make sure you install the plugin to the root of your project using npm and define it in the gulpfile.

Heres an example on an image compressing task using image-min plugin

var gulp = require(‘gulp’);

var imagemin = require(‘gulp-imagemin’);

gulp.task(‘compressimg’, function () {

return gulp.src(‘uncompressed/img/*’)

.pipe(imagemin({

progressive: true,

svgoPlugins: [{removeViewBox: false}]

}))

.pipe(gulp.dest(‘/img/’));

});

 

Bring up the command prompt make sure you are in the root of your project and type gulp [taskname] e.g

Gulp compressImg

And your away

Bower

What is it?

Bower is a package manager for web developers. Bower can fetch pretty much any package to do with web development.

How was it helpful?

It really took the time and effort out of setting up libraries in my app. All I needed to do was open the command prompt move to the projects root directory and type

Bower install [package name here]

e.g

bower install jquery

And it would fetch the latest version of the package and if any dependencies were needed it would fetch them too, Nice!.

One anther great feature is being able to saved your fetched packages to a json file on fetch.

E.g. bower install jquery –save

This means if anyone else wanted to work on my project they can fetch all the projects dependencies with one command.

 

Advertisement