unlight/you-dont-need-task-runner

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

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