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