Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Serious performance issues. Stucked :(

See original GitHub issue

Hi,

I’m experiencing serious performance issues while using gulp-useref. App is pretty simple 20 html files that contains references to a couple images (10–20 total) and few js files are attached (same set of files in every html file).

Am I doing something wrong?

task:

gulp.task('html', ['styles'], function () {

  var shouldMinifyJs = function(file){
    return !!(env === 'production' && $.match(file, '*.js'));
  };

  var shouldMinifyCss = function(file){
    return !!(env === 'production' && $.match(file, '*.css'));
  };

  var shouldMinifyInline = function(file){
    return !!(env === 'production' && $.match(file, '*.html'));
  };

  var assets = $.useref.assets({searchPath: '{.tmp,src}'});
  return gulp.src('.tmp/**/*.html')
    .pipe(assets)
    // Concatenate And Minify JavaScript
    .pipe($.if(shouldMinifyJs, $.uglify()))
    // Concatenate And Minify Styles
    // In case you are still using useref build blocks
    .pipe($.if(shouldMinifyCss, $.csso()))
    // Set Revision
    .pipe($.if(env == 'production', $.rev()))
    .pipe(assets.restore())
    .pipe($.useref())
    // Update revision
    .pipe($.if(env == 'production', $.revReplace()))
    // Minify inline JS
    .pipe($.if(shouldMinifyInline, $.minifyInline()))
    // Minify Any HTML
    .pipe($.if(shouldMinifyInline, $.minifyHtml()))
    // Put vars into html
    .pipe($.preprocess({context: { env: env}}))
    // Output Files
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

typical html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!-- build:css styles/main.css -->

    <link rel="stylesheet" href="/startup/flat-ui/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/startup/flat-ui/css/flat-ui.css">
    <link rel="stylesheet" href="/startup/common-files/css/icon-font.css">
    <link rel="stylesheet" href="/startup/common-files/css/animations.css">
    <link rel="stylesheet" href="/bower_components/animate.css/animate.css">
    <link rel="stylesheet" href="/bower_components/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="/styles/cookiecuttr.css">
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/vendor/modernizr.js -->
    <script src="/bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
</head>
<body>

    ! page content goes here !

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>

    <script src="/startup/flat-ui/js/bootstrap.min.js"></script>
    <script src="/startup/common-files/js/jquery.scrollTo-1.4.3.1-min.js"></script>
    <script src="/startup/common-files/js/page-transitions.js"></script>
    <script src="/startup/common-files/js/easing.min.js"></script>
    <script src="/startup/common-files/js/jquery.svg.js"></script>
    <script src="/startup/common-files/js/jquery.svganim.js"></script>
    <script src="/startup/common-files/js/jquery.parallax.min.js"></script>
    <script src="/startup/common-files/js/jquery.sharrre.min.js"></script>
    <script src="/startup/common-files/js/startup-kit.js"></script>

    <script src="/scripts/jquery.cookiecuttr.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

</body>
</html>

Issue Analytics

State:
Created 9 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

1reaction

nefelogetcommented, Feb 19, 2016

Guys, treat only once assets and the problem this will solve the performance issue.

For example:

gulp.task('build:useref', function () {

  gulp.src('dev/project/index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', css()))
    .pipe(gulp.dest('dist'));

  gulp.src(['!dev/project/index.html', 'dev/project/*.html'])
    .pipe(useref({
      noAssets: true
    }))
    .pipe(gulp.dest('dist'));
});

You may want to add it as example of usage.

P.S. Sorry for my English.

0reactions

silvenoncommented, Jan 9, 2015

Sorry for not responding, I’m currently using a different build system, but I will get back to you when I compare the speed.