The instructions for the installation below are Macintosh-specific. PC instructions will be roughly similar, but there will be significant differences that will require some googling.
If you are on your own computer, install node.js and the gulp command line-utility.
Each of the command line steps can be copied and pasted into the Terminal window and run by pressing RETURN.
- Install Node.js — the recommended for most users version
- Open Terminal (command-spacebar, then type terminal)
- To make sure the node install worked, type node -v
- Now run this command: sudo npm install gulp-cli -g
- As part of that process you will likely be asked for your name and pw. Enter them.
- To make sure the gulp-cli install worked, type gulp -v
The above process needs to be done just once.
If you are on a Lab Macintosh, node.js is already installed. However, as a non-admin user you cannot install into the default location gulp-cli wants to install to. As a result, follow these steps for a workaround.
Each of the command line steps can be copied and pasted into the Terminal window and run by pressing RETURN.
- Open Terminal (command-spacebar, then type terminal)
- You should already be in your home directory. However, just to be sure, type this command and then press return: cd ~
- Make an invisible folder to use for global npm installs: mkdir .npm-global
- Check that you made the folder correctly: ls -a | grep .npm-global
- Run this command, which is a single-line, even if it wraps here:
echo export PATH=~/.npm-global/bin:$PATH >> ~/.profile - Update your shell path: source .profile
- Check that the path to the new folder is included in your $PATH environmental variable: echo $PATH
- Change where NPM installs packages: npm config set prefix ‘~/.npm-global’
- Install the gulp command line utility: npm install gulp-cli -g
- To make sure the gulp-cli install worked, type gulp -v
That process needs to be done just once (unless you move to a different lab Mac).
Setting up a Build Process
Create The Folders and Package File
Make a new folder on your desktop: call it first-sass. Inside it, make two new folders: gulp-dev and myproject.
In the command line, navigate into the gulp-dev folder. The easiest way would be to type cd then drag the gulp-dev folder into the command line and press return. Make sure that there is a space between cd and the path to that folder.
Run this command: npm init
This will start the process to create the configuration file for your project: You will then be asked a series of questions. For the first one, give a name to the project like my-project. This name must be URL friendly.
For all the other questions, the default answer (which is in brackets) is fine. To accept the default answer, just press RETURN for each.
If you look in the gulp-dev folder, you will now see a file called package.json that acts like the configuration file for your project.
Install the Needed Packages
In the command line, run the following commands:
npm install gulp --save-dev npm install gulp-sass --save-dev npm install gulp-sourcemaps --save-dev
Each command will install a package, along with a bunch of node modules that it needs to do what it does. (If you look inside the gulp-dev folder, you will will see that there is now a folder called node-modules).
If you open up the package.json file, you will also see that it has been modified by the commands you’re just run. Specifically, adding the –save-dev flag to the commands means that a record of our installs has been saved.
Because of that, if we share our project with anyone else, they can run the npm init command to install all the modules needed for the project.
Set Up Your SASS Structure
Inside the myproject folder, make a file called style.css inside a folder called sass.
Make a Gulpfile
In gulp-dev, make a new file called gulpfile.js. Open it up in Atom or the editor of your choice.
Add the following script.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function(){
return gulp.src('../myproject/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error',sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('../myproject'))
});
What Does the Script Do?
First, we import the packages we need to do the sass compilation: gulp and gulp-sass. Line three imports a package that will allow browser developer tools to identify which sass file any examined CSS comes from, which is extremely useful.
Then, we create a task called sass. The gulp PIPE function allows us to link subtasks together into a single task. So in our first task, this is what happens:
- gulp is told to get the style.scss file
- the sourcemaps package makes a blank sourcemaps file
- the sass package compiles our sass
- if there are errors in our sass, they are logged to the console
- the sourcemap file is written out to the same folder our sass output is going
- sass writes a css file corresponding to the opened scss file, but in the myproject folder rather than in myproject/sass
Test your Setup
Inside the style.scss file that is inside the sass folder, add the following code. Make sure that you save the file after doing so.
$color__main: hotpink;
$color__accent1: #34aace;
$color__accent2: #fa2acf;
$font__sans: helvetica, arial, sans-serif;
h1 {
font-family: $font__sans;
color: $color__main;
background-color: $color__accent1;
}
From the command line, making sure that you’re in the gulp-dev folder (use the pwd command to test), run the following command: gulp sass.
If there is an error, it will be reported in the command line. If there isn’t an error, look inside the myproject folder. There should now be a style.css file with compiled CSS, as well as a style.css.map file.