Front-End Build Tools

Chapter 7: Task Runners

7.1 Gulp and Grunt

Task runners automate repetitive development tasks.

// Gulp example
const gulp = require('gulp');
const sass = require('gulp-sass');
const minify = require('gulp-minify');

gulp.task('sass', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

gulp.task('minify', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(minify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', gulp.parallel('sass', 'minify'));

7.2 npm Scripts

// package.json
{
    "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack serve --mode development",
        "test": "jest",
        "lint": "eslint src/"
    }
}