Supporting files for a Beginner’s Guide to using Grunt with Magento: http://www.gpmd.co.uk/blog/a-beginner-s-guide-to-using-grunt-with-magento/

.gitignore

.idea/
.project
*.sublime-project
*.sublime-workspace
*.tmproj
*.bak
*.swp
*~.nib
.sass-cache/
node_modules/
public_html/app/design/install/
public_html/app/etc/local.xml
public_html/app/etc/local.xml.additional
public_html/app/etc/local.xml.template
public_html/cron.php
public_html/cron.sh
public_html/downloader/
public_html/errors/
public_html/includes/
public_html/index.php
public_html/index.php.sample
public_html/install.php
public_html/LICENSE*
public_html/lib/Zend/
public_html/media/
public_html/var/
public_html/.htaccess
public_html/.htaccess.dist
public_html/.htaccess.sample
public_html/api.php
public_html/favicon.ico
public_html/get.php
public_html/js/
public_html/lib/
public_html/mage
public_html/shell/
public_html/pear/
public_html/php.ini.sample
public_html/pkginfo/
public_html/RELEASE_NOTES.txt
public_html/app/.htaccess
public_html/app/Mage.php
public_html/app/code/
public_html/app/design/adminhtml/
public_html/app/design/frontend/base/
public_html/app/design/frontend/default/
public_html/app/etc/
public_html/app/locale/
public_html/skin/adminhtml/
public_html/skin/frontend/base/
public_html/skin/frontend/default/
public_html/skin/install/

README.md

A Beginner’s Guide to Using Grunt With Magento

Supporting files for a Beginner’s Guide on using Grunt with Magento

Gruntfile.js

module.exports = function(grunt) {
    var skinDir = 'theme/skin/frontend/my-theme/default/';
    var appDir = 'theme/app/design/frontend/my-theme/default/';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
            dist: {
                options: {
                    sassDir: skinDir + 'scss',
                    cssDir: skinDir + 'css',
                    environment: 'development',
                    outputStyle: 'nested'
                }
            }
        },
        clean: {
            images: {
                src: [skinDir + 'images']
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: skinDir + 'images-src/',
                    src: '**/*.{png,jpg,gif}',
                    dest: skinDir + 'images/'
                }]
            }
        },
        jshint: {
            all: [
                'Gruntfile.js',
                skinDir + ['js/{,*/}*.js', '!js/{,*/}*.min.js']
            ]
        },
        uglify: {
            dist: {
                options: {
                    mangle: false
                },
                files: {
                    'theme/skin/frontend/my-theme/default/js/scripts.min.js': [skinDir + 'js/scripts.js']
                }
            }
        },
        watch: {
            options: {
                livereload: true
            },
            livereload: {
                files: [
                    appDir + '**/*.{phtml,xml}',
                    skinDir + 'scss/{,*/}*.scss',
                    skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
                    [skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
                ],
                tasks: [
                    'compass',
                    'clean:images',
                    'imagemin',
                    'jshint',
                    'uglify'
                ]
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', [
        'compass',
        'clean:images',
        'imagemin',
        'jshint',
        'uglify'
    ]);
};

Gruntfile_wip.js

watch: {
    compass: {
        files: [skinDir + '/scss/{,*/}*.scss'],
        tasks: ['compass']
    }
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            skinDir + 'scss/{,*/}*.scss'
        ],
        tasks: ['compass']
    }
},
imagemin: {
    dynamic: {
        files: [{
            expand: true,
            cwd: skinDir + 'images-src/',
            src: '**/*.{png,jpg,gif}',
            dest: skinDir + 'images/'
        }]
    }
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            skinDir + 'scss/{,*/}*.scss',
            skinDir + 'images-src/{,*/}*.{png,jpg,gif}'
        ],
        tasks: [
            'compass',
            'imagemin'
        ]
    }
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            skinDir + 'scss/{,*/}*.scss',
            skinDir + 'images-src/{,*/}*.{png,jpg,gif}'
        ],
        tasks: [
            'compass',
            'clean:images',
            'imagemin'
        ]
    }
},
jshint: {
    all: [
        'Gruntfile.js',
        skinDir + 'js/{,*/}*.js'
    ]
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            skinDir + 'scss/{,*/}*.scss',
            skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
            skinDir + 'js/{,*/}*.js'
        ],
        tasks: [
            'compass',
            'clean:images',
            'imagemin',
            'jshint'
        ]
    }
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            skinDir + 'scss/{,*/}*.scss',
            skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
            [skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
        ],
        tasks: [
            'compass',
            'jshint',
            'uglify',
            'imagemin'
        ]
    }
},
watch: {
    options: {
        livereload: true
    },
    livereload: {
        files: [
            appDir + '**/*.xml',
            skinDir + 'scss/{,*/}*.scss',
            skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
            [skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
        ],
        tasks: [
            'compass',
            'clean:images',
            'imagemin',
            'jshint',
            'uglify'
        ]
    }
},

local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
<default>
	<reference name="head">
		<action method="addItem">
            <type>skin_js</type>
            <name>js/scripts.min.js</name>
            <params/>
        </action>
	</reference>
</default>
</layout>

misc.txt

mkdir magento-grunt-proj
mkdir public_html/
mkdir -p theme/app/design/frontend/my-theme/default/
mkdir -p theme/skin/frontend/my-theme/default/
cd public_html/skin/frontend/
ln -s ../../../theme/skin/frontend/my-theme my-theme
cd ../../app/design/frontend/
ln -s ../../../../theme/app/design/frontend/my-theme my-theme
n98-magerun.phar cache:clean
n98-magerun.phar cache:disable
touch .gitignore
touch README.md
git init
git add .gitignore README.md public_html/
git commit -m "First commit"
git remote add origin git@github.com:[your-username]/[your-repo].git
git push -u origin master
cp -a public_html/app/design/frontend/default/modern/. theme/app/design/frontend/my-theme/default
cp -a public_html/skin/frontend/default/modern/. theme/skin/frontend/my-theme/default
git add theme/
git commit -m "Added theme files"
git push origin master
npm install -g grunt-cli
npm install
npm install grunt-contrib-compass --save-dev
mkdir -p theme/skin/frontend/my-theme/default/scss
cp -a theme/skin/frontend/my-theme/default/css/. theme/skin/frontend/my-theme/default/scss
cd theme/skin/frontend/my-theme/default/scss
find . -iname "*.css" -exec bash -c 'mv "$0" "${0%\.css}.scss"' {} \;
grunt
npm install grunt-contrib-watch --save-dev
grunt watch
cp -a theme/skin/frontend/my-theme/default/images/. theme/skin/frontend/my-theme/default/images-src/
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-clean --save-dev
git add .gitignore Gruntfile.js package.json theme/skin/frontend/my-theme/default/images-src/ theme/skin/frontend/my-theme/default/scss/
git commit -m "Added some grunt tasks"
git push origin master
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
touch theme/app/design/frontend/my-theme/default/layout/local.xml
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#	.sass-cache/
#	Gruntfile.js
#	node_modules/
#	package.json
#	theme/skin/frontend/my-theme/default/images-src/
#	theme/skin/frontend/my-theme/default/scss/
nothing added to commit but untracked files present (use "git add" to track)

package.json

{
  "name": "my-theme",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-compass": "~0.7.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-imagemin": "~0.4.0",
    "grunt-contrib-jshint": "~0.8.0",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0"
  }
}

scripts.js

// This is prototype's equivalent to jQuery's $(document).ready
document.observe('dom:loaded', function() {
	console.log("Hello world!");
});