Preview
Video Player
00:00
00:00
Installing & Running PostCSS with Gulp
9:10In this video, you'll learn how to install and set up PostCSS in your project using Gulp.
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