Blog

Learn To Use Grunt with Sass and Bootstrap


  • Brad Gillis
  • |
  • Saturday, September 19, 2015

 

Web Designing has always been a valuable skill and will continue to be for years to come, but with the rapid rise of new techniques and technologies it’s a constant battle to keep up with the trends. One of those growing trends is the use of a CSS preprocessor with Grunt because it brings speed and added functionality to web development. All this rapid development is causing larger and more functional websites and with that comes larger stylesheets and more workload.

 

A preprocessor can cut down the workload and make your design work flow faster.

 

Sass is an easy to learn extension of CSS. It helps to make your code more efficient, better organized, and modular. Plus it has added features that are not included in regular CSS. It is becoming the new de facto standard when working with CSS. Even Bootstrap 3 has been ported over to Sass and starting with Bootstrap 4, Sass will be the default CSS preprocessor. If you want to try it Bootstrap 4 is already in alpha release. Now with both Foundation 5 and Bootstrap 4 having Sass as their default CSS preprocessors, it is a great time to be able to take advantage of Sass.

 

Any CSS file is a Sass file so if you are a bit nervous just stick with what you know and add Sass syntax to your repertoire as you get comfortable with it. Once you start tinkering with Sass and see how easy it is and how much more can be done, you’ll never go back to straight CSS again.

 

Sass adds components like variables, mixins and functions so you can extend the features of your CSS file. For example, variables allow you to declare a color in Sass and give it a name so every time you use it just remember the name and not the hex code. Now should you decide that bright red is a bit too flashy for your layout after coding 8 pages and using it in 33 places all you need to do is change the variable to the new color and viola it is changed in all 33 places!

 

$primary-color: #C5371F; (bright red)

is now

body {

color: $primary-color;

}

 

You can organize your stylesheets into separate components by fonts, colors, device or any other criteria and use the @import directive to pull the file into the current stylesheet. The @import directive can be used to create little snippets of CSS so you can modularize your CSS/Scss and reuse them in other projects. Use it like this:

 

// snippet.scss

h1, h2, h3 {

color: $primary-color;    (you declared the color in a variable – see above)

}                                    (remember you can use CSS syntax in Scss until you get the

                                       hang of it)

 

// app.scss

@import ‘snippet’;

 

Partial snippets of CSS can also be used and these are simply a Sass file with an underscore preceding the name like _mypartial.scss. The underscore tells Sass that it is a partial and not to compile it but to only include it in a CSS file.

 

You can also Nest your code so coding is more streamlined. Used correctly it can save you a lot of time and repetition. But don’t go overboard with Nesting.

 

Mixins are similar to variables but have the added benefit that you can group styles together, declare a mixin with the @mixin. When you need to use it the include option will do the trick:

 

@include nameofmixin;

 

Why Grunt?

 

There are a lot of great tools to make the task of web design a lot easier. One of those tools is Grunt because it can do so many things. Grunt is the way to go if you really want to take full advantage of CSS. Grunt is another one of those damned trendy tools and for good reason-because it can do so many things.

 

It is relatively easy to setup, plus it has a large active community of developers so new plugins are being released regularly.

 

Grunt is a JavaScript task runner that automates repetitive tasks. Once you get it set up to do the mundane tasks (grunt work) involved in web development it will make your life a lot simpler. What is nice about Grunt is you can customize it with individual plugins (tasks) to accomplish what you need in your design environment.

 

Speed and Style

 

In this article, I’ll tell you how to set-up Grunt to run Node-Sass which will compile your Scss into CSS. This will speed up the way you develop websites. One of the more popular uses of Grunt is to compile, concatenate, minify, and lint (analyze for errors) your CSS and JavaScript.

 

I am going to show you how to set-up Grunt to run Node to compile, minify, and compress your Scss (Sass) into CSS plus (analyze for errors) lint to see where there could be problems and where you have real errors. The list of things that Grunt can do seems endless. Another popular plugin is LiveReload, which will live reload your browser with your changes so you can see the effects in real time.

 

All you have to do is issue a few simple commands in the terminal set it up; then when you want to use it, change directories into your project and type “grunt” or “grunt watch” and it will wake up and wait for changes in your code before compiling it in fractions of a second.

 

