Install Grunt JS on a Mac – Tutorial
Posted by robert | Filed under JavaScript
Before you install Grunt.js you will need to have node.js installed. For this tutorial I have node.js v0.10.0 installed.
I will be installing Grunt.js v0.4.1. WARNING if you have Grunt.j 0.3.x or less you will need to uninstall it first.
Grunt’s command line interface (CLI)
To get grunt.js installed we need to first install Grunt’s command line interface (CLI) globally. Current version is 1.0.6. Open Terminal and put in the command below:
npm install grunt-cli -g
You may get an error that says “Please try running this command again as root/Administrator.” You will need to put sudo before you command.
sudo npm install grunt-cli -g
This will put the grunt command in your system path, allowing it to be run from any directory.
Mac Tip – Open Terminal from Folder
- If you have the Terminal icon on your Dock you can drag the folder to the Terminal icon and it will open to that folder path.
Folder and Package JSON Setup
Now we need to install Grunt.js. With Terminal navigate to our project folder. I like to put all my build files into a folder called “_build”. So for this example the path is “/Users/codebelt/Desktop/project/_build”.
There are a few different ways to get Grunt.js and other plugins installed but I will be showing you the easiest way (I think). We need to create a “package.json” and put it in our “_build” folder. Copy and past code below and put in the “package.json”
{
"name": "Test-Project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}
When the next command below is ran it will install grunt v0.4.1 and the grunt plugin concat v0.1.3 into the “_build” folder.
Here is the command:
sudo npm install
Grunt File Setup
Now Grunt.js and the Concat plugin should be installed. Now we need to add a Grunt file to configure and build our project. Create a “Gruntfile.js” file inside the “_build” folder and paste in the code below.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
basePath: '../',
srcPath: '../src/',
deployPath: '../deploy/'
},
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',
// Task configuration.
concat: {
options: {
stripBanners: true
},
dist: {
src: ['<%= meta.srcPath %>scripts/fileone.js', '<%= meta.srcPath %>scripts/filetwo.js'],
dest: '<%= meta.deployPath %>scripts/app.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task
grunt.registerTask('default', ['concat']);
};
If you look you can see I have created a fileone.js and filetwo.js file and placed them into the ../src/scripts directory. This GruntJS script will take those files and export into the ../deploy/scripts folder as app.js. I am using <%= meta.srcPath %> as a constant or base path to my src folder. This allows me to change the base path in one location than having it hard coded all over the Gruntfile.
Now type “grunt” into Terminal and watch the magic happen.
grunt
That will run the Default task and concatenate the two js files into one. Try it out, I hope this works for you. You should see the output in Terminal say:
Running "concat:dist" (concat) task File "../deploy/scripts/app.js" created. Done, without errors.
You can download the example files for this tutorial here:
Hello, my name is Robert and I am an interactive developer at
March 19, 2013 at 11:01 pm
Awesome you made my day thanks!
June 24, 2013 at 7:58 pm
Great tutorial, also note that on windows you will need to install the grunt-cli and execute grunt using grunt.cmd
$ npm install -g grunt-cli
$ grunt.cmd
June 24, 2013 at 9:02 pm
Thanks for the feedback. In my Install Grunt JS on Windows Tutorial I am able to just type “grunt” to run my task(s).
December 12, 2013 at 7:03 am
Thanks for this! I spent a whole day trying to make sense of using grunt to concatenate and minify my .js and .css files. I was about to give up and ran across this. I now understand and it finally makes sense now.
December 12, 2013 at 8:42 am
Awesome. Thanks for the feedback.
July 10, 2014 at 4:49 am
I was initially getting frustrated with having to add sudo along with the appropriate password whenever I attempted to do an npm install which goes hand in hand with Grunt. However I found a good article on StackOverflow which helped me out a great deal. I’m not a confident command line user yet however I was able to change the permissions using the following commands:
sudo chown -R `whoami` ~/.npm
This basically changes recursively the ownership of the folder so that non root administrators dont need permission to access it.
You may also need this
sudo chown -R `whoami` /usr/local/lib/node_modules
It stopped the pesky sudo need from getting in the way
November 19, 2015 at 10:50 pm
Hi ,I want to minfy the code of my project in mac (its working fyn in windows),
I am getting the syntax error in grunt.js file in the line where am giving the path to the files
the file code is shown below
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
options: {
banner: ‘/*! */\n’
},
build: {
src: [‘www/js/index.js’],
dest: [‘www/js/index.min.js’]
}
}
});
// Load the plugin that provides the “uglify” task.
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);
};
May 16, 2016 at 10:29 am
[…] Αρχικά στο https://codebelt.github.io/blog/javascript/install-grunt-js-on-a-mac/ […]
August 30, 2017 at 10:25 pm
I am trying to install on a mac. I get to this line.
sudo npm install grunt-cli -g
“This will put the grunt command in your system path, allowing it to be run from any directory.”
Where is this file supposed to be installed? I have tried many locations and none of them have worked.
I am getting this message after I install /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
+ grunt-cli@1.2.0
Thank you for your help!
August 30, 2017 at 10:27 pm
I am trying to install on a mac. I get to this line.
sudo npm install grunt-cli -g
“This will put the grunt command in your system path, allowing it to be run from any directory.”
Where is this file supposed to be installed? I have tried many locations and none of them have worked.
I am getting this message after I install do I need to change a path somewhere?
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
+ grunt-cli@1.2.0
Thank you for your help!
August 31, 2017 at 8:20 am
Finally I figured out my mistake. You need to install Node and Grunt to your /usr/local/bin directory. Here are my install procedures in case it helps somebody else.
Note: sudo is just required on MACs
Node.js Installation
Go to https://nodejs.org/en/
Download and install the “Download for most users”
It will save to the downloads folder on your MAC
Install: Click on the node…pkg
Say yes to all questions
You should receive this message:
“ npm was installed at
/usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH. “
To confirm Node.js installation
Terminal type: sylviamcconnell$ sudo cd /usr/local/bin/
then type: sylviamcconnell$ node –version
Confirmation with version: /usr/local/bin/node v6.11.2
Grunt Installation
Terminal type- sylviamcconnell$ sudo cd /usr/local/bin
install type: sylviamcconnell$ sudo npm install -g grunt-cli
to confirm install type: sylviamcconnell$ sudo grunt –version
Confirmation with version: grunt-cli v1.2.0