Task Automatisierung mit Grunt.js

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

description

 

Transcript of Task Automatisierung mit Grunt.js

Page 1: Task Automatisierung mit Grunt.js

Task Automatisierung mit Grunt.js

Erfan Ebrahimnia | MASSIVE ART | VlbgWebDev

Page 2: Task Automatisierung mit Grunt.js

Bilder optimieren

CSS minifizieren

Assets versionieren

JavaScript Linting

SASS / LESS kompilieren

Tests ausführen

File Header Kommentar hinzufügen

das wars …Ne Spaß, es kann noch viel

mehr

Page 3: Task Automatisierung mit Grunt.js
Page 4: Task Automatisierung mit Grunt.js

=

Ben Alman

Page 5: Task Automatisierung mit Grunt.js

MAKE

RAKERuby Make

Page 6: Task Automatisierung mit Grunt.js

<?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>

Apache Ant:

Page 7: Task Automatisierung mit Grunt.js
Page 8: Task Automatisierung mit Grunt.js

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']);

}

Grunt:

Page 9: Task Automatisierung mit Grunt.js
Page 10: Task Automatisierung mit Grunt.js
Page 11: Task Automatisierung mit Grunt.js

npm install -g grunt-cli

Grunt installieren:

Page 12: Task Automatisierung mit Grunt.js

Gruntfile.js

package.json

Benötigte Files:

Page 13: Task Automatisierung mit Grunt.js

{

"name": "my-awesome-app",

"version": "0.0.0",

"devDependencies": {

"grunt": "~0.4.x"

}

}

package.json

Page 14: Task Automatisierung mit Grunt.js

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']);

}

Gruntfile:

Page 15: Task Automatisierung mit Grunt.js

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']);

}

Gruntfile:

Page 16: Task Automatisierung mit Grunt.js

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']);

}

Gruntfile:

Page 17: Task Automatisierung mit Grunt.js

{

"name": "my-awesome-app",

"version": "0.0.0",

"devDependencies": {

"grunt": "~0.4.x"

}

}

package.json

Page 18: Task Automatisierung mit Grunt.js

{

"name": "my-awesome-app",

"version": "0.0.0",

"devDependencies": {

"grunt": "~0.4.x",

"grunt-contrib-uglify": "0.2.7"

}

}

package.json

Page 19: Task Automatisierung mit Grunt.js

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']);

}

Gruntfile:

Page 20: Task Automatisierung mit Grunt.js

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']);

}

Gruntfile:

Page 21: Task Automatisierung mit Grunt.js

Live Coding

Page 22: Task Automatisierung mit Grunt.js
Page 23: Task Automatisierung mit Grunt.js

console.log('Danke!');

Page 24: Task Automatisierung mit Grunt.js