Gulp-inject takes extremely long time

Question

I have a problem that I can't figure out what the cause and how I can solve it, that the gulp inject takes so long time without make any sense about reason, without any warnings or errors, just takes so long time to finish and then complete successfully (you can see its took about 70 minutes to complete the task!, sometimes was taking like 80-120 minutes ):

25-Jan-2016 10:11:54    [10:11:54] Using gulpfile C:\[PATH]\gulpfile.js
25-Jan-2016 10:11:54    [10:11:54] Starting 'scripts'...
25-Jan-2016 10:11:54    [10:11:54] Starting 'styles'...
25-Jan-2016 10:11:55    [10:11:55] Starting 'partials'...
25-Jan-2016 10:11:55    [10:11:55] Starting 'fonts'...
25-Jan-2016 10:11:56    [10:11:56] Starting 'other'...
25-Jan-2016 10:11:58    [10:11:58] gulp-inject 127 files into index.scss.
25-Jan-2016 10:11:59    [10:11:59] Finished 'fonts' after 3.28 s
25-Jan-2016 10:11:59    [10:11:59] all files 447.2 kB
25-Jan-2016 10:11:59    [10:11:59] Finished 'scripts' after 5.27 s
25-Jan-2016 10:12:01    [10:12:01] Finished 'partials' after 5.82 s
25-Jan-2016 10:12:42    [10:12:42] Finished 'styles' after 48 s
25-Jan-2016 10:12:42    [10:12:42] Starting 'inject'...
25-Jan-2016 10:12:42    [10:12:42] gulp-inject 1 files into index.html.
25-Jan-2016 10:12:44    [10:12:44] gulp-inject 210 files into index.html.
25-Jan-2016 10:12:44    [10:12:44] Finished 'inject' after 2.29 s
25-Jan-2016 10:12:44    [10:12:44] Starting 'html'...
25-Jan-2016 10:12:51    [10:12:51] gulp-inject 1 files into index.html.
25-Jan-2016 11:20:00    [11:20:00] dist\ maps\styles\app-04813dcfd7.css.map 319.71 kB
25-Jan-2016 11:20:02    [11:20:02] dist\ maps\styles\vendor-67763da458.css.map 27.75 kB
25-Jan-2016 11:23:19    [11:23:19] dist\ maps\scripts\vendor-334967a88b.js.map 11.95 MB
25-Jan-2016 11:23:28    [11:23:28] dist\ maps\scripts\app-5e1af1a1bd.js.map 1.23 MB
25-Jan-2016 11:23:28    [11:23:28] dist\ styles\app-04813dcfd7.css 750.67 kB
25-Jan-2016 11:23:28    [11:23:28] dist\ styles\vendor-67763da458.css 69.68 kB
25-Jan-2016 11:23:28    [11:23:28] Finished 'other' after 1.19 h
25-Jan-2016 11:23:29    [11:23:29] dist\ scripts\vendor-334967a88b.js 2.89 MB
25-Jan-2016 11:23:30    [11:23:30] dist\ scripts\app-5e1af1a1bd.js 714.37 kB
25-Jan-2016 11:23:30    [11:23:30] dist\ index.html 1.44 kB
25-Jan-2016 11:23:30    [11:23:30] dist\ all files 17.96 MB
25-Jan-2016 11:23:30    [11:23:30] Finished 'html' after 1.18 h
25-Jan-2016 11:23:30    [11:23:30] Starting 'build'...
25-Jan-2016 11:23:30    [11:23:30] Finished 'build' after 21 μs
25-Jan-2016 11:23:30    Finished task 'Gulp build' with result: Success

I provide the code and I wish I find any solutions or any ideas how to troubleshoot this issue:

inject task:

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var $ = require('gulp-load-plugins')();

var wiredep = require('wiredep').stream;
var _ = require('lodash');

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

gulp.task('inject-reload', ['inject'], function ()
{
    browserSync.reload();
});
gulp.task('inject', ['scripts', 'styles'], function ()
{
    var injectStyles = gulp.src([
        path.join(conf.paths.tmp, '/serve/app/**/*.css'),
        path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
    ], {read: false});

    var injectScripts = gulp.src([
            path.join(conf.paths.src, '/app/**/*.module.js'),
            path.join(conf.paths.src, '/app/**/*.js'),
            path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
            path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
        ])
        .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

    var injectOptions = {
        ignorePath  : [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
        addRootSlash: false
    };

    return gulp.src(path.join(conf.paths.src, '/*.html'))
        .pipe($.inject(injectStyles, injectOptions))
        .pipe($.inject(injectScripts, injectOptions))
        .pipe(wiredep(_.extend({}, conf.wiredep)))
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

Conf file if you need it :

var gutil = require('gulp-util');

/**
 *  The main paths of your project handle these with care
 */
exports.paths = {
    src : 'src',
    dist: 'dist',
    tmp : '.tmp',
    e2e : 'e2e'
};

/**
 *  Wiredep is the lib which inject bower dependencies in your project
 *  Mainly used to inject script tags in the index.html but also used
 *  to inject css preprocessor deps and js files in karma
 */
exports.wiredep = {
    directory: 'bower_components'
};

/**
 *  Common implementation for an error handler of a Gulp plugin
 */
exports.errorHandler = function (title)
{
    'use strict';

    return function (err)
    {
        gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
        this.emit('end');
    };
};

Al-Mothafar · Accepted Answer

First: I learnt a listen here, never work with gulp and npm modules without upgrade them to latest.

I found that the issue related to out-dated and deprecated plugins for gulp NOT for gulp-inject itself:

gulp-useref was outdated badly from 1.3 to 3.0 (update and migration)
gulp-minify-css deprecated replaced with gulp-cssnano
gulp-minify-html deprecated replaced with gulp-htmlmin

I just updated the plugins, replaced the deprecated and DANG problem solved.

My build task after fix :

gulp.task('html', ['inject', 'partials'], function ()
{
    var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), {read: false});
    var partialsInjectOptions = {
        starttag    : '',
        ignorePath  : path.join(conf.paths.tmp, '/partials'),
        addRootSlash: false
    };

    var htmlFilter = $.filter('*.html', {restore: true});
    var jsFilter = $.filter('**/*.js', {restore: true});
    var cssFilter = $.filter('**/*.css', {restore: true});

    return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
        .pipe($.inject(partialsInjectFile, partialsInjectOptions))
        .pipe(jsFilter)
        .pipe($.sourcemaps.init())
        .pipe($.ngAnnotate())
        .pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
        .pipe($.sourcemaps.write('maps'))
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe($.sourcemaps.init())
        .pipe($.cssnano())
        .pipe($.sourcemaps.write('maps'))
        .pipe(cssFilter.restore)
        .pipe($.useref())
        .pipe(htmlFilter)
        .pipe($.htmlmin({
            removeComments      : true,
            collapseWhitespace  : true,
            removeAttributeQuotes: true
        }))
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
        .pipe($.size({
            title    : path.join(conf.paths.dist, '/'),
            showFiles: true
        }));
});

Gulp-inject takes extremely long time

Answers (1)

Related Questions