Automatyzacja zadań.

@krzepa

Narzędzia do automatyzacji zadań (Grunt, Gulp i inne), porównanie, usprawnienia, przykłady zastosowań.

Kiedy automatyzacja zadań

jest opłacalna?

Najczęstsze zadania:

transpilacja ES6 TS => ES5
SASS, LESS => CSS
validacja, minimalizacja,
testy jednostkowe, e2e ...

Funkcje edytorów np. Intellij vs wyspecjalizowane narzędzia (build tools, task runners)
Continuous Integration: Jenkins, Travis, ...

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<project default="hello">
    <target name="hello">
        <echo message="Hello, World"/>
    </target>
</project>

build.xml

Sample Ant build.xml file for concat and minifying CSS & JS

obecnie Maven, Gradle

JavaScript Task Runners:

JavaScript Bundlers
and module loaders:

node --version

node -p process.versions.v8

node

> this;

> void(setInterval(()=>console.log(+new Date()), 1000));

EcmaScript 2015 Support

V8 Release 4.9 - 91% EcmaScript2015

npm --version

npm init - konfigurator pliku package.json

npm install - instalacja wszystkich modułów z package.json

npm install npm --global - instalacja/aktualizacja npm

npm ls --global --depth=0 - listing pakietów globalnych

npm install gulp --save-dev - instalacja gulpa

rimraf - na problemy z długimi nazwami plików win7

package.json

node_modules

{
  "name": "taskrunners",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

package.json

w katalogu node_modules wszystkie moduły wymagane przez Gulpa

Globbing patterns (Wildcards)

./app/**/*.{jpg|png}'

['js/**/*.js', '!js/**/*.min.js']

node glob syntax

npm install grunt-cli --global

npm install grunt --save-dev

grunt taskname

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('default', ['uglify']);
};

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

Gruntfile.js

load-grunt-config - auto ładowanie pluginów
jit-grunt
grunt-concurrent - procesy równolegle
grunt-newer - nowsze pliki
load-grunt-config - taski w wielu plikach
time-grunt - pomiar czasu

Optymalizacja procesu

npm install gulp-cli --global

npm install gulp --save-dev

gulp taskname

npm rm --global gulp

gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('uglify', function() {
    return gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

gulp.task('default', ['uglify']);

Streams
Vinyl
Pipe

Optymalizacja procesu

gulp-load-plugins - auto ładowanie pluginów
run-sequence - taski po kolei
gulp-newer- nowsze pliki
require-dir - taski w wielu plikach

var gulp = require('gulp'),
    _p = require('gulp-load-plugins')(),
    browserSync = require('browser-sync').create(),
    browserify = require('browserify'),
    tsify = require('tsify'),
    glob = require('glob-all'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),

    argv = require('yargs').argv,

...

gulp.task('compile-ts:src', function() {
    var b = browserify({
        entries: glob.sync([srcPaths.tsentry, srcPaths.ts, srcPaths.tstypes])
    });

    return b.plugin(tsify, { typescript: require('typescript') })
        .bundle()
        .pipe(source(argv.dev ? 'app.js' : 'app.min.js'))
        .pipe(buffer())
        .pipe(_p.sourcemaps.init())
        .pipe(_p.ngAnnotate())
        .pipe(_p.if(!argv.dev, _p.stripDebug() ))
        .pipe(_p.if(!argv.dev, _p.uglify() ))
        .on('error', _p.util.log)
        .pipe(_p.if(argv.dev, _p.sourcemaps.write({includeContent:true})))
        .pipe(gulp.dest('./dist'));
});

Co nowego w wersji 4?

Nowy system zadań
Incremental builds
CLI jako osobny moduł gulp-cli

gulp.series - sekwencja zadań
gulp.parallel - zadania równoległe
gulp.task - nie przyjmuje już 3 argumentów

"scripts": {
  "hello": "echo 'Hello Wordl!'",
  "build": "tsc src/*.ts --out dist/app.js"
}

npm run hello

npm run build

How to Use npm as a Build Tool

package.json

serwer
przeładowanie przeglądarki
różne prędkości łącza
debuggowanie na różnych urządzeniach
synchronizacja interakcji
...