Using Gulp to create a front-end build pipeline

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'));