Gulp - Page 1

gulp

// Development Tools - Gulp:

Gulp is a "make / build / compile" tool that helps us automate painful 
or time-consuming tasks in our development workflow. It can help us by doing CSS 
preprocessing, JS transpiling, minification, live reloading, and more. 

Integrations are built into all major IDEs and people are using gulp across PHP, 
.NET, Node.js, Java, etc. With over 1700 plugins (and plenty you can do without 
plugins), gulp lets you quit messing with build systems and get back to work.

Gulp depends on Node / npm.  We can install Gulp globally:

npm install --global gulp
npm install gulp-cli -g

Or we can install Gulp locally inside our project:

npm init
npm install --save-dev gulp
npm install gulp --save

To install additional Gulp plugins:

npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

Before we can use Gulp, we must create the sample gulpfile.js at the root of our project, 
with the following lines:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

The above code define a default task.  To run the default task, we just run:

gulp

from the shell.  We can run multiple tasks at the same time:

gulp taskName1 taskName2

Another sample gulpfile.js:

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

In the above code, the default task consist of the lint task, the sass task, 
the script task, and the watch task.  The watch task watch the JavaScript files, 
and the Saas files, and invoke the lint, scripts, and sass tasks.

Another sample gulpfile.js:

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function() {
  // You can use multiple globbing patterns as you would with `gulp.src`
  return del(['build']);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License