Gulp styles taking 8 to 12 seconds?

gulp scripts only takes 2. Same speed if i’m using watch or not.

Is there a way i can debug to see what files are taking the longest?

I’ve read up about asset-builder as indicated in similar posts but not quite sure how any changes here could make a difference.

[15:30:21] Starting ‘styles’…
[15:30:30] unicorn: styles/main.css.map
[15:30:30] unicorn: styles/main.css
[15:30:30] unicorn: 2 items
[15:30:30] Finished ‘styles’ after 8.63 s

my main.scss looks like —

@import "common/_fonts";
@import "common/_variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap/scss/bootstrap.scss";
@import "../../bower_components/font-awesome/scss/font-awesome.scss";
// endbower

// NB. the filenames have and underscrore but that's not needed below.
//
@import "common/mixins";
@import "common/functions";
@import "common/global";
@import "common/type";

@import "components/misc-items";
@import "components/_navigation";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/wp-classes";
@import "components/staff-item";
@import "components/item";
@import "components/_carousel";
// @import "components/_slick-theme";
@import "components/meta";
@import "components/_share-styles";
@import "components/svg";
@import "components/google-map";
@import "components/search-autocomplete";
@import "components/boxes";
@import "components/media-background";
@import "components/feeds";


@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";
@import "layouts/_page-services";
@import "layouts/page";
@import "layouts/single";
@import "layouts/single-case-study";
@import "layouts/section-handler";


// pages
@import "common/home";
//

Is there a way i can debug to see what files are taking the longest?

Start commenting files in main.scss until build time decreases noticeably or comment them all and then uncomment them one-by-one. Rinse, repeat :thumbsup:

2 Likes

thanks! Tried that. Is there an output/log option for styles?

Removing this file takes 6s off but can’t see anything in there that would make it particularly heavy.

body.services {
  .banner {
    background-color: $brand-primary;
  }
  .page-header {
    display: none;
  }
  .content-info {
    @extend .block-background-section;
  }
  .section__services--intro {
    padding-top: $handler-top-margin;
  }
  .services__intro {
    @extend .col-sm-10;
    @extend .col-md-8;
    padding-left: 0;
  }
  .date__posted,
  .filter__container--title,
  .filter__container--text {
    display: none;
  }
  .filter--item {
    font-size: $font-size-h1;
    font-family: $font-family-light;
    margin-bottom: $spacer-y/2.7;
    line-height: $font-size-h1*1.2;
    a {
      text-decoration: none;
    }
    .filter__item--label {
      font-family: $font-family-light;
    }
    &:hover {
      .filter__item--label {
        font-family: $font-family-bold;
      }
    }
    &:before {
      content: counter(my-badass-counter) ".";
      font-size: $font-size-base;
      margin-top: .29rem;
      height: 2.4rem;
      float: left;
      padding-right: $spacer-x * 1.6;
    }
    @extend .clearfix;
  }
  .header__sub-services,
  .services__call-to-action {
    padding-left: $spacer-x * 2.4;
  }
  .service__title {
    font-size: $font-size-h1;
    margin-bottom: $spacer-y*2;
  }
  .service__list--children {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: $spacer-y*1.85;
    counter-reset: my-badass-counter;
    .service__list--item {
      line-height: $font-size-h2*1.2;
      padding-left: $spacer-x * 2.4;
      .tax__service-child--title {
        display: inline;
        font-family: $font-family-light;
      }
      &:before {
        content: counter(my-badass-counter) ".";
        content: "";
        counter-increment: my-badass-counter;
        margin-top: .25rem;
        height: 1.6rem;
        float: left;
      }
    }
  }
  .services__call-to-action {
    font-size: $font-size-h2;
    font-family: $font-family-italic;
    a {
      font-family: $font-family-italic-bold;
    }
  }
  .services__related__staff-heading {
    display: none;
  }
  .service__quick-contact {
    p {
      display: inline;
    }
  }
  .contact__options {
    display: inline;
  }
  .contact__option--item {
    .contact__option--icon {
      font-size: smaller;
    }
    .contact__option--label {
      display: none;
    }
  }
}

.contact__option--item {
  display: inline;
  &:hover {
    a {
      text-decoration: none;
    }
    .contact__option--icon {
      background-color: white;
      color: $brand-primary;
      @include border-radius(50%);
    }
  }
  .contact__option--icon {
    text-align: center;
    vertical-align: middle;
    padding-top: .29em;
    &.fa-phone {
      padding-top: .4em;
    }
    width: 1.7em;
    height: 1.7em;
    display: inline-block;
  }
  .contact__option--label {
    padding-left: .3rem;
    padding-right: .6rem;
  }
}

