A GulpJS Tutorial With Example and Repo to Test

what-is-gulpjs

First of all, Gulp is a task runner which helps us to deploy front-end or large-scale web applications. It uses NodeJS as a platform and builds an automated system to set up CSS, JS and HTML minification process, concatenating libraries, compiling SASS or LESS files and many others.

As a result of Gulp itself has a few functions to help you build files or tests. Therefore, it is a shorter, simpler and faster than others task runners in comparison. It uses SASS and LESS as CSS processor. Also uses an automated refresh web tool (Live Reload) after editing a file and uses a simple javascript file called gulpfile.js.

Advantage

  • Faster than others (like Grunt).
  • Coding is easier.
  • Easy to test.
  • Plugins are simple to add and use.
  • Plugins focus to do only task a time.

Disadvantages

  • Needs a lot plugins and dependencies.
  • No Multitasking.
  • Configuration is not as clean as Grunt.

Installation

  1. Install NodeJS and NPM.
  2. Run -> npm install gulp -g
  3. Test -> gulp -v

Gulpfile (gulpfile.js)

Gulpfile is the entry point that will be find when executing the commands gulp nameTask. A particular example is a task runner is similar a factory, you know inputs, process, stock and what they will become at the end. In sum up, you will code a master plan to run diferents task.

The purpose of this tutorial, it uses some processor plugins and explain the different features of GulpJS. The plugins are:

  • gulp-imagemin
  • gulp-minify-css
  • gulp-concat
  • browser-sync
  • gulp-uglify

Images Minify

Install imagenmin:

npm install --save-dev gulp-imagemin

Task code:

gulp.task('imagemin',function(){

 gulp.src('src/images/**/*')
 .pipe(imagemin())
 .pipe(gulp.dest('build/images'))
 .pipe(browserSync.stream());

});

Run task:

gulp imagemin

The src folder stores the original files and build folder is the destination after run the gulp command.

CSS Minify, Autoprefixer and Concat

The next task is very powerful, we are going to combine three tasks for minify, complete code to deal with vendors or third parties, delete unnecessary blocks and concatenate many files in just one.

gulp.task('styles',function(){
 gulp.src(['src/styles/*.css'])
 .pipe(concat('styles.css'))
 .pipe(autoprefix('last 2 versions'))
 .pipe(minifyCSS())
 .pipe(gulp.dest('build/styles/'));
});

Combining Task

In order to run many tasks with a just command, we have to create a task named default. According to last two task we might code:

gulp.task('default',['imagemin','styles'],function(){});

Monitor Files with Watch Function and Apply Changes

The Watch function provides us a monitor tool for changes. For instance, when any changes file is made in our source code, the watch run specifics task that was described in gulpfile.js in advance. In the previously section, we learned combining task with default task. We are going to apply the watch function into the default task.

gulp.task('default',['imagemin','styles'],function(){
gulp.watch('src/styles/*.css',['styles'])
});

Livereload

If we want to detect changes in source code or running test automatically, the Browser Sync is proper plugin. It is simple, you only need to create an instance on top of file with method create(). Then, invoke the change event via on() method and assign reload function.

Create instance:

var browserSync = require('browser-sync').create();

Task code:

gulp.task('browserSync',function(){
  browserSync.init({
    server : {
     baseDir: 'build'
    }
  });
});

baseDir: this is the folder where gulp puts the final files.

Watch description:

gulp.watch('src/styles/*.css',['styles']).on('change',browserSync.reload)

Optimizing CSS and JS

To understand the optimization of CSS and JS files. We are going to use two plugins called gulp-minify-css, gulp-concat and gulp-uglify. The first two mentioned previously. To install new one you need to run:

npm install --save-dev gulp-uglify

Add dependence:

 var uglify = require('gulp-uglify');

Task Code:

gulp.task('js',function(){
         gulp.src('src/scripts/*.js')
        .pipe(concat('script.js'))
    .pipe(uglify())
    .pipe(gulp.dest('build/scripts/'));
});

Watch description:

gulp.watch('src/scripts/**/*.js',['js']).on('change',browserSync.reload);

 

Anuncios

Un comentario en “A GulpJS Tutorial With Example and Repo to Test

  1. Pingback: A ES2015 Tutorial with Babel & Gulp – A. Felipe Trujillo Madrigal

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s