Frontend Ops & GruntJS

Kahlil Lechelt

KarlsruheJS & FrankfurtJS

http://karlsruhejs.org

http://frankfurtjs.org

Organisation

http://agentlexie.com

@distilledhype

auf Twitter, Github, npm

http://distillehype.net

1. Frontend Ops

2. GruntJS

3. FeOps mit GruntJS

Was ist Frontend Ops?

Wer kann sich darunter was vorstellen?

Was bisher geschah...

https://alexsexton.com/blog/2013/03/deploying-javascript-applications/

With all due respect, may I ask if you actually enjoy your job? I am dev, [...]

BUT if you are a coder doing something else and then come back to all of this as well, then wow, I don't know how you haven't gone mad already.

I'd be sick to the stomach if I had to do all of this, in addition to my usual work."

http://www.smashingmagazine.com/2013/06/11/front-end-ops/

Maximale Geschwindigkeit

Glückliche Menschen

Fragen?

http://gruntjs.com

Grunt vs Gulp

Grunt vs Gulp

grunt-cli

npm install -g grunt-cli

package.json

{
  "name": "my-project-name",
  "version": "0.1.0"
}

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    // Task Konfigurationen.
  });

  // Ein Plugin laden.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Den Default Task registrieren.
  grunt.registerTask('default', ['uglify']);

};

Grunt & Plugins

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev

Anatomie einer Task Konfiguration

Boilerplate

grunt.initConfig({
    // ...
});

Pluginname

grunt.initConfig({
    concat: {
        // ...
    }
});

Optionen

grunt.initConfig({
    concat: {
        options: {
            separator: ';'
        }
        // ...
    }
});

Taskname

grunt.initConfig({
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            // ...
        }
    }
});

Input

grunt.initConfig({
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            // Evtl. eine konfirgurationsspezifische options-Property
            src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
            // ...
        }

    }
});

Output

grunt.initConfig({
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            // Evtl. eine konfirgurationsspezifische options-Property
            src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
            dest: 'dist/built.js'
        }

    }
});

Frontend Operations mit Grunt

> grunt

grunt-contrib-watch

JSHINT & JSCS

RequireJS || Browserify

Testing

grunt-karma

grunt-protractor-runner

grunt-istanbul

grunt-phantomjs

grunt-dalek

grunt-contrib-nodeunit

grunt-mocha

grunt-tape

grunt-photobox

grunt-githooks

githooks: {
    all: {
        'pre-commit': 'jshint test:unit',
        'post-merge': 'bower:install'
    }
}

Deployment

grunt-ssh

grunt-ftp

grunt-sftp

grunt-gh-pages

grunt-ssh-deploy

grunt-shell

(grunt-casper)

Messen

grunt-phantomas

Tipps

Front End Ops Conf Videos

http://www.feopsconf.com/2014-videos/

Grunt Intro

http://24ways.org/2013/grunt-is-not-weird-and-hard/

Grunt Deep Dive

http://gruntjs.com

Grunt Plugins

http://gruntjs.com/plugins

Danke!

Fragen?