Skip to content

build: speed-up stylesheet building #12426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 31, 2018

Conversation

devversion
Copy link
Member

  • Switches back from dart-sass to node-sass due to a pretty huge slow-down we noticed (can be revisited)
  • No longer copies all SCSS files to the temporary package output just in favor of the demo-app (slows down unnecessarily). This now allows us to live-reload theme changes within a second.
  • No longer rebuilds all package SCSS files twice for the ES5 output (rel: build(): fix source maps #7403)

* Switches back from `dart-sass` to `node-sass` due to a pretty huge slow-down we noticed (can be revisited)
* No longer copies all SCSS files to the temporary `package` output just in favor of the demo-app (slows down unnecessarily). This now allows us to live-reload theme changes within a second.
* No longer rebuilds all package SCSS files twice for the ES5 output (rel: angular#7403)
@devversion devversion requested a review from jelbourn as a code owner July 29, 2018 10:31
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 29, 2018
@devversion
Copy link
Member Author

devversion commented Jul 29, 2018

My timings (as per gulp) with dart-sass for building the Material assets were 48 s. Now they are ~6ms

image

@crisbeto
Copy link
Member

crisbeto commented Jul 29, 2018

I also did some testing where I compared gulp-dart-sass vs dropping in gulp-sass verbatim without any of the other changes in this PR, and the SCSS compilation for the demo-app task goes from 1.6min down to 29s.

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, but leaving to @jelbourn for final approval.

// These imports lack of type definitions.
const gulpSass = require('gulp-sass');
const gulpIf = require('gulp-if');
const gulpCleanCss = require('gulp-clean-css');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there are types for gulp-sass and gulp-if.

Copy link
Member Author

@devversion devversion Jul 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There definitely is, but for such small things we didn't even consider installing the types
(no real benefit; just blows the package)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not what the comment says though.

Copy link
Member Author

@devversion devversion Jul 30, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, since we didn't install the types, the imports basically lack of type definitions. Not the packages.

I see that the comment could be ambiguous, and I can change them in a follow-up that also considers all other similar comments like that. The comment was not really part of the PR.

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM for now, though we will have to change before too long (it's changing inside Google to the dart compiler). Hopefully, though, we'll have switched to Bazel by that time.

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release and removed target: master only labels Jul 30, 2018
@jelbourn jelbourn merged commit e4ac04d into angular:master Jul 31, 2018
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants