Bacchas at 13:02, 12 August 2016

2016-08-12T13:02:10Z

← Older revision		Revision as of 13:02, 12 August 2016
Line 92:		Line 92:
	</pre>		</pre>
	----		----
	[[#These have to be installed\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]		==[[#These have to be installed\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

Bacchas at 15:56, 9 August 2016

2016-08-09T15:56:56Z

← Older revision		Revision as of 15:56, 9 August 2016
Line 91:		Line 91:
	output_style = :nested		output_style = :nested
	</pre>		</pre>
			----
			[[#These have to be installed\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]

Bacchas: Created page with "== These have to be installed == * Ruby // executable from website * NodeJs // executable from website * compass // gem install compass * susy // gem install susy * Install N..."

2016-08-05T21:40:12Z

Created page with "== These have to be installed == * Ruby // executable from website * NodeJs // executable from website * compass // gem install compass * susy // gem install susy * Install N..."

New page

== 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 ==
<pre>
{
"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"
}

}
</pre>

== 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)
<pre>
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

</pre>

== Terminal Commands ==
<pre>
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
</pre>

Grunt with Sass - Revision history

Bacchas at 13:02, 12 August 2016

Bacchas at 15:56, 9 August 2016

Bacchas: Created page with "== These have to be installed == * Ruby // executable from website * NodeJs // executable from website * compass // gem install compass * susy // gem install susy * Install N..."