Gulp

Installation

npm install --save-dev gulp

Usage

Create a file in root directory named "gulpfile.js"

Within that file start with

const gulp = require('gulp');

Top Level Functions

gulp.task

Define tasks

gulp.task('message', function(){
   return console.log('Gulp is running...');
});

in the command line

gulp message

if the task name id "default" running gulp in command line without parameter runs this task

gulp.src

Point to files to use

In order to copy files from one folder to another

gulp.task('copyHtml', function(){
   gulp.src('src/*.html')
       .pipe(gulp.dest('dist'));
});

in command line

gulp copyHtml

gulp.dest

Points to folder to output

gulp.watch

watch files and folders for changes ====

gulp.task('watch', function(){
  gulp.watch('src/js/*.js', ['scripts']); // scripts is the name of a gulp task
  gulp.watch('src/images/*', ['imageMin']);
  gulp.watch('src/*.html', ['copyHtml']);
});

Image Minifier

npm install --save-dev gulp-imagemin

https://www.npmjs.com/package/gulp-imagemin

Usage

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
 
gulp.task('default', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
);

JS Minifier

npm install --save-dev gulp-uglify

Usage

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
 
gulp.task('compress', function (cb) {
  pump([
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
    ],
    cb
  );
});

To help properly handle error conditions with Node streams, this project recommends the use of pump

Without pump

var gulp = require('gulp');
var uglify = require('gulp-uglify');
 
gulp.task('minify', function () {
        gulp.src('lib/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

Concat

gulp.task('scripts', function () {
        gulp.src('src/js/*.js')
        .pipe(concat())
        .pipe(gulp.dest('dist/js'));
});

Running All Tasks

gulp.task('default', ['message', 'copyHtml', 'minify']);