Grunt with Sass
Jump to navigation
Jump to search
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
- 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