Grunt with Sass

These have to be installed

• Ruby // executable from website
• NodeJs // executable from website
• compass // gem install compass
• susy // gem install susy
• Install Node JS
• https://nodejs.org/en/download/

Create package.json file in project root

{
	"name" : "Outwater",
	"version" : "0.0.1",
	"dependencies" : {
		"grunt" : "~0.4.1",
		"grunt-contrib-watch" : "~0.5.3",
		"grunt-contrib-compass" : "~0.5.0",
		"grunt-contrib-uglify" : "~0.2.2",
		"matchdep" : "~0.1.2"
	}

}

run npm install in command prompt

• this will install all the packages you entered in the .json file
• Learn More about package.json

https://docs.npmjs.com/json

• Install Grunt
• npm install -g grunt-cli
• Create Grunt File (gruntfile.js)

    	module.exports = function(grunt){
	// load plugins that you will use
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-compass');

		grunt.initConfig({
	uglify:{
		my_target: {
			files: {
				'_/js/script.js':['_/components/js/script.js', '_/components/js/other.js'] // this is an array
				// you can use *.js to process all files in the dir
			} // take the script from the component folder and compress it into the js folder
		}// my target
	},// uglify

	compass: {
		dev: {
			options: {
				config: 'config.rb'
			}// options
		}// dev

	},// compass
	watch: {
		options: {livereload: true},
		scripts: {
			files :['_/components/js/*.js'],
			tasks: ['uglify'] // this runs the uglify task above
		}, // scripts

		sass: {
			files: ['_/components/sass/*.scss'],
			tasks: ['compass:dev']
		},// sass

		html: {
			files :['*.html']
		} // html
		
	}// watch

})// initConfig
	grunt.registerTask('default', 'watch');
}// exports
 

Terminal Commands

grunt uglify // will take the directives from the gruntfile.js
you can just run "grunt" if you have it setup as default
 ctrl+z mac ctrl+c windows stops task in terminal
config.rb // ruby config file, must be in workign dir root
require 'susy'
      css_dir ='_/css'
      sass_dir = '_/components/sass'
      javascript_dir = '_js'
      output_style = :nested

---

Back To Top- Home - Category