gulp
Advanced tools
Package description
Gulp is a toolkit that helps developers automate and enhance workflows. It is a streaming build system that allows the use of Node streams to read files from the filesystem, transform them, and output them back to the filesystem or elsewhere. Gulp is commonly used for tasks such as minification, concatenation, cache busting, unit testing, linting, and optimization.
Task Automation
Automate repetitive tasks with custom defined tasks.
const gulp = require('gulp');
gulp.task('default', function() {
// Your task code here
});File Minification
Minify JavaScript files to reduce their size for production.
const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('minify-js', function() {
return gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});File Concatenation
Concatenate multiple files into a single file.
const gulp = require('gulp');
const concat = require('gulp-concat');
gulp.task('concat-js', function() {
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});Sass Compilation
Compile Sass files into CSS.
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});Live Reloading
Automatically reload the browser when files are modified.
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task('serve', function() {
browserSync.init({
server: './dist'
});
gulp.watch('src/*.html').on('change', browserSync.reload);
});Webpack is a powerful module bundler that can also run many of the same tasks as Gulp, but it focuses more on bundling JavaScript modules together. It has a different plugin system and uses a configuration file for defining the build steps.
Grunt is another task runner like Gulp, but it uses a configuration-over-code approach. It has a large plugin ecosystem and is configured in a declarative manner, which can be more verbose than Gulp's code-based task definitions.
Rollup is a module bundler for JavaScript which uses the new standardized format for code modules included in the ES6 revision of JavaScript. It is similar to Webpack but is known for producing smaller bundles.
Parcel is a web application bundler that offers a zero-configuration setup. It aims to provide out-of-the-box support for many development tasks without the need for additional plugins or configurations, unlike Gulp which requires setting up tasks and plugins.
Broccoli is a fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions. Similar to Gulp, it uses a plugin architecture but focuses on providing the fastest rebuilds and simplicity in build configurations.
Changelog
3.8.8
Readme
The streaming build system
For a Getting started guide, API docs, recipes, making a plugin, etc. see the documentation page!
gulpfile.jsThis file is just a quick sample to give you a taste of what gulp does.
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 all packages available on npm
gulp.task('clean', function(cb) {
// You can use multiple globbing patterns as you would with `gulp.src`
del(['build'], cb);
});
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']);
We recommend these plugins:
Anyone can help make this project better - check out the Contributing guide!
FAQs
The streaming build system.
We found that gulp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.