Problem/Motivation

In the Drupal 7 version of Zen, all CSS was compiled down to 1 file. Which is fast. Gulp + node+sass is _much_ faster than Ruby Sass in that case.

In Drupal 8, each component in a theme should have a library so that Drupal's aggregator can be efficient. Which means we need to build each component's CSS into an individual file.

Because we are building a lot of files, gulp is taking a long time.

Proposed resolution

But for the gulp watch task, we don't actually need to do a full rebuild. We only need to rebuild the Sass that have been edited. We should be able to update the gulp watch:css task to be much faster.

Original report by arnoldbird

I upgraded to 7.x-6.x-dev. It's basically unusable on my machine because the gulp tasks are taking 6 seconds or more. I have a fast machine. Compass took about a second.

I've been trying to make the switch to libsass and grunt, which I've used to very good effect on another project. It's much, much faster than gulp, and somewhat faster than compass. However, it's not working so well with the zen theme. Grunt is tripping over lots of incorrect paths and syntax errors in the components and modules. The import paths didn't seem to be a problem when I was using gulp.

Here's an example of an import path that grunt doesn't like. In sass/components/form-item/_form-item.scss, the import is...

@import 'components/clearfix/clearfix';

...but it seems to me it should be...

@import '../clearfix/clearfix';

And indeed, if I make that change, grunt stops complaining. The problem is there is a seemingly endless succession of things grunt wants to complain about.

[edit: This part of the description is a dupe of #2770485: Sass error when not using Gulp: "File to import not found or unreadable" ]

Have others experienced these sorts of problems with gulp and grunt when working with this theme? What can I do to work around this or improve performance?

CommentFileSizeAuthor
#10 zen_gulp_watch_css_changed.patch1.61 KBfrjo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

arnoldbird created an issue. See original summary.

arnoldbird’s picture

Title: best way to deactivate lint? » gulp tasks taking 6+ seconds
Issue summary: View changes
skyredwang’s picture

Status: Active » Postponed (maintainer needs more info)

Can provide which exact line/task takes 6 secs? Or screenshot it?

Also, have you tested rebooting your computer, does it take the same amount of time?

JohnAlbin’s picture

Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

I'm also not sure what the problem is. If you are using Grunt, you aren't using the gulpfile.js.

Grunt complains about perfectly valid paths if you don't tell it where the valid paths are; see #2770485: Sass error when not using Gulp: "File to import not found or unreadable"

Nicolas Bouteille’s picture

Status: Closed (cannot reproduce) » Active

I just installed Zen 7 on Drupal 8 and I'd like to report that my gulp 'styles' task taken individually already takes 13s !
On D7, I am using Omega 4 with Grunt and libsass (grunt-sass), and it only takes 2s to compile a custom complex theme.

Leo Pitt’s picture

Hi, I'm also finding Gulp taking a long time to run. Here is output from Gulp watch on a fresh Drupal install and fresh Zen sub-theme. 10 secs to run in total (I've seen it take longer on themes that are mid-development).

[01:49:21] Using gulpfile /srv/drupal-composer/web/themes/zen_test/gulpfile.js
[01:49:21] Starting 'clean:css'...
[01:49:21] Starting 'clean:styleguide'...
[01:49:21] Starting 'styleguide:kss-example-chroma'...
[01:49:21] Starting 'lint:sass'...
[01:49:21] Starting 'lint:js'...
[01:49:21] Finished 'clean:css' after 734 ms
[01:49:21] Starting 'styles'...
[01:49:23] Finished 'clean:styleguide' after 2.1 s
[01:49:23] Finished 'lint:js' after 1.84 s
[01:49:23] Starting 'watch:js'...
[01:49:23] Finished 'watch:js' after 48 ms

components/base/links/_links.scss
  61:10  warning  Pseudo-elements must start with double colons  pseudo-element
  69:25  warning  Pseudo-elements must start with double colons  pseudo-element
  70:15  warning  Pseudo-elements must start with double colons  pseudo-element

✖ 3 problems (0 errors, 3 warnings)


components/base/text/_text.scss
  27:6  warning  Pseudo-elements must start with double colons  pseudo-element

✖ 1 problem (0 errors, 1 warning)


components/init/clearfix/_clearfix.scss
  11:4  warning  Pseudo-elements must start with double colons  pseudo-element
  16:4  warning  Pseudo-elements must start with double colons  pseudo-element

✖ 2 problems (0 errors, 2 warnings)

