You do not (may not) need task runner

How to manage your workflow in shell without task runner (gulp, grunt, fly, just, etc.)

Table of Contents

• Resources

• Recipes

  • Delete files and folders
  • ESLint
  • ESLint in watch mode
  • Parallel Tasks
  • Compile TypeScript
  • Copy files

Resources

• Everything awesome related to npm scripts and using npm as a build tool
• Why I Left Gulp and Grunt for npm Scripts - Article by Cory House
• Build Automation with Vanilla JavaScript
• How to Use npm as a Build Tool - Blog post by Keith Cirkel
• Why we should stop using Grunt & Gulp
• Helpers and tips for npm run scripts - Blog post by Michael Kühnel covering advanced topics
• Advanced front-end automation with npm scripts - Talk at Nordic.js 2015 by Kate Hudson
• How to create a build system with npm scripts - Video tutorial series on setting up a front-end build system
• Ecosystem-free task runner that goes well with npm scripts

Recipes

Delete files and folders

Gulp

const del = require('del');

gulp.task('clean', () => {
  return del(['dist/report.csv', 'dist/mobile/**/*']);
});

npm del-cli

del "dist/report.csv" "dist/mobile/**/*"

npm rimraf

rimraf dist

Shell

rm -rf "dist/report.csv" "dist/mobile"

ESLint

Gulp

gulp.task('eslint', () => {
    return gulp.src('src/**/*.ts')
        .pipe(g.eslint())
        .pipe(g.eslint.format());
});

npm eslint

eslint src --ext ts

ESLint in watch mode

Gulp

gulp.task('eslint:watch', (done) => {
    const w = gulp.watch('src/**/*.ts', gulp.series('eslint'));
    process.on('SIGINT', () => {
        w.close();
        done();
    });
});

npm watchexec-bin

watchexec -w src "npm run eslint"

Taskfile/Shell

# Taskfile
eslint_watch() {
    while true; do
        inotifywait -r src && "npm run eslint"
    done
}
"$@"

sh Taskfile eslint_watch

Parallel Tasks

Gulp

gulp.task('dev:watch', gulp.parallel('test:watch', 'eslint:watch');

npm run-p

run-p test:watch eslint:watch

npm concurrently

concurrently "npm run test:watch" "npm run eslint:watch"

Taskfile/Shell

# Taskfile
dev_watch() {
    npm run test:watch 2>&1 &
    npm run eslint:watch 2>&1 &
}
"$@"

sh Taskfile dev_watch

Compile TypeScript

Gulp

gulp.task('scripts', () => {
    return gulp.src('src/**/*.ts')
        .pipe(g.typescript())
        .pipe(gulp.dest('dist'));
});

npm typescript

tsc --project tsconfig.json --outDir dist

Copy files

Gulp

gulp.task('copy', () => {
    return gulp.src('src/index.html')
        .pipe(gulp.dest('dist/public'));
});

Shell

mkdir -p dist/public
cp src/index.html dist/public