again my name's tim ericsson welcome to
go for beginners we did before we turned
on the recording we pulled the people in
the room a little bit about where they
were at and develop experience we have a
handful of people who well but half the
room I think of at least used gulp
subset of those maybe half that those
have actually edited or updated to file
and there's a number of people who've
never used to before I get my name is
Tamara come from the Twin Cities I'm
also involved in Twin Cities Drupal Camp
planning I'd love to invite you all to
Twin Cities Drupal Camp if you haven't
been there before if you have questions
about it ask me later I and I have a
small shop called trip low I have a
couple of contractors who were put with
me we're very small I personally
consider myself kind of a hacker in the
backend I do mostly either front-end
development or project management you
know and even there like I work with
sass and CSS I don't do it so I'm not a
deep coder and that sort of what led me
to do this this presentation is well my
goals for today are you know for those
of you who aren't using golf or who've
been wondering what it was to just make
sure you can walk out of the room sort
of understanding what it is and why it
might be a value to you if you're
already using it to maybe be mystifying
a little bit again what when I first
started doing some presentations at
camps people said hey if you want to
learn something so I enough to do good
session on it and then dig in and it
wasn't I had started to dig into gulp
just to demystify it for myself and then
I thought this would be a good session
because I'm a beginner in a way to
myself that has broken it apart to
explain it to myself and explaining it
to other people would be helpful
at any point if any of you who use golf
before want to contribute to how you're
using it with other tools or to put this
in context please do because I think
that's really helpful I would feel
successful today if I learn something
from you folks today about golf or how
maybe how I'm not using it
oops the very basics of golf what golf
is is a toolkit for automating painful
or time-consuming tasks in your
development workflow okay
so repetitive things that you have to do
over and over I think my well we're
gonna get we're going to talk a few
about what some of those things are I
mean that compiling your SAS things like
auto prefixing things linking we'll talk
about that in a minute those are some of
the kinds of things but basically golf
is just a tool to help you automate
things in your front-end workflow I got
this I think from some of your comments
can relate to this
I like Drupal Drupal 7 I like Zen a lot
and Zen has come with over time like the
first versions of Zen I use didn't have
any sass built in at all then I got than
learned that if I typed install compass
and compass watch that it did these
mysterious things that made my sass
pretty but I never really understood how
that all worked and didn't care because
it was getting my job done when we got
to su call 6 I was very frustrated
because compass watch didn't work
anymore now I had to type compass skull
or gulp watch and also it started doing
a bunch of other things that I didn't
understand but didn't bother me because
they were there when I got to Drupal 8 I
opened up the bootstrap theme and wanted
to work with that and at the time and
this was quite a while ago there was no
SAS compiler built in so for the first
time it was like oh I have to actually
add sass to my own four to a theme if I
want to use it I had to add
I think what happened was according to
my notes it came with rock but I'd
already learned compass and I'd learned
gulp I didn't want to learn drum so I
went ahead and installed figured out how
to install golf into my Drupal 8 theme I
also do a lot of work with backdrop and
I'm involved in the backdrop community
theming and backdrop is the backdrop is
very much like Drupal 7 the theming is a
little bit different because of the way
they do theming there's a lot fewer
contributed themes and backdrop right
now and none of them to my knowledge
include sort of things tools I thought
built in and I'm actually one of the
things I'm hoping to do expand my own
knowledge bassists actually contributing
to backdrop that actually has tools like
gulp built into it a lot of a number of
the things that like say Sam would have
had for for Drupal aren't necessary in
backdrop and then some of them it's just
not determined to market so anyways
that's a little bit how I got here and
why I started needing to learn more
about golf but was I couldn't no longer
rely on the fact that somebody else had
built it into my theme and I could just
get play this is basically just reset
well this was saying is with the last
gulp Proctor I still have a project in
Zen that uses the golf built-in and
every time I take gulp watch and if you
don't know what that is we'll talk about
it in a minute this all would go by on
the screen and
actually this was a successful gulp run
for me despite all of those red errors
because the bait the basic setup for
golf was was checking for all kinds of
style errors that I didn't care about it
was trying to link things that I didn't
care about I was trying to do all kinds
of things that I didn't care about but
at the end it would say your CSS has
been compiled I was happy then I ignored
the other four hundred lines of messages
and that just didn't feel right to me so
if I should know what's going on here I
ought to be able to customize this and
it make it work and then I sort of you
know once I installed called myself I
have the opposite problem of now I got
to get it to do those things that I want
you know it's not just eliminating
things I don't want but what are the
things I do want and how do I get it to
do those I want to refer you there's a
blog post and I have it open here
Drupal theming 101 with golf and this is
a great blog post if you've never
installed golf I'm not going to go over
this in detail but this is what I used
and it's a great blog post that just
sort of walks through the steps of
installing golf but basically how many
people are familiar with NPM package
manager everybody basically this walks
through the process of installing don't
remember if I used homebrew or not but
basically inside making sure I got NPM
installed and then using the node
package manager to install go up into my
theme
initializing it we're going to look a
little bit at the theme file structure
once you have creating your gulp file
this is the key to a gulp installation
we're not going to do all of this today
but here is and there's some little
things like some customizations that I
couldn't even explain to exactly why I
needed to do these but they're just
certain some changes for their specific
to triple that like the gullet the
default sort of gulp install file does
it work in Drupal when you need to do
this to make it work there if anybody
you know wants to explain those to me
right now they're welcome to but they
don't seem too important and I don't I
wouldn't worry about it I think the last
big thing in this blog post is that
installing your specific modules which
is going to take me back to where the
way they were going go back to my slides
I think my next
there we go some of the things for each
task you want to do in golf and there
are hundreds of plug-ins for each one a
test you want to do there's a plug-in
bulb out of the box is a I guess it's
called the task runner is that right
sort of a category so it is a it sits in
the sense its own framework right gulp
doesn't do anything itself it gives you
the ability to to automate a whole bunch
of tasks if you have to decide which
tasks you want and each one of those
need their own totally there's hundreds
of options right some of the obvious
ones that I think people do most often
and that we're most likely to run it
into our work is compiling our SAS and
how many people have not or have who's
not use a spoofer
or less just one to guess why you didn't
understand my cup compilation question
so let me give you a brief the quick
definition of SAS although you may know
what it is but just in case anybody
doesn't SAS is a pre-processing length
or way to pre-process your your CSS that
allows you to do things like nest CSS to
create variables in your CSS to create
equations in your CSS to like calculate
some of these things I think you could
you know like equations I'm starting to
see that you can do it straight CSS but
bulb gives you or SAS gives you a few
different or some things like that I
think the I don't think there's any
variables in regular CSS right now so I
can define a variable you can define it
that you can turn into just CSS
okay so I'm still I don't know if you
know if anybody in here knows where the
trends are going if like SAS is becoming
less necessary one of I like to use bulk
because I also use it to our SAS because
I use it to nest things where I put you
know sort of rules within rules that
wouldn't work in CSS but golf processes
those and creates the correct rules out
of it and I don't think I have time
although at the end if we have time you
know anybody's interested in that we
could look at it I mean there's anybody
heard is it that likes fast is becoming
less necessary
she was just commenting that that she's
heard that that state might be in the
works for CSS we've already identified
that CSS is using variables but mix-ins
is something that is another thing in
SAS and what mix-ins are are sort of
like snippets of CSS that you might want
to deter my can include a PHP include
statement right where you you put
together a batch of CSS rules inside of
a mixin and then you can just sort of
say include this mixin than any of your
other CSS rules that won't work in the
CSS directly but you put that in your
sash you run it through a compiler and
the compiler generates CSS using that so
if you want to if you have a
particularly batch of CSS you're using
change it once run it through the
compiler and it changes everywhere so
less is just a different version of it's
a different language way of pre
processing your ear set ears the CSS
I've only used sass
I don't know that lessons any better or
worse it's just it engulfed is in
deference it will compile either so I'm
showing you SAS today but that's just
because that's what I use SAS does CSS
and JavaScript a great gulp the CSS and
JavaScript aggregation for the most part
Drupal does that for us
but if you were the gulp file for a
different project and you had 20
different CSS files you wanted to
aggregate you could rely on gulp to do
that for you
compressing and minifying your
JavaScript optimizing your images
linking which is just checking for style
errors a lot of those airs in that when
I ran gulp were style errors where if
you you're not supposed to use 0px
pixels that's a styling error but it it
works i'm not pure enough to worry about
that
so my you know gulp file is pointing out
a hundred places where I put 0px instead
of just zero and I just ignored that
now that's I'm not recommending this yes
so that's another thing it will do warn
you about deprecated code I would
actually one of my goals is to actually
use tests to improve my style by paying
attention to those errors I'd like in
the future to quit ignoring them and
actually fix them there there is also
there is a sort of a rule file in the
sass where you can go in and specify
which things you want this has to check
for so for example you might decide that
you don't care about the zero pixels
thing but you do care about having two
spaces before
commander or something like that all
these different stylers and you can turn
on and off the ones you want and it will
just check for the ones you want or you
know I think there might even be some
where we're like how how fine you wanted
to check I can't think of any examples
now other than for example you can you
can check for browser compatibility and
you can define like how many browsers
versions of the back past browsers you
want to detect them and you can actually
tell it check for the last three
versions or the last eight versions for
compatibility any questions exactly
this can help you standardize your
workflow across the team because you
create these files you can commit them
to get as part of your theme and
everybody is working under the same set
of rules and processes anything else
that anybody else does with dult so
there's again there's hundreds of
plugins and modules of things you can
add your workflow with golf these are
the kinds of things that I do most
frequently don't nothing else I did is
that that's not on this list is it oh
okay I think we're going to demonstrate
that in a minute
so this is the basic process for getting
started and this is in some ways a quick
summary of what we
of what we had in in that blog post we
have to install gulp we need a gulp file
and the gulp file is specific to the is
what tells golf what to do
your package.json file is what tell is
what plugins you need so you can just in
addition to like standardizing the rules
you have a package.json file so when i
commit that to my repo and benji
downloads it he can just say npm install
and it will install exactly the same set
of modules the same versions and on his
machine to run gulp and then at the end
the last thing we need to do is well we
need to install the plugins and as we
install each plug-in it automatically
gets added to the package JSON file I'm
going to look at both of these things in
a second so this is my package JSON file
and basically this just defines that the
installation this is the big thing here
is it saying which which plugins were
using so when I run npm install it's
going to go through and install all of
those are fine again I'm not an NPM
expert I think it is an update you can
do like NPM update or something or would
you just do NPM install again like when
you want to update your files ok but
that's so
I used a rule that said like you are
when I said npm install' let's see if I
think I can do this and I copied this
from the blog post but if I go npm
install there we go
gulps a slanted it's Auto filling then
there's this saved out at the end and
I'm pretty sure what that saying is that
I want to use the latest dev version
does that make sense does anybody know
this I'm still learning but that's sort
of a clue if I wanted I wanted to do so
very specific like I knew I needed a
version of one of these plugins that was
two versions back I would type that in
here and say you know install that old
version and then my gulp file would
reflect that or my JSON file would if we
go back to the okay we were looking at
the screenshot I believe the little up
arrow or the carrot before the version
number is saying that that or greater so
again if you have questions about this
you can verify that this would be
pictures that makes sense so that's
defining basically the range and you can
be more specific or more general however
you want that's just what I've been
doing
so that's come up with a lot of change
right a specific thing you know yeah if
it spits out some these days deprecated
now you might want updated but typically
use bright happy it's working yeah or if
you hear there's a fancy new feature
that you don't want to give a hold on
you might see cover there are two
sections dependencies and death
dependencies yes - - save saves as a
regular dependency - - save - dev say -
the second section is definitely check
out good so there's still things I'm
figuring out about how this works
this is just the theme so it was kind of
a magical moment for me when I first
realized I could build my own theme from
scratch originally I learned how to
create sub themes right I started with
then it had all this magic inside of it
I would create a little sub theme and
overwrite a few specific themes but I
ran into like backdrop where maybe I
want to start a theme absolutely from
scratch and how do I add this and this
is like an example of a theme that's not
necessarily a sub theme although it
could be but it's you know you might be
building it from scratch and it's still
pretty basic it doesn't have any grid
system or anything like that built into
it but it it does have cess and that's
the main thing the node modules file we
wouldn't commit that to get because that
you know each developer can just run npm
install in the package.json file right
yes I've noticed that I have I have a
site where we have a lot of sub themes
because we're using domain access and I
haven't quite figured out how to not
install all the modules in every theme
and it's I got to figure that out if
anybody wants to help me afterwards
what else about this so we have the so
you know we I have a CSS folder well
this isn't the light this is a
screenshot we'll look at that in a
minute we're going to start without
there being any CSS in there in our sass
file we're going to have some some basic
sass files with a couple of really
simple rules the info file that specific
to the drupal but the other thing here
is our call file we want to look at a
gulp file
why is that off the page okay when you
create about file and we're going to
look at a real gulp fly 11 for a live
one in a minute this one's real the
first thing that the gulp file does is
just define what your what your plugins
you're using this is I'd like the JSON
file this doesn't mean they're installed
and I had the reason we started a few
minutes late was I had a panic attack
when I ran gulp three minutes before a
session start and I got a bunch of
errors saying the gulp none of these
packages were installed so I was quickly
installing got packages for some reason
I must have do I was doing some cleanup
on my laptop and I think I inadvertently
deleted these so I just ran NPM install
for each one of these with that that
command that you saw and reinstall them
the the gulp is you know the basic thing
browsersync I'm still a little bit
confused on the purp this is something
that I know comes with the Zen I think
it does anybody want to explain what
this does
yes that's why I'm confused about it
because well I'm not it working I have
got it working what I think it is and
then other times it doesn't seem to be
working and it just kind of confuses me
I think it does a few more things than
that but that's one of them is like it
just automatically refreshes your CSS
for you
I tend I think a lot of the times it's
not working for me so I just reload the
page you can build your clearing the
cache into your workflow so every time
you make a change
gulp clears your cache and you don't
have to worry about that
so sass is the basic tool we're using to
create our sass autoprefixer is going
back and adding those prefixes for older
versions of browsers you don't have to
worry about that sass will do all of
that for you
does anybody know what source maps are
reduce them yeah well it's gonna run
it's got it you know many of us assets
you don't really organize and be more
component base when you're building
offering off your destined sass rules
and then live all compiles you can just
ran CSS file you're expecting in the
browser you don't know what line of sass
you would go to edit that no comment
right on each one there's also a way to
do is a separate file
don't have to keep by me or you can't
commit it but that way at least when
you're comparing differences around the
road you don't get like a million lines
and differences in your CSS just because
you change one line of code
exactly and I'm gonna repeat that back
and sort of show so for those of you who
haven't used sass one of the nice things
about sass right and you can do this
with CSS as well just to break your CSS
into into different styles and I
apologize I don't you know there are
different systems for organizing your
CSS and says this was something I had
hopped through together so it may not
fall into any system you've seen before
like I have a CSS file for just or FC
assess and with sass I think you can get
by with either of those it's not
prefetch it isn't the extensions s CSS
or or sass they both work I've always
used that CSS but so these are some just
sample ones that I have in here they
they compile well you can set your set
your gulp file up to either compile
these all into one sass file and then
pre-process it or vice versa so you can
make a bunch of CSS files and combine
that afterwards into one but either way
you end up with one long CSS file Drupal
that has all of your CSS in it well if
you're doing a browser inspect and you
want to know which rule you have to edit
to change something your browser tells
you CSS line 1342 or says and sure and
that's not helpful
so what source Maps does is it it yet
includes markup in the CSS file that
shows where all of the sass is coming
from so when I inspected my browser it
tells me the line number and the sass
file where I can find my original
work and again you need you would either
manually need to generate those with a
tool or you can automatically process up
with gulp Oh
OTO prefix your alt environments
did I put that one in there I don't
remember what that one is anybody know
what that is okay
actually there's a couple of things in
here an engine and don't remember what
notify years I imagine it has something
to do with messages that are being sent
by gulp and then we actually have the
the gulp SAS file or Herc dependency but
those are some examples many others any
questions here ok so I think that's
we've looked at
sort of we looked at the structure so I
have basically the way I've set up my in
there different ways of doing this but
I've set up my theme to have right now
it's an empty CSS file and I have a sass
to our directory I have a sass directory
and I have a subdirectory for components
and most of these are empty I believe
that I have don't want to go back to to
here so most of them I just deleted all
of the to complicate things I have a
couple of simple things and then in my I
have a Styles dot CSS a CSS file which
basically identifies all of my my
component directories and then when we
when we when we run gulp it's going to
find all of those as CSS files compile
those into CSS and it's going to
automatically generate a style sheet for
me and we're going to just go ahead and
do that now well first thing we're going
to do actually I'm gonna dump in sort of
live load all gulp is is running
commands right so I actually like the
first time I asked how to do this
somebody couldn't tell me but I thought
what is the gulp version of hello world
just type hello and I basically created
a golf task which is to say hello
Chicago look at the gulp we'll go back
to the gulp file cuz that's gonna show
No okay now it's too big the last time I
did this that was the complaint
afterwards which meaning fumbling with
my trying to get
so here's the gulp file we're working
with right now it in the first task so
basically I'd this is JavaScript if you
know JavaScript you're going to be
comfor comfortable and about file than
the rest of us but any you don't have to
know JavaScript to know how to hack it
right so gulp dot task is just saying
hey Ram this is a task I want to run
we're setting right here is the name of
the task we want to run then we have the
function here which is actually you know
what we want to happen and I'm just
doing a console thing so again what I
when I run gulp hello
it runs this task if I want to actually
compile CSS and we're going to automate
this even better in the future but I
created a task called simple sass so I
can go back here and say call simple
sass I run that gulp apparently has done
some things it says it's finished simple
sass if I know but now go back to my my
directory you're gonna notice there is
now a the Styles a CSS sheet that wasn't
there before so it's taken all of my
then if I open it up in the in the
browser this is the window that so maybe
it has something I don't know if it has
anything to do with the way it was
created because sass created it that or
gulp created it that it won't expand but
I can't blow it up for you but it
doesn't really matter because it's just
it's some CSS and it's coming from
multiple sass files if we go back
we go back into our sass and we change
I'm not sure you know the the cat's
thing to read and if I save that and go
back and pre-process by my sass again
now if we go in we go into our CSS
Styles cats has been changed and in red
I would show this live but I don't know
that it's you know on a site but I'm
afraid that's gonna break and it's
probably not gonna work
what so let's move on to some of the
other things just some of the other
tasks we can put in our bub file Thank
You forgeting so here is another
basically a longer task
it was not very creative in my naming
and I called it SATs tests one this I'm
gonna try making it a little smaller
well I don't you can see anything more
but to you know that I'm defining it by
the name of sass test one it is creating
and then returning a style for of a
style CCS actually that's that's that's
what the source that we're defining the
source of where we're getting our SCSS
we're passing the sass through the sass
compiler we're passing it through the
autoprefixer so we're going to auto
prefix some things and then we're
generating a CSS file at the end
I actually let me we'll just delete the
existing we don't have to delete it it
will overwrite it but I think it's more
visual if I actually get rid of it call
what was it
thanks it's ass test 1 yep
who know that was the wrong name
hope that was the right name so why did
that not work
well oh you're right you're right that's
it I don't I did not it had been
commented out I uncommented it and
didn't save it so there we go it ran
gulps ass one and now we have we once
again we have a CSS file if we go down
to example it's now added auto prefixes
I can have any oh yeah I can have any
prefixes for old browsers prior to us
running man let's see what else okay it
I deleted the old CSS so it created a
new one but if I hadn't deleted the old
one it would have just over run it it
would have you know the existing one
there it's not a problem and in fact
what we're gonna do is we're going to
turn on this a swatch or those called
watch command in a minute
where every time I save a file it
automatically pre processes does all the
tasks and overwrites the file and if
you're using browser sync will actually
refer you know reload the page in your
browser and so you can just you know
change blue to red hit save and your
browser will will be will be affected
you will see red blue instead of
rounding your browser I mean you know
within a few seconds
so you don't want to like edit your CSS
file directly right this is a good
warning your CSS file is getting
overwritten all the time if you want if
you come into a theme that has sass in
it and is using and it's being used it's
using sass to generate the CSS or the
CSS yes and you need to you don't know
say how sir you don't you're not set up
create a new CSS file and at that I mean
there may be better solutions out there
but this is would be my quick hack is to
just create than a second CSS file with
just your non you know your stuff that
isn't coming from sass I've run into
that situations where I didn't have wow
I wasn't even sure how old the set the
the sass files were and so rather than
mess with them I just created a new CSS
and competitive any other questions or
comments
that's less than 1% users I would love
for anybody in the room to the question
is how important it is is it to auto
prefix your CSS I yes I think that's the
roster depends on which way your client
is and do they have a specific idea if I
think it's really important if your
client has lots of users on Internet
explorer I think I know there are some
people in the room that might be like
why is even questioning this because for
them it's like an absolute imperative I
have to tell you that I often don't
worry about it because my clients are
small nonprofits that are their clients
are generally using the chroming Firefox
and their CSS works fine and I'm not
doing real complicated things I think
it's also more important if you are
cutting edge you are right if you're
doing kind of cutting edge CSS you're
more likely to have backwards
compatibility problems and Auto
prefixing it my glasses yes
so yes they about yes exactly
so I wasn't sort of doing a lot of that
manually partly maybe because I'd like
to think I was confident to gulp doing
it for me when I built my own themes
I didn't haven't actually added
autoprefixer mop plug-in yet but it is
my intention to because there's no
reason not to do it when you when you
when you can automate it I'm sure that
it also is there's probably
accessibility benefits as well so it's a
highly recommend ie10 right where is it
I think they did that because if I put
like two Brown versions back it wasn't
giving me anything so I wanted to go
back a bunch to make sure it did some
auto pre flexing but yes you can I could
right there in the configuration say how
far back I wanted and how you know so
any other questions about that
so let's go back to our golf JS file the
other thing we'll notice is I have I
could run either simple sass or sass
test 1 it'll do it will run either one
of those let's do a source map quick so
I'm just uncommenting this let's see if
there's anything yes thank you if
there's anything in the the jas here
again I don't have to understand all of
the J s here if anybody wants to explain
any of that but basically it's running
it's piping the my CSS CSS files well I
think this is a little bit interesting
because I have to tell you know the
source where it is and basically I've
got some wildcards there so it's
basically saying in these duties any
file that ends with SCSS should be pre
processed and I have that problems where
I imported maybe sass files that were si
SS and Maya gulp was looking for a CSS
so it didn't find any files I just had
to change this in the in the gulp file
to fix that and then it sits in this
case it's creating a source map file and
we'll see that in a second and then it's
writing it in the CSS folder so again
we do gulp we run that command it
happens pretty quick we go back to the
directory and now we see in our CSS
directory is the styles and a style.css
ma'am and basically what happens is your
browser reads that dot map file and that
dot mount map file Maps all of the the
CSS to the proper s CSS files does that
make sense okay
fifteen minutes ten better let's
I'm not like deliberately asking for
questions because you're asking them as
we go and you should keep it up I think
probably the most important thing so I
have a few other you know I have if you
know JavaScript you could write this
yourself I don't so I did copy and paste
yes if you go to like let's let's do
this quick because I think it's
worthwhile if I want to resize my image
using gulp right I'm going to Google
Galt
do they plug-in to resize images and I
find gulp image resize this is going to
be a package on NPM org and I'm pretty
sure you know it's going to give me the
the syntax for here how to save that you
save it to your directory and it will
automatically get added to your will
automatically get added your Jazz JSON
file but you'll have to add it to the
gulp file if you're using golf and then
I think in most cases if you go down
they're gonna have an example code and
so you can then cut and paste that
example code and and tweak it that's
where I'm at still so someday I'll be
able to write that just because I'm
smart
want to go back to I think the probably
the last big thing that's worth showing
well actually let's do this one really
quick linting I'm just gonna save that
I'm gonna go to here and do the goal
blending
and so it's running all of the sass and
it has generated a handful of errors
pretty much two of them one of them or
two different areas I think actually a
couple of them that zero unit that I
talked about before you're not supposed
to have a 0px you're supposed to do if
you're doing zero just to 0 so it's
generating errors for each one of those
rather than just tolerating these I
should just go do a search and replace
it fix it right
no trailing whitespace allowed anyways
so this doesn't change the actual M
files and in this case actually I think
this might have failed to generate the
CSS because of some of some of these
errors and you can also like I click
change in the the configuration file I
can change warn me about zeros but don't
generate an error right so I expect that
level of permission do I have that and
that's here in my sass actually I got to
go to my editor in the sassy Amal here's
where you can see all of these rules and
there's well ok it's not as long as I
thought it was oh okay it's pretty long
but you can go through 0 I think is
turning editor well again our JavaScript
one is true that it is running them you
can do things like I'm the - I'm
assuming this is a like a spacing or
something you know how many spaces
you'll know after a bang or before
obeying
okay don't take my word for it look up
the exact the preferences what each of
those numbers mean style guide that's
something we haven't mentioned you can
automatically generate style guides
there's a module called is a KSS or ki
SS k SS that create style guides with
full from your CSS you actually have to
just write some code into yours your
sass and then when it will compile it
and it will create a style guide sheet
for you and it's pretty nice I found it
I wasn't I didn't keep it up so we we
did the lint thing the last thing I want
to show you is watch because I don't
want to have to every time I make the
change I don't want to have to run golf
in the command oh so there's two
actually one other thing if I go down to
my gulp I can just do if I just if I die
can define that call up my default task
so gulped as default hello means that if
I just run call that's what I want to
happen so now I don't have to write
hello I can just say gulp I probably
didn't save it
yep I didn't save it
just just run gulp and it should say
hello Chicago there it is
hello Chicago and I can add a series of
tasks and I'm going to do that for the
final thing which is my watch command
we've done five minutes okay perfect
I'm going to uncomment out my my my golf
watch and this is doing so gulp task
golf watch is compiling my sass it's
running some linting so I think the
weight and I'm going to share this with
you because I ran in to a scenario where
Golf by default will run processes in
parallel so it was running into a
problem where the it was compiling the
CSS before it finished compiling the
sass so I wasn't getting the right
success because yeah it would just
generate a CSS file based on the old
sass and it wouldn't get my updates and
I I added in this weight command
and I'm trying to remember I would
recommend googling this but but be aware
of that as a problem
so that basically I made sure that it
did the weight allowed it to do the
tasks in order in the cases where one
task was dependent on another and I'm
forgetting what what this line is about
but but basically what we've done now is
if I save this file I can go back to my
call and I can say gulp watch and I hit
save and now gulp is watching for any if
any of my CSS files change it will
automatically do all of those tasks I
added so just to prove it because I
don't know if you believe me the the
styles is still caps is red up here if
we were going to go back to to here and
we're going to change to cats to purple
I'm gonna just save it I'm gonna peek at
my command line now didn't I save it I
did say oh that's the problem
okay well you'll all believe me right
like we're almost done so I think I'm
not gonna try and fix this but basically
though this is the magic of golf right
you don't want to have to run this
command each time I know people who do
who have told me they consciously don't
use weight they prefer to run golf when
they're ready for it I always use weight
or called not wait i watch i always use
watch every time I save a SAS file it
recompiles my SAS for me so I can go
right back to the browser and can save
it go back to the browser I usually
don't have the author the browser sync
working so I have to reload the page but
that still really nice any questions so
I'm thinking that compass was more it
work targeted at specific kinds of
things it might be can somebody answer
that question but it's weird possible
inherited compass
but if that means it okay now my
understanding is that gulp and grunt are
like two different tools that do very
similar things but I'm here well well I
think I think either of them would be
considered enough from compass but I get
the feeling that people are maybe moving
more to gulp and drop that could be
wrong sure and I'm sure that gulp and
grunt are the only ones to do this there
are other tools as well but the Drupal
community does seem to be kind of
settled around golf for some reason it
works for me I'm happy with it does
anything any other comments or questions
so no well you've been a great audience
thank you for helping out please give me
feedback yeah