Frontend build tools

Wofür?

  • Transpiling
    • ES6 ➡️ ES5
    • Handlebars Templates ➡️ HTML 
    • LESS ➡️ CSS 
  • Statische Code Analyse
    • CSS/JS/HTML Linting
    • JS code smell checker
    • JS code complexity checker
  • Minification
  • Dependency checker
  • Concatenating
  • Image optimization 
  • Release management
  • etc …

Gleiche Basis

Command line tools

Unterschiede

npm Scripts Gulp Grunt
Was Aliasing von Shell Befehlen Task Runner Task Runner
Übergabe von Dateien Bash based
(| bzw. >)		 Stream based File based
Windows Support It depends Ja Ja
CLI option abstrahiert Nein Ja Ja
Konfiguration Bash Befehle Code over configuration Configuration over code

mit folgenden Tasks

  • JavaScript Linting
  • JavaScript Unit-Tests
  • Security Check für dependencies

Mini Beispiel Projekt

npm scripts

Einfache Alternative zum Shell Script

Auszug aus package.json

{
  "name": "npm-run-scripts",
  "version": "0.0.0",
  "devDependencies": {
    "nsp": "^2.6.3",
    "eslint": "^3.18.0",
    "eslint-config-xo-space": "^0.16.0",
    "jest": "^19.0.2",
    "jest-cli": "^19.0.1"
  },
  "scripts": {
    "prepublish": "nsp check",
    "pretest": "eslint . --ignore-path .gitignore --fix",
    "test": "jest",
    "build": "npm test && npm prepublish"
  }
}
$ npm run build

Build starten

Empfehlung

Verwenden wenn:

  • man nur  wenige Tasks hat die
    • keine Abhängigkeiten haben
    • die nicht konfigurationsintensiv sind
  • Windows keine Rolle spielt

Negativ-Beispiel

ally.js

Wo wir npm scripts verwenden:

Gulp

Stream based task runner

Auszug aus package.json

{
  "name": "gulp-demo-setup",
  "version": "0.0.0",
  "devDependencies": {
    "eslint": "^3.1.1",
    "eslint-config-xo-space": "^0.15.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "^3.0.1",
    "gulp-exclude-gitignore": "^1.0.0",
    "gulp-line-ending-corrector": "^1.0.1",
    "gulp-istanbul": "^1.0.0",
    "gulp-mocha": "^3.0.1",
    "gulp-plumber": "^1.0.0",
    "gulp-nsp": "^2.1.0"
  },
  "scripts": {
    "prepublish": "gulp prepublish",
    "test": "gulp"
  }
}
$ gulp build

Build starten

gulpfile.js

'use strict';
var path = require('path');
var gulp = require('gulp');
var eslint = require('gulp-eslint');
var excludeGitignore = require('gulp-exclude-gitignore');
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
var nsp = require('gulp-nsp');
var plumber = require('gulp-plumber');

gulp.task('static', function () {
  return gulp.src('**/*.js')
    .pipe(excludeGitignore())
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

gulp.task('nsp', function (cb) {
  nsp({package: path.resolve('package.json')}, cb);
});

gulp.task('test', function (cb) {
  var mochaErr;

  gulp.src('test/**/*.js')
    .pipe(plumber())
    .pipe(mocha({reporter: 'spec'}))
    .on('error', function (err) {
      mochaErr = err;
    })
    .pipe(istanbul.writeReports())
    .on('end', function () {
      cb(mochaErr);
    });
});

gulp.task('watch', function () {
  gulp.watch(['lib/**/*.js', 'test/**'], ['test']);
});

gulp.task('prepublish', ['nsp']);
gulp.task('default', ['static', 'test']);
gulp.task('build', ['static', 'test', 'nsp']);

Empfehlung

Verwenden wenn:

  • man mehr als nur eine Hand Tasks hat
    • die Abhängigkeiten haben
    • die konfigurationsintensiv sind
  • der Build workflow unter Windows funktionieren soll

Wo wir Gulp verwenden:

Grunt

The JavaScript Task Runner

Auszug aus package.json

{
  "name": "grunt-demo-setup",
  "version": "0.0.0",
  "devDependencies": {
    "blanket": "^1.2.3",
    "eslint": "3.18.0",
    "eslint-config-xo-space": "^0.16.0",
    "grunt": "1.0.1",
    "grunt-eslint": "19.0.0",
    "grunt-mocha-test": "^0.13.2",
    "grunt-notify": "0.4.5",
    "grunt-nsp": "^2.3.1",
    "load-grunt-tasks": "3.5.2",
    "time-grunt": "1.4.0"
  },
  "scripts": {
    "prepublish": "grunt security",
    "test": "grunt"
  }
}

$ grunt build

Build starten

Gruntfile.js

'use strict';

var getTasks = require('load-grunt-tasks');
var displayTime = require('time-grunt');

module.exports = function (grunt) {
 
  getTasks(grunt, {scope: 'devDependencies'});
  displayTime(grunt);

  grunt.initConfig({

    eslint: {
      options: {
        ignorePattern: '!.postinstall.js',
        fix: true
      },
      src: ['Gruntfile.js', 'lib/*.js']
    },

    mochaTest: {
      test: {
        options: {reporter: 'spec'},
        src: ['test/**/*.js']
      },
      coverage: {
        options: {
          reporter: 'html-cov',
          quiet: true,
          captureFile: 'coverage.html'
        },
        src: ['test/**/*.js']
      }
    },

    nsp: {
      package: grunt.file.readJSON('package.json')
    }
  });

  grunt.registerTask('default', ['eslint', 'mochaTest']);
  grunt.registerTask('build', ['eslint', 'mochaTest', 'nsp']);
  grunt.registerTask('security', ['nsp']);
};

Empfehlung

Verwenden wenn:

  • man mehr als nur eine Hand Tasks hat
    • die Abhängigkeiten haben
    • die konfigurationsintensiv sind
  • der Build workflow unter Windows funktionieren soll
  • Im Gegensatz zu Gulp lässt die Verbreitung nach. Wird auch nicht sonderlich aktiv weiterentwickelt

Wo wir Grunt verwenden:

Note: Bootstrap Kickstart wird zukünftig
(ab v4) Gulp verwenden.

Literatur

Frontend build tools

By Michael Kühnel

Made with Slides.com

Frontend build tools

  • 1,317

More from Michael Kühnel