Where is documentation for setting up taskrunner on D8 subtheme?

Thanks for this post, I generated a theme and was hoping to start using SASS for the first time with it (I've been using AT in 7 for a while now, but just with ordinary CSS, so I'm late to the game). I was also thinking of using gulp as a task runner, but noticed a gruntfile in the theme's root, and can't even find any scss files, so I'm not even sure where to start. Do I have an option of using gulp instead of grunt?

I might have to just drop back and punt and build the site in 7. Not even sure what UI Kit is :-(

This issue really requires a full blown set of tutorials to explain it, but in short the theme does use Grunt by default, you are welcome to use Gupl but you will need to set this up yourself.

Theres a very rudimentary readme in the sub-themes UIKit:

Getting started...

You need bundler, nodejs and grunt installed.

http://bundler.io/ for Ruby Gems
https://nodejs.org/ for node package manager (npm) for node modules https://www.npmjs.com/
http://gruntjs.com/ our task runner

Get all that installed then fire off some commands from the theme root...

bundle install
npm install
grunt


Now edit some SCSS files in the UIKit, and remember to turn off CSS aggregation in Drupal.

@RKopacz the UIKit is, in effect, where the SCSS files are. When you generate a sub-theme include the UIKit if you want to use SCSS. It's call the UIKit because really its much more than just a set of SCSS files, there are many mixins and it's very structured (there are a LOT of files).

@daveparrish re #2 thinking that UIKit should be checked by default when generating a standard sub-theme. I need to get busy and write some docs and link to them, make some videos also. Thanks for the docker example, I'm not familiar with docker but that sure may be helpful to others, cheers!

@Jeff Burnz, thanks so much for your reply, and sorry to take so long to respond. Finally figured out what UIKit is, and I've been able to thrash through installing grunt and getting it ready, and I finally have it working. I think what I need is to get up to speed on my SASS. I'm still a noob and have to walk through the Inferno to get up to speed on that. Need to spend some time studying the UIKit directory and file structure. I have already found the _variables.scss file, so I'm making progress.

Thanks again.

OK a quick update. @JeffBurnz, the deeper I dig into this, the more I'm liking it with UIKit etc. I get it. Well done.

I was also able to get Live Reload working with the gruntfile. I'll post the code here, if anyone is interested.

I have a couple of questions, I'm not sure whether they relate to Adaptivetheme or the task runners, or what:

1) I notice that when I update one file, Grunt updates every css file, which takes around 30 sec. Not complaining, but wondering if this can be configured to just update the affected files. Not sure if this is an Adaptivetheme issue or a Grunt issue, I'm guessing more Grunt, but thought I'd ask here.

2) I am not getting the scss files in my element inspector in Chrome, and I am not sure why. The odd thing is that for another instance of Drupal I have running with Adaptivetheme, it is showing the SCSS files in the element inspector, so I am thinking it is not a Chrome issue, but something going on with the code base. I just tried using a default gruntfile in the theme where I'm having a problem, bu that didn't change anything. So: Is there a setting which can affect the visibility of the SCSS files in Adaptivetheme?

3) I noticed that there is a CSS file which is not mapped back to a SCSS file: title-styles.css . Is this by design?

Thanks in advance for anyone who has answers to any of these questions. In the meantime, I'm going to keep looking, especially as to why I'm not seeing my SCSS files.

1. Should depend on which file you are editing, if it's the _variables partile or any other file that affects all files, they will all rewrite, but if your editing a file like _comments.scss only that file should update - thats how it works for me.

2. Yeah, huge PITA, it used to "just work", now I find I have to use a workspace and map the files, see this guide (best one I have found)
https://www.hackmonkey.com/2014/sep/configuring-css-source-maps-compass

3. title-styles.css should be in a sub-folder called /generated/ it is created when the Title Styles extension is enabled.

@Jeff Burnz, thanks very much, especially for no. 2! That's a huge help. As for title-styles.css I did find it in the directory structure, it's just not mapped back to any SCSS file, correct?

Thanks again for sharing that link on hackmonkey.com

Getting the hang of this.

Last question for anybody: Adaptivetheme 7.x had style sheets organized via global styles, and via breakpoints. I'm not seeing any similar patterns in 8.x, where we can, for example, set a font size per breakpoint. Is there a way to do that in 8.x?

I'm a big adaptive themes fan

but…still having trouble getting it to work on osx, and oh how I've tried. been using sass for a few years now, thats not the problem, it's just that I've been doing it with a handy app called Compass App.

so I've reinstalled my whole operating system (i tried everything else I could first... believe) and im on OS X El Capitan running php 5.6

I’ve installed drupal 8.0.5, all went well.

I’ve unticked Aggregate CSS files in /admin/config/development/performance

I’ve installed adaptivethemes generated a theme

in the theme folder themes/dee/ when I type "bundle install"
i get: "Your Ruby version is 2.3.0, but your Gemfile specified 2.1.5"

when I type "rvm list" I get:

RVM used your Gemfile for selecting Ruby, it is all fine - Heroku does that too,
you can ignore these warnings with 'rvm rvmrc warning ignore /www/sites/deejarlett/public_html/themes/dee/Gemfile'.
To ignore the warning for all files run 'rvm rvmrc warning ignore allGemfiles'.

rvm rubies

