1. Task Automatisierung mit
Grunt.js
Erfan Ebrahimnia | MASSIVE ART | VlbgWebDev

2. SASS / LESS kompilieren
Bilder optimieren
Assets versionieren
Tests ausführen
JavaScript Linting
das wars …
Ne Spaß, es kann noch viel
mehr
CSS minifizieren
File Header Kommentar
hinzufügen

4. =
Ben Alman

5. MAKE
RAKE
Ruby Make

6. Apache Ant:
<?xml version="1.0" encoding="utf-8"?>
<project name="demo" default="prod">
<!-- Concatenate JS files -->
<target name="-js.concatenate">
<concat destfile="/Users/3rfan/demo/dist/js/main.build.js"
>
<fileset dir="/Users/3rfan/demo/js/" includes="main.js"/>
</concat>
<echo>Finished</echo>
</target>
</project>

8. Grunt:
module.exports = function (grunt) {
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js' ['js/main.js']
:
}
}
}
});
grunt.registerTask(
'build', ['uglify']);
}

11. Grunt installieren:
npm install -g grunt-cli

12. Benötigte Files:
Gruntfile.js
package.json

13. package.json
{
"name": "my-awesome-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.x"
}
}

14. Gruntfile:
module.exports = function (grunt) {
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js' ['js/main.js']
:
}
}
}
});
grunt.registerTask(
'build', ['uglify']);
}

15. Gruntfile:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js': ['js/main.js']
}
}
}
});
grunt.registerTask('build', ['uglify']);
}

16. Gruntfile:
module.exports = function (grunt) {
grunt.loadNpmTasks(
'grunt-contrib-uglify'
);
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js': ['js/main.js']
}
}
}
});
grunt.registerTask('build', ['uglify']);
}

17. package.json
{
"name": "my-awesome-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.x"
}
}

18. package.json
{
"name": "my-awesome-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.x",
"grunt-contrib-uglify": "0.2.7"
}
}

19. Gruntfile:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js' ['js/main.js']
:
}
}
}
});
grunt.registerTask('build', ['uglify']);
}

20. Gruntfile:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
dist: {
files: {
'dist/main.min.js': ['js/main.js']
}
}
}
});
grunt.registerTask(
'build', ['uglify']);
}

21. Live Coding

23. console.log('Danke!');