My Gruntfile.js Content Using Compass and Watch

Now, say you don’t know how to create Gruntfile.js manually just like I was. You’re desperately want to use Compass (grunt-contrib-compass) and Watch (grunt-contrib-watch) to develop your project. First, you have to install it in your project folder as node_modules:

$ npm install grunt-contrib-compass grunt-contrib-watch

That will install the Compass and Watch into node_modules directory in your project folder. Yes, it’s installed locally.

Now, where is the Gruntfile.js? You have to create it manually. Create empty file named Gruntfile.js and fill with these below:


module.exports = function(grunt){
	//grunt configuration goes here
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		compass: {
		    dev: {
			options: {
				sassDir: 'sass',
				cssDir: 'css',
				imagesDir: 'images',
				environment: 'development',	
				httpGeneratedImagesPath: ' images'
				}
			}
		},
		watch: {
			scripts: {
				options: {livereload: true},
				files: ['sass/*.scss', 'index.php'],
				tasks: ['compass'],
				
			}
		}
		
	});
	
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.registerTask('default', ['compass:dev']);
}

Don’t forget to save. Now, you will be able to execute it:

$ grunt watch

Every you save your SASS file in sass directory, the Compass will automatically compile it to CSS file in CSS folder. It will automatically refresh your browser window and you can see what have been changed.

You must install LiveReload extension in your browser if you want it automatically refresh your browser.