Debugging Gulp with gulp-debug

debugging gulp

Overview

In latest posts I have set up Simple front-end build pipeline with Gulp for my ASP.NET Core Web app with Microservice and tried to optimize bower components with gulp that I have failed to do. I found few tools that can help you with debugging gulp.

Problem description

This was mainly described in my previous post about failure. However shortening it, I’m trying to produce distribution package that will contain required bootstrap css files only. This is starting point for minificaton and optimize performance of my app. I’m using gulp-main-bower-files plugin to do it.

gulpfile.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var mainBowerFiles = require('gulp-main-bower-files');

gulp.task('failing', function() {
    return gulp.src('./bower.json')
        .pipe(mainBowerFiles( ))
        .pipe(gulp.dest('temp'));
});

This script completes with success, but there is no output created.

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp failing
[21:48:38] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[21:48:38] Starting 'failing'...
[21:48:38] Finished 'failing' after 18 ms
mogluszka@mogluszkaW540:~/Sources/shout/src/web$ ls -a
.  ..  bower_components  bower.json  gulpfile.js  index.html  index.js  node_modules  package.json
mogluszka@mogluszkaW540:~/Sources/shout/src/web$ 

So how I can figure out what’s wrong?

Debugging Gulp with gulp-debug

This sounds like a promising tool. Let’s change the task definition…

var gulpDebug = require('gulp-debug');

gulp.task('bower', function() {
    return gulp.src('./bower.json')
        .pipe(gulpDebug({title:'debug-src'}))
        .pipe(mainBowerFiles( ))
        .pipe(gulpDebug({title:'debug-mainBowerFiles'}))
        .pipe(gulp.dest('temp'))
        .pipe(gulpDebug({title:'dest'}));
});

Result of this run shows obvious issue.

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp bower
[21:55:43] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[21:55:43] Starting 'bower'...
[21:55:43] debug-src bower.json
[21:55:43] debug-src 1 item
[21:55:43] debug-mainBowerFiles 0 items
[21:55:43] dest 0 items
[21:55:43] Finished 'bower' after 27 ms

It seems that I just haven’t updated my bower file!

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ cat bower.json 
{
  "name": "web",
  "homepage": "https://github.com/michalogluszka/shout",
  "authors": [
    "Michal Ogluszka <michal.ogluszka@gmail.com>"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Bootstrap documentation doesn’t mention –save option during installing package.
Fix is easy to apply:

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ bower install bootstrap --save

and now everything seems to be fine.

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp bower
[22:10:37] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[22:10:37] Starting 'bower'...
[22:10:37] debug-src bower.json
[22:10:37] debug-mainBowerFiles bower_components/jquery/dist/jquery.js
[22:10:37] debug-mainBowerFiles bower_components/bootstrap/less/bootstrap.less
[22:10:37] debug-mainBowerFiles bower_components/bootstrap/dist/js/bootstrap.js
[22:10:37] debug-src 1 item
[22:10:37] debug-mainBowerFiles 3 items
[22:10:37] dest temp/jquery/dist/jquery.js
[22:10:37] dest temp/bootstrap/less/bootstrap.less
[22:10:37] dest temp/bootstrap/dist/js/bootstrap.js
[22:10:37] dest 3 items
[22:10:37] Finished 'bower' after 39 ms
mogluszka@mogluszkaW540:~/Sources/shout/src/web$ tree -I 'bower_components|node_modules'
.
├── bower.json
├── gulpfile.js
├── index.html
├── index.js
├── package.json
└── temp
    ├── bootstrap
    │   ├── dist
    │   │   └── js
    │   │       └── bootstrap.js
    │   └── less
    │       └── bootstrap.less
    └── jquery
        └── dist
            └── jquery.js

7 directories, 8 files

Now I can go back to building my front-end build pipeline. This tool for sure will be useful.

One thought on “Debugging Gulp with gulp-debug

Leave a Reply

Your email address will not be published. Required fields are marked *