Playing with gulp (Part 1)

viking tired

 

This post is meant to be for those people who are tired of doing repetitive tasks in the development process. It is a basic startup guide for who doesn’t use gulp.

What is gulp?

Gulp is a JavaScript task runner that lets you automate tasks helping you in the development process.

What makes Gulp different from other task runners is that it uses Node streams, piping output from one task as an input to the next. It reads a file once, processes it through multiple tasks, and then writes the output file. This results in faster builds because there is no need to create and read intermediary files on hard drive.

Install gulp

You need Node installed on your computer to begin the gulp installation.
If you don’t have Node installed please go to https://nodejs.org/.

1. Creates packages.json for npm configuration executing the following command:

> npm init

2. Install and add gulp devDependencie using node with the following command:

> npm install 

This command will install all dependencies and devDependencies.
gulp default execution

Of course you can install any module by itself with the following command:

> npm install gulp --save-dev

3. Create gulpfile and start writing your tasks.

Sample Structure
In this sample we will have this structure folder.
project architecture

Gulp configuration file
If you take a look at the file you will see app and dist, first one is the application source configuration and the other one is the distribution folder.
project architecture

Start writing gulp tasks

The main idea of the sample is creating a new folder dist with all optimized source code.
In this tasks we will join and compile less files into one css file, join js files into one js file and create a new index.htm with the right references.

 Start creating a default task.

var gulp  = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!')
});

If you would like to test default task you only have to run the following command line:

> gulp

The result is:
gulp default execution

The main tasks in this sample are serve and clean.
Serve task will execute compile task. On callback it use gulp-serve to run node server on callback.
Clean task its only to remove dist folder using gulp-clean.

gulp.task('serve', ['compile'], function(){
  connect.server({
      name: 'Dev App',
      root: ['dist', 'tmp'],
      port: 8086,
      livereload: true
    });
});

gulp.task('clean', function(){
 return gulp.src(config.dist.base, {read: false})
 .pipe(clean());
})

Copy files

In this sample we have two tasks to copy resources: copy-html and copy-assets.

gulp.task("copy-html", function () {
    gulp.src(config.app.baseHtml)
        .pipe(rename("index.html"))
        .pipe(gulp.dest(config.dist.base));
});

This task will create a new html file named index and copy it to dist folder.

gulp.task("copy-assets", function(){
    gulp.src(config.app.assets)
        .pipe(gulp.dest(config.dist.assets));
});

This task will copy all asset folder to dist folder.

Compile node_modules

This task will concat all node_modules that you configure and create one js file and other css file.

gulp.task("compile-libs", function(){
    gulp.src(config.app.compiledLibsStyles)
        .pipe(concat('libs.min.css'))
        .pipe(gulp.dest(config.dist.libs));

    gulp.src(config.app.compiledLibsScripts)
        .pipe(concat('libs.min.js'))
        .pipe(gulp.dest(config.dist.libs));
})

Compile less files

This task compile and join all less files into one css file.
After that task will minify css.

 gulp.task("compile-styles", function(){
    return gulp.src(config.app.less)
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest(config.dist.base))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest(config.dist.base));
});

 Copile scripts files

This task compile and join all js files into one js file.
After that task will uglify js.
For sample purpose we have two script files: the first one with an alert and the second one with an ajax call.

gulp.task("compile-scripts", function(){
    gulp.src(config.app.scripts)
        .pipe(concat('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(config.dist.scripts));
});

Inject

In this task we will add js, and css references into the new html file.

gulp.task('inject', function () {
    var target = gulp.src(config.dist.indexHtml);
    var sources = gulp.src(config.dist.compiledSources, {read: false});
    var stream = target.pipe(inject(sources, { relative: true }))
              .pipe(gulp.dest("dist"));
    return stream;
});

 Compile all

This task will execute copy-html, copy-libs, copy-assets, compile-scripts and compile-styles at the same time.
After that it will execute inject task.

gulp.task('compile', function(callback){
  runSequence(
            ["copy-html", "copy-libs" , "copy-assets", "compile-scripts",  "compile-styles"],
 "inject",
            callback);
});

Finally if you run gulp serve you will see the following output and you can browse http://localhost:8086 and see the magic.
gulp server execution
If you want to download sample code please follow this link
If you want to see demo online please go to link

We hope that this post will be useful for you.

Part 2 is coming soon and will be more deep into gulp modules.

Related posts

7 thoughts on “Playing with gulp (Part 1)

  1. This is certainly often your site practical. I am talking about. you’ve most details concerning this problem, and also for your reason passionately. you in addition mght expertise to produce individuals rally powering it, evidently in the responses.

  2. Helpful tips ..I am just in a position to check out this short article..thanks a lot for giving us this helpful tips. Wonderful walk-through. I understand fully this submit.

  3. Of course, what a splendid website and enlightening posts, I surely will bookmark your blog.Have an awsome day!

  4. “Hey! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Cheers”

  5. I am impressed with this site, real I am a big fan.

  6. Good blog post. I definitely appreciate this site.
    Keep it up!

Leave a Comment