Start a New Grunt Project

new-grunt-project.md

Start a New Grunt Project

$ npm update -g npm
$ npm install -g grunt-cli

In the project folder:

• Create a package.json with these contents:

{
  "name": "my-project-name",
  "version": "0.1.0"
}

• Replace name and version with whatever you want.
• Install Grunt plugins:

$ npm install grunt --save-dev
$ npm install grunt-contrib-sass --save-dev
$ npm install grunt-contrib-watch --save-dev
$ npm install grunt-contrib-connect --save-dev
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-notify --save-dev

• Create a Gruntfile.js with these contents:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      sass: {
        options: {
          // Monitor Sass files for changes and compile them, but don't reload the browser.
          livereload: false,
        },
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
      css: {
        // LiveReload on the CSS files instead of their Sass source files and you get
        // the style to refresh without reloading the page in the browser.
        files: ['css/**/*.css'],
      },
    },
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-notify');

  // Default task(s).
  grunt.registerTask('default', ['connect', 'watch']);

};

Now you can run your server and start compiling your Sass with the command:

$ grunt

That's it.

To start working on a project that's already setup, just cd into it and run npm install to install everything listed in package.json.

P.S. Don't forget to add a .gitignore file with these lines in there at a minimum:

.sass-cache/
node_modules/

http://stackoverflow.com/a/19012009/96257

This is a Solutions Log post.

That's awesome simple. Thanks!

I got into the issue when setting up the small session of grunt for test in Ubuntu.
That grunt uses the alias 'node' for 'nodejs' module and it leads to error not found.
_

/usr/bin/env: ‘node’: No such file or directory

_
Solution for this issue is quite simple, just update the alternatives in your Ubuntu as following:
_

sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10

_
That's it!