Why use a front-end build pipeline?

• Sass
• Less
• Stylus
• PostCSS
  • cssnext

• Babel
  • JSX
• Typescript
• Flow
• Elm

Transpile

• ESLint
• JSHint
• TSLint

• CSS Lint
• stylelint
• Sass Lint

• Mocha
• Jasmine
• QUnit
• Tape
• Jest
• Ava

Catch Mistakes

Broaden Browser Support

• PostCSS
  • Autoprefixer
• Babel
  • babel-preset-env
• Browserslist

• Uglify
• Closure Compiler

• Clean CSS
• CSS Nano
• CSSO

• Imagemin

Optimize

• Browsersync

Develop More Smoothly

Get Started with Gulp

Get Started with Gulp

yarn global add gulp-cli

cd c:\inetpub\wwwroot\dnnsite

yarn add --dev gulp@next gulp-babel gulp-imagemin

code gulpfile.js

Gulp 3 API

gulp.src('img/src/*.jpg')
    .pipe(somePlugin())
    .pipe(gulp.dest('img/min/'))

Gulp 3 API

gulp.task('minify-images', ['copy-images'], function () {
    return gulp.src('img/src/*.jpg')
        .pipe(somePlugin())
        .pipe(gulp.dest('img/min/'));
});

Gulp 3 API

gulp.watch('img/src/*.jpg', ['minify-images']);

Gulp 4 API

gulp.src('img/src/*.jpg')
    .pipe(somePlugin())
    .pipe(gulp.dest('img/min/'))

Gulp 4 API

gulp.task('minify-images', function () {
    return gulp.src('img/src/*.jpg')
        .pipe(somePlugin())
        .pipe(gulp.dest('img/min/'))
});

// or 

gulp.task(function minifyImages() {
    return gulp.src('img/src/*.jpg')
        .pipe(somePlugin())
        .pipe(gulp.dest('img/min/'))
});

Gulp 4 API

gulp.task(
    'images', 
    gulp.series('copyImages', 'minifyImages'));

gulp.task(
    'default', 
    gulp.parallel('js', 'css', 'images'));

Gulp 4 API

gulp.watch('img/src/*.jpg', minifyImages);

gulp.watch(
    'img/src/*.jpg', 
    gulp.parallel('copyImages', 'minifyImages'));