Grunt auf Mac installieren

Mittwoch, 19. Oktober 2016

Schnelldurchlauf, um auf Mac OSX (10.11 El Capitan) Grunt zu installieren. Vielen Dank an Martin Wagner für die Starthilfe!

1. NodeJS/npm Installer für Mac downloaden und installieren:

https://nodejs.org/en/download/

2. Im Terminal diese Befehle ausführen:

sudo npm update -g npm
sudo npm install -g grunt-cli

3. Config-Dateien anlegen

Ins Projekt-Verzeichnis gehen und in der Root diese beiden Dateien anlegen:
package.json

{
  "name": "testgrunt",
  "version": "1.0.0",
  "description": "MyTest",
  "main": "index.html",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-bootstrap": "^0.1.0",
    "grunt-bootstrap-prefix": "^0.1.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-css-prefix": "^0.2.3",
    "grunt-sass": "^1.2.0"
  }
}

gruntfile.js (Pfade müssen angepasst werden)

module.exports = function(grunt) {
 
	// Configure task(s)
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
 
		uglify: {
			build: {
				src: 'grunt_test/js/*.js',
				dest: 'grunt_test/ugliy-js.js'
			},
			dev: {
				options: {
					beautify: true,
					mangle: false,
					compress: false,
					preserveComments: 'all'
				},
				src: 'grunt_test/js/*.js',
				dest: 'grunt_test/ugliy-dev-js.js'
			}
		},
 
		watch: {
			options: {
				livereload: true,
			},
			js: {
				files: ['grunt_test/**/*.js'],
				tasks: ['uglify:dev']
 
			},
			html: {
				files: ['grunt_test/**/*.html']
 
			},
			css: {
				files: ['grunt_test/**/*.scss'],
				tasks: ['sass:dev']
			},
			typoscript: {
				files: ['grunt_test/**/*.ts']
			}
		},
		sass: {
			dev: {
				options: {
					outputStyle: 'expanded'
				},
				files: {
					'grunt_test/dev-merged.css' : 'grunt_test/scss/main.scss',
					// 'css/bootstrap.css' : 'src/scss/bootstrap.scss'
				}
			},
			build: {
				options: {
					outputStyle: 'compressed'
				},
				files: {
					'grunt_test/merged.css' : 'grunt_test/scss/main.scss',
					// 'css/bootstrap.css' : 'src/scss/bootstrap.scss'
				}
			}
		},
	});
 
 
	// Load PlugIns
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-sass');
 
	// Register Tasks
	// grunt.registerTask('default', ['uglify:dev', 'sass:dev', 'watch']);
	// grunt.registerTask('build', ['uglify:build', 'sass:build', 'watch']);
 
	grunt.registerTask('default', ['uglify:dev', 'sass:dev']);
	grunt.registerTask('build', ['uglify:build', 'sass:build']);
 
};

4. Grunt initialisieren

Per Terminal ins Projektverzeichnis wechseln und das hier ausführen:

npm install
npm install grunt --save-dev

5. Befehle testen

Ab dann können folgende Befehle ausgeführt werden:

grunt (alle dateien uncompressed etc…)
grunt build (alles fertig für live version)
grunt watch (beobachten im Browser, dazu dann die Seite im Browser nochmal nach neu laden per Hand, danach übernimmt „Liverelad“ das Neuladen)

“Live-Reload” Chrome-PlugIn installieren:
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei