Automating Your Pipeline with Gulp

26 Feb 2019

Few things give the satisfaction like automating or optimizing a system. Sometimes I like reloading my pages just to congratulate myself on how fast they run (true story). Gulp is great if you are wanting to squeeze that extra functionality into your site. Whether that is faster pages, auto-compiling sass, or automatically refresh your browser whenever you change an HTML file. Want to get started? When you finish, you will be able to automatically compile sass, minify css, and optimize images. Before you can start coding, you are going to need to install all the things (actually just four).

 

Install Gulp:

npm install --global gulp

  Go to your folder and initialize the directory

npm init

  Install clean css, plumber, image minification, and sass

npm install gulp-clean-css --save-dev

npm install --save-dev gulp-plumber

npm install --save-dev gulp-imagemin

npm install node-sass gulp-sass --save-dev

 

Once you have the dependencies installed, you can start coding. Start by creating a gulpfile.js and declaring the variables.

var gulp = require('gulp');

var cleanCSS = require('gulp-clean-css');

var plumber = require('gulp-plumber');

var coffee = require('gulp-coffee');

var sass = require('gulp-sass');

var image = require('gulp-image');

After declaring the variables, code the task runner functions

//Minify CSS
gulp.task('cssmin', () => {
     return gulp.src('assets/css/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('assets/css/minified'));
});


//Minify Images
gulp.task('image', function () {
  gulp.src('images/*')
    .pipe(image())
    .pipe(gulp.dest('images/'));
});


//compile
 gulp.task('sass', function () {
 gulp.src('assets/css/*.scss')
 .pipe(sass().on('error', sass.logError))
 .pipe(gulp.dest('assets/css/'));
return new Promise(function(resolve, reject) {
  console.log("HTTP Server Started");
  resolve();
  });
 });


//cleans up errors
gulp.src('./src/*.ext')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(gulp.dest('./dist'));

After setting up the functions, you can run a task use the command gulp [task]. If you wanted to minify css use: gulp cssmin

However, having to spell out the command for every function is boring. To fix that, we add this last line of code.

gulp.task('default', ['styles', 'scripts', 'images', 'watch']);

now whenever you run: gulp

it will run the entire program. This gets you one step closer to having your website run like a jet engine. If you are interested in going deeper, here are a few resources that might help.

• Here are the docs from the official site. Great place to start.
• This list is a good way to see the different functions Gulp can do.
• Even though its outdated, I still found some useful information.

The best source, is talking to the community. Join our discord server!