jQuery plugin development with Gulp automation

Create a well structured and automated jQuery plugin development environment with Gulp

Image for post
Image for post

Prerequisites

1. Directory Setup for the project

- dist/ 
- css/
- js/
- examples
- src/
- css/
- js/
- test

2. Install Gulp and other dependencies

Add package.json file

npm init

Install development dependencies

npm install --save-dev autoprefixer del gulp gulp-babel gulp-clean-css gulp-cssbeautify gulp-jshint gulp-postcss gulp-rename gulp-uglify jshint browser-sync node-sass uglify-save-license

Install project dependencies

npm install -save jquery

3. Create Gulp tasks

// Include the required tools used on tasks 
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
saveLicense = require('uglify-save-license'),
babel = require("gulp-babel"),
postcss = require('gulp-postcss'),
cleanCSS = require('gulp-clean-css'),
cssbeautify = require('gulp-cssbeautify'),
autoprefixer = require('autoprefixer'),
sass = require('gulp-sass'),
del = require('del');
// Initialise plugins
sass.compiler = require('node-sass');
var Server = require('karma').Server;
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// Specify the Source files
var SRC_JS = 'src/js/*.js';
var SRC_CSS = 'src/css/*.css';
var SRC_SCSS = 'src/scss/*.scss';
// Specify the Destination folders
var DEST_JS = 'dist/js';
var DEST_CSS = 'dist/css';
var DEST_SCSS = 'src/css';

Clean Tasks

// CLEAN files 
gulp.task('clean:js', function () {
return del([DEST_JS]);
});
gulp.task('clean:css', function () {
return del([DEST_CSS]);
});
gulp clean:jsgulp clean:css

Lint Task

// Lint JS 
gulp.task('lint:js', function() {
return gulp.src(SRC_JS)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'));
});
gulp lint:js

Build Tasks

// Build JS 
gulp.task('build:js', ['clean:js', 'lint:js'], function() {
return gulp.src(SRC_JS)
.pipe(babel())
.pipe(gulp.dest(DEST_JS))
.pipe(uglify({preserveComments:'license'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(DEST_JS));
});
// Build CSS
gulp.task('build:css', ['clean:css'], function () {
return gulp.src(SRC_CSS)
.pipe(postcss( [autoprefixer({browsers: ['last 10 versions']})] ))
.pipe(cssbeautify({ autosemicolon: true }))
.pipe(gulp.dest(DEST_CSS))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(DEST_CSS));
});
gulp build:jsgulp build:css

Default Task

// DEFAULT task 
gulp.task('default', function() {
gulp.start( 'build:js', 'build:css' );
});
gulp

4. Write your jQuery plugin

5. Build the project

gulp

Extend Gulp Tasks

Watch Files

// WATCH for file changes and run the tasks 
gulp.task('watch', function() {
gulp.watch(SRC_JS, ['build:js']);
gulp.watch(SRC_CSS, ['build:css']);
});
gulp watch

Unit Testing

JavaScript Extensions

CSS Extensions

CSS Lint

HTML Minification

npm install gulp-htmlmin --save-dev 
var gulp = require('gulp'); 
var htmlmin = require('gulp-htmlmin');
gulp.task('minify', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});

Bundling Files

npm install gulp-concat --save-dev
var gulp = require('gulp'); 
var htmlmin = require('gulp-concat');
// Bundle JS
gulp.task('bundle:js', function () {
gulp.src(SRC_JS) // path to your files
.pipe(concat('bundle.js')) // concat and name it "bundle.js"
.pipe(gulp.dest(DEST_JS));
});
// Bundle CSS
gulp.task('bundle:css', function () {
gulp.src(SRC_CSS) // path to your files
.pipe(concat('bundle.css')) // concat and name it "bundle.css"
.pipe(gulp.dest(DEST_CSS));
});

Git Actions

Further Read

Full stack engineer. Believes the code should be as beautiful as the design. http://dipu.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store