Don’t worry about using the command line in the Terminal. It actually is easier to use than some of the third-party programs used to compile Sass.

 

These instructions are for Mac OS X Yosemite but I have installed Grunt using the same techniques on Windows 8.1. Windows users can use the CMD Prompt just like Terminal is used on the Mac.

 

If you already have Bower and Node installed then you can start at number 5. Just make sure you can access both Bower and Node from the root of your project.

 

On the Mac, if you are denied access/privileges you may have to include the sudo command in front of the Terminal Command. Example sudo npm install -g bower

 

Windows user will need to be logged in as administrator.

 

1. You need to install to install Node.js so head over to https://nodejs.org/en/ and use the pre-built installer for your Operating System.

 

2. Create a Folder where you want to install your project.

 

3. Open up your Terminal. To find it on a Mac, open LaunchPad and it is in with “Other” tools. On Windows click “Start” and type cmd hit enter and the command Prompt will open.

 

Now type in the Terminal node -v to make sure you have access to Node.js. As of this writing you should get the version in the terminal of v0.12.7.

 

4. We will also install Bower as it is a package manager that will fetch updates of our frameworks and libraries making it easy to update your projects.

 

Now type in the Terminal: npm install -g bower


5. Use the cd command to change directories to the root of your project folder. I keep my projects in Cubby so I have a backup and version control so to get to mine would be like this cd Cubby/Projects/projectname. Of course yours will be different but you get the idea.

 

We need to create a bower.json file that will manage all the dependencies for Bower. Bower will give a series of prompts about the details of your project. You can just accept the defaults by hitting enter/return and you’ll be fine.The second series of prompts you can type “y” to accept the defaults.

 

Now type in the Terminal: bower init

 

This is what my bower.json file looks like. Yours should be similar.

 

{

"name": "bootstraptest",

"version": "0.0.0",

"authors": [

"airdragondesign <airdragondesign@outlook.com>"

],

"license": "MIT",

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

]

}

 

6. We are ready to install the Sass version of Bootstrap and we want to save it as a dependency of Bower so we can use Bower to update when there are changes.

 

Now type in the Terminal: bower install bootstrap-sass - -save


You will now see that bower added this to your bower.jason file

 