[01:49:24] Finished 'lint:sass' after 3.58 s
[01:49:25] base.css 6.12 kB
[01:49:25] kss-example-chroma.twig 17.52 kB
[01:49:25] Finished 'styleguide:kss-example-chroma' after 4.11 s
[01:49:25] Starting 'styleguide'...
Style guide build completed successfully!
[01:49:27] Finished 'styleguide' after 2.33 s
[01:49:27] Starting 'watch:lint-and-styleguide'...
[01:49:27] Finished 'watch:lint-and-styleguide' after 96 ms
[01:49:27] layouts.css 7.29 kB
[01:49:27] chroma-kss-styles.css 830 B
[01:49:28] kss-only.css 460 B
[01:49:28] box.css 236 B
[01:49:28] clearfix.css 123 B
[01:49:28] comment.css 380 B
[01:49:28] footer.css 132 B
[01:49:28] header.css 630 B
[01:49:29] hidden.css 92 B
[01:49:29] highlight-mark.css 77 B
[01:49:29] inline-links.css 534 B
[01:49:29] inline-sibling.css 945 B
[01:49:29] messages.css 901 B
[01:49:29] print-none.css 157 B
[01:49:30] responsive-video.css 403 B
[01:49:30] visually-hidden.css 422 B
[01:49:30] watermark.css 357 B
[01:49:30] autocomplete.css 1.01 kB
[01:49:31] collapsible-fieldset.css 2.25 kB
[01:49:31] form-item.css 1.61 kB
[01:49:31] form-table.css 1.78 kB
[01:49:31] progress-bar.css 717 B
[01:49:31] progress-throbber.css 666 B
[01:49:32] resizable-textarea.css 359 B
[01:49:32] table-drag.css 2.54 kB
[01:49:32] breadcrumb.css 200 B
[01:49:32] more-link.css 84 B
[01:49:33] nav-menu.css 863 B
[01:49:33] navbar.css 319 B
[01:49:33] pager.css 409 B
[01:49:33] skip-link.css 218 B
[01:49:34] tabs.css 2.31 kB
[01:49:34] all files 35.43 kB
[01:49:34] Finished 'styles' after 12 s
[01:49:34] Starting 'watch:css'...
[01:49:34] Finished 'watch:css' after 36 ms
[01:49:34] Starting 'browser-sync'...
[01:49:34] Finished 'browser-sync' after 147 μs
[01:49:34] Starting 'watch'...
[01:49:34] Finished 'watch' after 45 μs
JohnAlbin’s picture

Title: gulp tasks taking 6+ seconds » Gulp watch task is slow because it builds all CSS files
Version: 7.x-6.x-dev » 8.x-7.x-dev
Category: Support request » Bug report

In the Drupal 7 version of Zen, all CSS was compiled down to 1 file. Which is fast. Gulp + node+sass is _much_ faster than Ruby Sass in that case.

In Drupal 8, each component in a theme should have a library so that Drupal's aggregator can be efficient. Which means we need to build each component's CSS into an individual file.

Because we are building a lot of files, gulp is taking a long time.

But for the gulp watch task, we don't actually need to do a full rebuild. We only need to rebuild the Sass that have been edited. We should be able to update the gulp watch:css task to be much faster.

---

If you are wanting to report slow build times on the Drupal 7 version, please open a new issue as the gulp tasks are very different already.

JohnAlbin’s picture

Issue summary: View changes

Editing the issue summary because it mixes 2 different issues and makes understanding this issue confusing.

JohnAlbin’s picture

Issue summary: View changes
frjo’s picture

After some experimentations I have come up with a patch that seems to work, i.e. rebuild only changed files when running "gulp watch:css".

The patch adds the npm package "gulp-cached" so rerun "npm install".

When first starting "gulp watch:css" all css and map files will be cleared and rebuilt, so no changes so far. After that the cached plugin will only pass along new/updated files making any changes almost instant.

There seems to be several other plugin/solutions that could do this as well. If you have a better solution or find any bugs in this patch please contribute! Would be really nice to get this in to zen for Drupal 8.

Leo Pitt’s picture

That is much faster for me now, takes about a second. However - I was running just "gulp watch" previously, not "gulp watch:css", so that may have made a difference too.

frjo’s picture

Category: Bug report » Feature request
Status: Active » Needs review
kevinwalsh’s picture

This is also much faster for me, went from 6.48s on grunt watch:css to .419ms. Thanks!

rodrigoaguilera’s picture

Status: Needs review » Reviewed & tested by the community

I tested the patch and I can confirm it reduces the speed dramatically.
Caching in memory seems like a good idea.

ckrina’s picture

It worked for me too, it completely reduced the time it takes. Thank you @frjo!

SeanFitzpatrick’s picture

This is very helpful. Thanks!

Quick note for anyone applying the patch in #10 to an existing subtheme-- you'll need to edit STARTERKIT in the patch file to the name/path to your subtheme as appropriate and then rerun npm install

rootwork’s picture

I've used `gulp-cached` in other projects too and it's great. Hope this can be committed.

rodrigoaguilera’s picture

with this solution partial files (e.g: _mylayout.scss) are watched but not cached

I removed this line
'!' + options.theme.components + '**/_*.scss',

And then used gulp-ignore to exclude partials
https://www.npmjs.com/package/gulp-ignore
i'm not able to post a patch now but I wanted people to be aware of the bug.