.service__list--item {
  margin-bottom: $spacer-y/1.75;
  .service-fulldetails & {
    margin-bottom: $spacer-y*2.2;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.staff__title {
  @extend .h3;
}

body.service-fulldetails {
  .related__services--title{
    display: none;
  }
  .page-header {
    margin-bottom: $spacer-y*1;
  }
  .page__title {
    @include media-breakpoint-up(md) {
      display: inline-block;
    }
  }
  .taxonomy__link {
    @include media-breakpoint-up(md) {
      padding-left: $spacer-x/2;
    }
    white-space: nowrap;
  }
  .page-header__services + .tax__services__pagination,
  .col-md-8 + .tax__services__pagination
   {
    @extend .block-md;
    @include media-breakpoint-up(md) {
      text-align: left;

      @extend .col-md-3;
      @extend .col-md-offset-1;
      margin-top: 0 - ($spacer-y * 0.6);
    }

    li {
      @extend .block;
      .navigation__icon {
        float: none;
        @extend .btn;
        padding-top: 0;
        padding-right: $spacer-x / 4 ;
        padding-bottom: 0;
        margin-left: 0;
      }
       text-align: left;
    }
    @extend .hidden-sm-down;
  }
  .service__list--children {
    padding-left: 0;
    list-style-type: none;
  }
}

.contact__options {
  list-style-type: none;
  padding-left: 0;
}

.tax__services__pagination {
  padding-left: 0;
  list-style-type: none;
}

You can apply the same logic cfx gave you to the file and start commenting out chunks to see where the slowdown is

This happened to me also.

Here is my solution

I replaced css-nano

No need to replace a library with a deprecated one. The docs state pretty clearly that css-nano parses your css for duplicates, adding an extra layer of optimization that can be removed with its own option, such as:

.pipe(cssNano, {
            safe: true,
            discardDuplicates : false
        })
1 Like

Thanks all & @Nicolo_Sacchi, - that’s about 30–40% quicker!

Is there a way i can only use discardDuplicates:false just for watch or dev?

Finished 'styles' after 6.32 s (discardDuplicates:false)
Finished 'styles' after 9.52 s 

Actually - my css file is 1.4mb! When i exclude _page-service.scss its 0.2mb. wtf? Going to have a closer look at this scss file. D.

so it was this that was creating a hell of a lot of styles! Mostly the col-md-8 + .tax__services__pagination i imagine.

.page-header__services + .tax__services__pagination, .col-md-8 + .tax__services__pagination ... ...

Much better to work on now - styles at < 2secs. Thanks all!

.pipe(cssNano, {
      safe: true,
      discardDuplicates : argv.production ? true : false
    })

Thanks @Nicolo_Sacchi , it a useful tweak.

2 Likes

I had this issue to with both scripts and styles…
It took like 14 seconds to gulp styles with bootstrap and font awesome. So when i am developing now with gulp and sage i comment out sourcemaps and cssNano. After commenting out this, the complie time with gulp styles is around 600 ms. And for scripts i comment out sourcemaps, uglify and rev. And the complie time on scripts is around 10 to 20 ms.

So it looks like this the style & scripts task.

var cssTasks = function(filename) {
return lazypipe()
.pipe(function() {
return gulpif(!enabled.failStyleTask, plumber());
})
// .pipe(function() {
// return gulpif(enabled.maps, sourcemaps.init());
// })
.pipe(function() {
return gulpif(’.less’, less());
})
.pipe(function() {
return gulpif(’
.scss’, sass({
outputStyle: ‘nested’, // libsass doesn’t support expanded yet
precision: 10,
includePaths: [’.’],
errLogToConsole: !enabled.failStyleTask
}));
})
.pipe(concat, filename)
.pipe(autoprefixer, {
browsers: [
‘last 2 versions’,
‘android 4’,
‘opera 12’
]
})
// .pipe(cssNano, {
// safe: true
// })
.pipe(function() {
return gulpif(enabled.rev, rev());
})
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.write(’.’, {
sourceRoot: ‘assets/styles/’
}));
})();
};

var jsTasks = function(filename) {
return lazypipe()
//GF REMOVE
// .pipe(function() {
// return gulpif(enabled.maps, sourcemaps.init());
// })
.pipe(concat, filename)
//GF REMOVE
// .pipe(uglify, {
// compress: {
// ‘drop_debugger’: enabled.stripJSDebug
// }
// })
// .pipe(function() {
// return gulpif(enabled.rev, rev());
// })
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.write(’.’, {
sourceRoot: ‘assets/scripts/’
}));
})();
};

1 Like

thanks Hampus. Will consider that fort he next project. I find the source maps v useful however but can try a few things out. Looking forward to trying Sage 9 and what workflow changes that brings.

Your’e welcome.
I agree about the source maps, but i will not spend the extra time it comes with :slight_smile:

Thanks @hampus . Disabling cssnano took my build time from 9s to 1.5. It would be great to only run tools like this on production or at least optionally because of the drain it has on development.

1 Like