"dependencies": {

"bootstrap-sass": “~3.3.5"

 

7. We are going to use npm (node package manager) to set up the package.json file that tracks the node packages. The npm init command creates or modifies the package.json file to track Node packages.

 

Now type in the Terminal: npm init

 

The command npm init will create a basic package.json file.

 

Answer the prompts by hitting Enter.

 

This is what my package.json file looks like at this point. Yours won’t have as many packages. Mine is setup so I can turn on a number of different packages but it gives you an idea of what it looks like. If you are having trouble setting this up just copy my package.json file. It will still work and in the next tutorial I’ll show you how to turn on the different packages.


 

{
"name": "bootstraptest",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "^0.8.1",
"grunt-contrib-handlebars": "~0.7.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.0.0",
"grunt-shell": "~0.7.0",
"grunt-timer": "^0.5.8",
"load-grunt-tasks": "~0.2.1"
},
"main": "index.js",
"dependencies": {
"grunt-contrib-handlebars": "^0.7.0",
"grunt-contrib-concat": "^0.3.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-uglify": "^0.5.1",
"grunt": "^0.4.5",
"load-grunt-tasks": "^0.2.1",
"grunt-shell": "^0.7.0",
"grunt-timer": "^0.5.9"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}

 

8. We are finally ready to install Grunt the task runner that will automate compiling Sass files into CSS and any other task we need done, but first we need to install the Grunt Command Line Interface, which will allow us to run Grunt.

 

Now type in the Terminal: npm install -g grunt-cli

 

9. We have the Grunt Command Line Interface installed so now we need to use npm to install the Grunt task runner and the plugins we want Grunt to automate. NPM is used to install and manage Grunt and all the plugins used to perform tasks.

 

Now type in the Terminal: npm install grunt - -save-dev

 

This will install node_modules with the grunt package inside of it.

 

The - -save dev tells Node that this is a dependency and it needs to watch and manage it.

 

10. Now that you have Grunt up and running and know how to install Grunt plugin’s let’s install a couple more that will allow us to compile, minify and copy our javascript files, sass and fonts from the bower directory into files that are easier to find and reference.

 

Now type in the Terminal: npm install grunt-sass - -save-dev

 

Now type in the Terminal: npm install grunt-contrib-watch - -save-dev

 

Now type in the Terminal: npm install grunt-contrib-copy - -save-dev

 

We have everything setup to run Grunt except the Gruntfile.js which tells Grunt what tasks to run when we start Grunt. Go ahead and create a file in the root of your project and name it Gruntfile.js. Yes that is a capital G. Now in your Gruntfile.js copy the following configuration into it.

 

module.exports = function (grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

// Copy web assets from bower_components to more convenient directories.

copy: {

main: {

files: [

// Vendor scripts.

{

expand: true,

cwd: 'bower_components/bootstrap-sass/assets/javascripts/',

src: ['**/*.js'],

dest: 'scripts/bootstrap-sass/'

},

{

expand: true,

cwd: 'bower_components/jquery/dist/',

src: ['**/*.js', '**/*.map'],

dest: 'scripts/jquery/'

},

// Fonts.

{

expand: true,

filter: 'isFile',

flatten: true,

cwd: 'bower_components/',

src: ['bootstrap-sass/assets/fonts/**'],

dest: 'fonts/'

},

// Stylesheets

{

expand: true,

cwd: 'bower_components/bootstrap-sass/assets/stylesheets/',

src: ['**/*.scss'],

dest: 'scss/'

}

]

},

},

// Compile SASS files into minified CSS.

sass: {

options: {

includePaths: ['bower_components/bootstrap-sass/assets/stylesheets']

},

dist: {

options: {

outputStyle: 'expanded'

},

files: {

'css/app.css': 'scss/app.scss'

}

}

},

// Watch these files and notify of changes.

watch: {

grunt: { files: ['Gruntfile.js'] },

sass: {

files: [

'scss/**/*.scss'

],

tasks: ['sass']

}

}

});

// Load externally defined tasks.

grunt.loadNpmTasks('grunt-sass');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-copy');

// Establish tasks we can run from the terminal.

grunt.registerTask('build', ['sass', 'copy']);

grunt.registerTask('default', ['build', 'watch']);

}

 

Finally we need to create a folder in the root of our project and name it scss . Inside the folder create a file named app.scss . At the top of your app.scss file you need to put the following code

 

@import “_bootstrap.scss”;

(your custom css or scss will go here!)

 

Create another folder in the root of your project named css . Inside that folder create a file named app.css . This is where Node.js puts your compiled CSS.

 

Time to test! Be sure you are in the root of your project. Then type in your Terminal grunt

If you get the following message in your Terminal

 

>> Local Npm module "grunt-sass" not found. Is it installed?

>> Local Npm module "grunt-contrib-watch" not found. Is it installed?

>> Local Npm module "grunt-contrib-copy" not found. Is it installed?

Warning: Task "watch" not found. Use --force to continue.

Aborted due to warnings.

 

 

Type this in the Terminal: npm update

 

Try running grunt again. You should be fine now!

 

You should see something like this in your Terminal.

 

Running "sass:dist" (sass) task

Running "copy:main" (copy) task

Copied 97 files

Running "watch" task

Waiting...

 

If everything is running go to app.scss and under @import “_bootstrap.scss”; type some code to test it. Anything will do like:

 

h1 {

color: #333333;

}

 

Check your Terminal again and you should see something similar to this:

 

>> File "scss/app.scss" changed.

Running "sass:dist" (sass) task

Done, without errors.

Completed in 0.718s at Thu Sep 17 2015 20:41:13 GMT-0400 (EDT) - Waiting...

 

 

Congratulations you are ready to start using Grunt to compile your Sass files. If you had any trouble go back to the beginning and follow the steps slowly. Stay tuned and we’ll have more on how to add tasks to your Grunt file.

 

Remember to add this link in the head of your html pages:

<link rel="stylesheet" href="css/app.css" />

 

 

Comments

Anonymous
16-Apr-2016 12:36 PM
Thanks for article, it helped me very much.

Comments



Captcha Image