There is a really great article written on CSS tricks called Gulp for beginners which covers this topic far better than I could, however, unfortunately, it is related to Gulp 3.x, which has changed not insignificantly with the later release of Gulp 4.x
At iO Academy we used to use the CSS Tricks article for reference, this article is an attempt to recreate the tutorial points from the CSS Tricks article with updated examples for Gulp 4.x. If you want an introduction to what Gulp is and why we use it, I strongly suggest the previously mentioned article.
Installing Gulp
Assuming you have Node and NPM installed, we need to start by installing Gulp into our project, to do this, run the following command from the root of your project folder
$ npm install gulp --save-dev
Note: this installs Gulp to your current project as a dev dependency, make sure you have created a new project folder and have navigated into that folder before running this command.
If you check the project folder when the command has finished executing, you should see that npm
has created a node_modules
folder. You should also see a gulp
folder within node_modules
.
Now that we have Gulp installed we can start to use it, we are going to assume the following directory structure, if you are using a different one, you may need to adjust your gulp JS to suit.
|- app/
|- css/
|- index.html
|- js/
|- scss/
|- gulpfile.js
|- node_modules/
|- package.json
Creating your first Gulp task
First we need to require Gulp into your gulpfile.js
var gulp = require('gulp');
We can now begin to write a gulp task with this gulp variable. The basic syntax of a gulp task is:
function taskName(cb) {
// code for your task here
cb();
}
exports.taskName = taskName;
Replace all occurrences of taskName
in the above example for the name of the command you wish to use when running gulp, i.e gulp taskName
An example of this would look something like this.
function hello(cb) {
console.log('hello');
cb();
}
exports.hello = hello;
Which you can then run from the command line using gulp hello
.
Sass with Gulp
Now that we have set up Gulp, we are going to use it compile our Sass. First we need to install the gulp-sass module as a dev dependency.
$ npm install gulp-sass --save-dev
As before, we then need to require this into our gulpfile.js
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
We then need to create our sass task
function sassCompile(cb) {
return gulp.src('app/scss/style.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'));
cb();
}
exports.sass = sassCompile;
Once the task is setup, we can test that it works by creating a style.scss
file inside the app/scss
folder and adding some Sass to it. Below is some example code for you.
$blue: #0000ff;
body {
background: $blue;
}
If you run gulp sass
in the command line, you should see that a styles.css
file was created in app/css
and was compiled to css.
The above example compiles a single file into a single file, while there are different CSS architectural approaches, generally I recommend using Sass imports in a single base file such as style.css to then import all your seperate CSS files. If you are using a different pattern however you may want to compile more than a single file, you can do this using wildcard selectors, or Node globs, by replacing the src with something like the below. This will compile all .scss files inside app/scss
as well as all child directories of that folder. Each scss file will become the equivilent css file.
app/scss/**/*.scss
Auto-compiling scss files
While being able to compile our scss files with a single easy command is great, it's not particularly practical, instead we want to create a watcher that will auto-compile our sass any time it detects a change.
We can do this by setting up a gulp watcher. Using a similar syntax to the gulp task, we first create a named function and call gulp.watch
. This takes 2 arguments, the file pattern to watch (all .scss
files in this example) and the function to run when any of those files change.
function watch() {
gulp.watch('app/scss/**/*.scss', sassCompile);
}
exports.watch = watch; // dont forget to export your command!
Note: The files to watch are all
.scss
files, not just the mainstyle.scss
, otherwise it will not auto-compile when any file changes. The file in thesassCompile
function should still only point at thestyle.scss
file, so that it only compiles that file (and everything it includes) when the watcher is triggered.
You can use this watch function for any other watchers you may need, so you can start all your watchers with a single command.
$ gulp watch
There are lots of other useful things you can do with Gulp, some of the things you may want to look into are included below.
- Autoprefixer - vendor-agnostic CSS
- Sourcemaps - easier debugging of compiled CSS and JS
Top comments (1)
Your
cb
never gets called back here since it comes after a return statement, fyi.