dpc
July 21, 2016, 2:43pm
1
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";
//
cfx
July 21, 2016, 5:09pm
2
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
2 Likes
dpc
July 21, 2016, 5:31pm
3
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
40Q
July 21, 2016, 5:47pm
5
This happened to me also.
Here is my solution
I also suffered this slowness on gulp and found out it was cssnano the big responsible of it. Although I know it’s deprecated, I switched again to minify-css and difference was enormous, from 9s to 1.8s when compiling styles. That’s a big change if working on small changes.
Browsing for a solution to this problem I found this benchmark study: http://goalsmashers.github.io/css-minification-benchmark/
Is there any reason to change from gulp-cssnano in favour of gulp-clean-css, which is recommend…
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
dpc
July 22, 2016, 9:18am
7
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.
dpc
July 22, 2016, 10:03am
8
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
hampus
September 19, 2016, 9:23am
10
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
dpc
September 19, 2016, 9:37am
11
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.
hampus
September 19, 2016, 12:31pm
12
Your’e welcome.
I agree about the source maps, but i will not spend the extra time it comes with
rayjon
February 6, 2017, 5:26pm
13
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