Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

How to Install GruntJS on OSX 10.10 Yosemite

May 7, 2015 2 Comments

To install Grunt.js on OSX 10.10 Yosemite you first need to have already installed node.js and npm, which can be done easily with a point and click install.

gruntjs-os-mavericks

 

Grunt has to be installed globally and then locally to separate projects, the global install is the grunt-cli which has to be installed as a root/admin user and this allows the local install of grunt to a project folder

Global grunt-cli Installation

Once node.js is installed, to get grunt.js on your Mac you can run in the Terminal:

sudo npm install -g grunt-cli

Check the installation and version

grunt --version

The version is displayed

grunt-cli v0.1.13

Local grunt  Installation

Once grunt-cli is installed just change into your working project directory and create a required package.json file by running

npm init

This will ask you a number of questions about the project, go through them and you will have a package.json file created. Once this is created you can install the node modules needed for your project. For example, for a grunt/sass/autoprefixer project you can install…

npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-autoprefixer --save-dev

grunt-modules

{
 "name": "sassgrunt",
 "version": "1.0.0",
 "description": "A grunt example",
 "main": "index.php",
 "author": "Neil Gee",
 "devDependencies": {
 "grunt": "^0.4.5",
 "grunt-autoprefixer": "^3.0.0",
 "grunt-contrib-sass": "^0.9.2",
 "grunt-contrib-watch": "^0.6.1"
 }
}

These will be stored in a node_modules directory in your current directory, the modules will also be referenced in your package.json file.

The last thing to add is the Gruntfile.js which essentially is the file that tells Grunt what to do, what tasks it has to run.

module.exports = function(grunt){

grunt.initConfig({

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

/**
* Task
**/

task: {

}

});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['task']);
}

So in the above Gruntfile.js the package.json file is referenced at the top, the modules are loaded at the bottom as well as the default task which is the first task to run. You then add the actual tasks.

For more information on how Gruntfile.js is constructed check out the grunt website which has sample grunt files.

Cats: macOS, Open Source

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in