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

Using Gulp to create a front-end build pipeline

By Brian Dukes

Using Gulp to create a front-end build pipeline

You know you’re supposed to compress your JavaScript, optimize your images, and process your CSS before deploying it to production, but it’s so much work to keep up with it all and figure it all out again for the next big thing. This presentation will look at using Gulp as a tool to easily automate all of these processes in a centralized way. Gulp is deceptively simple, but full-featured, so adding the next big thing to your workflow takes only a few minutes.

  • 720
Loading comments...

More from Brian Dukes