ruby-2.1.0 [ x86_64 ]
=> ruby-2.1.5 [ x86_64 ]
* ruby-2.2.1 [ x86_64 ]

# => - current
# =* - current && default
# * - default

....so it looks like 2.1.5 is selected??

so I try it anyway and type “grunt”
write something as a test in styles/uikit/components/base.scss
#masthead{
background-color: black;
}

I get

Running "watch:uikit" (watch) task
Waiting...OK
>> File "styles/uikit/components/base.scss" changed.

Running "compass:uikit" (compass) task
Your Ruby version is 2.3.0, but your Gemfile specified 2.1.5
Warning: Task "compass:uikit" failed. Use --force to continue.

Aborted due to warnings.
Completed in 1.506s at Mon Mar 07 2016 20:43:26 GMT+0000 (GMT) - Waiting...

so I type “grunt --force” and get:

Running "watch:uikit" (watch) task
Waiting...OK
>> File "styles/uikit/components/base.scss" changed.

Running "compass:uikit" (compass) task
Your Ruby version is 2.3.0, but your Gemfile specified 2.1.5
Warning: Task "compass:uikit" failed. Used --force, continuing.

Running "postcss:css" (postcss) task
>> 31 processed stylesheets created.
>> 31 sourcemaps created.

Done, but with warnings.
Completed in 2.147s at Mon Mar 07 2016 20:46:00 GMT+0000 (GMT) - Waiting...

and I can see updates to all the css files in “components”
but no change…in “generated” (maybe thats fine)
and more importantly no sign in firebug of the #masthead being coloured black at any point.

taken me ages… losing the will a bit now… any help much appreciated

Ben

update... looking at themes/dee/styles/css/components/colour.css I see all kinds of good looking css
when I write in themes/dee/uikit/components/colour.scss and just delete @import "partials/base/base"; @import "partials/theme/color"; to see what happens and save
I get:

OK
>> File "styles/uikit/components/color.scss" changed.

Running "compass:uikit" (compass) task
Your Ruby version is 2.3.0, but your Gemfile specified 2.1.5
Warning: Task "compass:uikit" failed. Used --force, continuing.

Running "postcss:css" (postcss) task
>> 31 processed stylesheets created.
>> 31 sourcemaps created.

Done, but with warnings.
Completed in 2.050s at Mon Mar 07 2016 21:07:44 GMT+0000 (GMT) - Waiting...

then look at themes/dee/styles/css/components/colour.css I can see it's been updated... but the old css is still there...
is there some obvious checkbox that I'm too blind to see?

Ben

Please help. I'm having to resort to css. I'm sure this is easy and I'm missing something obvious.

I don't understand what you mean by " can see it's been updated... but the old css is still there...".

Also I think I'll leave Ruby unspecified, only problem is it could be old and have some issue, esp some older macs.

Hi Jeff, thanks for your reply. Sorry for lack of clarity. What I meant was I could see the file had been updated by its timestamp, but the css I added at the bottom of the file didn't appear.

I removed the ruby specification line and it seemed to go a bit further... so close, but no banana yet :)

I got a couple of warnings (that forum posts elsewhere suggested I ignore for running grunt) and an error... meaning grunt isnt running.

warnings on npm install

npm WARN deprecated lodash@0.9.2: Grunt needs your help! See https://github.com/gruntjs/grunt/issues/1403.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.

error on grunt

Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'supports-color'
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

so I used grunt --force and got the following when I as an experiment (not that I'd want to do this, just looking for something I could easily see) changed the following code in _elements.css line 11-14

from

html,
body {
height: 100%;
}

to

html,
body {
height: 50%;
}

in base.css (the file timestamp changed so it was re-written by grunt) lines 122-125 the code showed no change and was still

html,
body {
height: 100%;
}

this was the terminal output:

Gonzo:amor ben$ grunt --force
Waiting...
OK
>> File "styles/uikit/components/partials/base/_elements.scss" changed.

Running "compass:uikit" (compass) task
/usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/spec_set.rb:94:in `block in materialize': Could not find chunky_png-1.3.5 in any of the sources (Bundler::GemNotFound)
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/spec_set.rb:87:in `map!'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/spec_set.rb:87:in `materialize'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/definition.rb:137:in `specs'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/definition.rb:182:in `specs_for'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/definition.rb:171:in `requested_specs'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/environment.rb:18:in `requested_specs'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/runtime.rb:13:in `setup'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler.rb:92:in `setup'
from /usr/local/lib/ruby/gems/2.3.0/gems/bundler-1.11.2/lib/bundler/setup.rb:18:in `'
from /Users/ben/.rbenv/versions/2.1.5/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /Users/ben/.rbenv/versions/2.1.5/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
Warning: Task "compass:uikit" failed. Used --force, continuing.

Running "postcss:css" (postcss) task
>> 31 processed stylesheets created.
>> 31 sourcemaps created.

Done, but with warnings.
Completed in 2.148s at Wed Mar 23 2016 08:38:05 GMT+0000 (GMT) - Waiting...

Have you done a bundle install? Are the Gems even there, this is telling me there are failing requirements:

Could not find chunky_png-1.3.5 in any of the sources (Bundler::GemNotFound)

Cool! Works now! I got confused i think by the gem install bundle and bundle install being so similar. Thanks so much :)