Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn how to install and set up PostCSS in your project using Gulp.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video you'll
learn how to install and
0:00
set up PostCSS in your
project using a built system.
0:02
You can view the PostCSS setup options and
instructions by visiting postcss.org and
0:06
clicking the setup link in the main map.
0:11
This will take you to
the PostCSS GitHub repository, and
0:14
under usage you'll see all
the available usage options.
0:18
PostCSS is written in JavaScript and
installs via NPM so
0:22
you can use a task runner like Gulp or
Grunt,
0:27
even a module bundler like Webpack,
to handle your PostCSS processing.
0:30
You'll see a full list of all the task
runners you can use under Runners.
0:35
Now the tools you use is up to you.
0:40
It's a matter of preference or
what's best for your project.
0:42
In this workshop we're
going to use Gulp so
0:45
you'll see how simple it is to add
PostCSS to your Gulp workflow.
0:48
And you can learn all about Gulp
by taking our course on Gulp.
0:52
I've even posted the link to
the course in the teacher's notes.
0:56
To follow along using
your own terminal and
1:00
text editor, download the project
files for this workshop.
1:02
But before you get started,
you'll need to have nodeJS, NPM and
1:05
Gulp installed globally on your computer.
1:09
So be sure to check the teacher's notes
for resources on installing those tools.
1:11
In the project files I've
already installed and
1:16
set Gulp as a dev dependency for
the project.
1:18
So you should see a package, that json
file, listing Gulp as a dev dependency.
1:21
And a Gulp file,
that js that calls in Gulp.
1:28
This is where you'll add and
configure all your PostCSS plugins.
1:32
So, I'll switch over to my terminal and
navigate to the PostCSS folder on my
1:37
desktop with the command
cd desktop/postcss/.
1:41
To set up PostCSS with Gulp,
you use gulp-postcss,
1:48
a simple plugin that handles your postcss
processing via Gulp tasks and functions.
1:52
So to install gulp-postcss
as a dev dependency,
1:58
I'll type the command npm install
--save-dev followed by gulp-postcss.
2:03
So now to use gulp-postcss in my project,
2:15
I need to require it at
the top of my Gulp file.
2:18
So say var postcss =
require('gulp-postcss').
2:22
Next I'm going to create two
new folders inside the project.
2:33
I'll name one folder src for source and
2:38
I'll name the other folder dest for
destination.
2:43
Now, the source folder will contain
your source CSS, the CSS you write.
2:49
So, inside the source folder, I'll
create a new CSS file named style.css.
2:56
And the dest folder will
contain your processed CSS.
3:03
Gulp and PostCSS are going to
generate the output CSS for
3:07
you in this holder so you don't have to
add any files inside this dest folder.
3:11
Next, over in my Gulp file,
I'll create a new Gulp task that will
3:16
read my source CSS, process it through
PostCSS, and output a new CSS file.
3:21
I'll name this task CSS.
3:28
So we'll say gulp.task('css', function).
3:30
Inside the function,
I'll create an array named processors.
3:40
And I'll leave the array empty for
3:49
now because later we'll add the PostCSS
plugins we want to use inside this array.
3:51
Now we'll need a return statement that
specifies the files we want to target for
3:56
processing.
4:02
In this case, it's any CSS
file inside the source folder.
4:03
So we'll point Gulp to
the source CSS by typing
4:07
gulp.src, then inside the quotes,
4:12
we'll define the path to any CSS
file inside the source directory.
4:17
Then we'll use the pipe method to
run the source CSS through PostCSS.
4:26
So inside pipe,
we'll call the PostCSS function
4:32
to execute the actual PostCSS processing,
4:36
then I'll pass processors
as an argument for PostCSS.
4:40
And this will run the source
CSS through the plugins defined
4:44
here in the processors array.
4:49
Next, I'll use the pipe method again to
4:53
output the processed CSS into a style
sheet inside the dest folder.
4:56
So in the pipe method,
we'll say gulp.dest,
5:01
then we'll define the path
to the dest folder.
5:06
So here the gulp.dest method tells Gulp to
5:12
output the file to the dest folder
once the task is completed.
5:15
Now there's nothing special about
the source and dest folder names.
5:21
These are just the names I used to
store my CSS and the finished CSS.
5:26
So for instance you'll often
see this folder named build or
5:30
it could just be called styles.
5:35
The important thing is your HTML
file needs to reference the CSS file
5:37
in this destination location, because
that's where the finished CSS will live.
5:42
All right.
5:46
It looks like we're all set.
5:48
So let's run a compiling test.
5:49
Over in style.css,
I'll write a simple test rule.
5:51
For instance,
we'll say body background: red.
5:55
I'll save my style sheet and my Gulp file.
6:00
And now the name of our Gulp task is CSS,
so
6:04
in the console I'll run the command
gulp css to run the task.
6:08
So now if you open up the dest folder,
6:15
you'll see that a new style.css
file has been created.
6:18
Great, it worked.
6:22
So this file here is your built file and
PostCSS's final output.
6:25
It's the style sheet
you'll link to your HTML.
6:30
So you shouldn't make any changes
to this destination file.
6:33
Any style sheet changes or new CSS should
be written in the source CSS file only.
6:39
Now currently, the code is exactly
the same as the code in the source CSS.
6:46
That's because we haven't installed and
defined any PostCSS plugins yet.
6:52
We'll do that in the next video.
6:55
Finally, I'm going to create a default
Gulp task that will watch for changes in
6:58
my source CSS and automatically process
the CSS as soon as changes are saved.
7:02
That way, I won't have to run the command
gulp-css every time I add code or
7:08
make changes in my style sheet.
7:13
So back in my Gulp file, right below
the CSS task, I'll create a new Gulp task.
7:15
And since this is the default task,
I'll name it default.
7:23
Inside the function, I'll type gulp.watch.
7:32
First, I'll list the path to any
file inside the source folder with
7:38
the extension .css,
followed by the task I want to run.
7:43
So inside this array I'll define css.
7:50
So now when any file in the source folder
with an extension of .css changes,
7:53
the gulp.watch method will
run the CSS task against
8:01
those files to process them and output
new CSS inside the desk folder here.
8:07
So I'll save my Gulp file.
8:15
And now I can simply run the command gulp
8:18
to apply my latest scope file changes and
start the default task.
8:22
And as you can see in the console output,
Gulp is now watching for
8:26
changes in my CSS files.
8:30
So for example, if I go to my source CSS
and change this background value to blue,
8:33
once I save my file Gulp automatically
updates the CSS in the dest folder.
8:41
If I go back and add a new property like
8:47
color tomato, my favorite color.
8:52
Once I hit save it adds
the declaration to my output CSS.
8:57
Cool.
9:03
You can stop running the watcher by
typing control c in the console.
9:04
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up