gulp
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
glob-watcher | 5.0.5 | 4.5 kB | MIT | prod | 8 |
gulp-cli | 2.3.0 | 17.12 kB | MIT | prod | 6 2 |
undertaker | 1.3.0 | 7.9 kB | MIT | prod | 1 |
vinyl-fs | 3.0.3 | 13.51 kB | MIT | prod | 1 |
Gulp is a dynamic toolkit serving as a handy automation platform, perfect for executing painful or time-consuming tasks in your development workflow. It's a platform-agnostic system, integrated with all major IDEs, making it usable with different platforms, including PHP, .NET, Node.js, Java, and others. Gulp's strong ecosystem leverages over 2000 curated plugins for streaming file transformations, supporting a wide array of tasks. Despite its extensive capabilities, Gulp maintains simplicity through its minimal API surface, making it easy to learn and straightforward to use.
Gulp is conveniently accessible and smoothly fits into your development processes. To start using Gulp:
gulpfile.js
in your project root, which serves as a control center for all your Gulp tasks.A gulpfile.js
may look something like this:
var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
var paths = {
styles: {
src: 'src/styles/**/*.less',
dest: 'assets/styles/'
},
scripts: {
src: 'src/scripts/**/*.js',
dest: 'assets/scripts/'
}
};
function clean() {
// Deletes previously built assets
return del([ 'assets' ]);
}
function styles() {
// Compiles less sources, minifies compiled CSS and renames output file
return gulp.src(paths.styles.src)
.pipe(less())
.pipe(cleanCSS())
.pipe(rename({ basename: 'main', suffix: '.min' }))
.pipe(gulp.dest(paths.styles.dest));
}
function scripts() {
// Compiles JavaScript sources, minifies compiled script and concatenates all to a single file
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
// Registers tasks, sets up watchers and exports a build function
var build = gulp.series(clean, gulp.parallel(styles, scripts));
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.build = build;
exports.default = build;
With the Gulpfile set up, use the command line interface to run specific tasks. For instance, use 'gulp scripts' to run the scripts task. A task can be kept running to automatically rerun any time changes are made on the source files by running 'gulp watch'.
The official Gulp documentation is accessible on the Gulp website. You can start with the Getting Started guide to hit the ground running. For more detailed information about the Gulp API and concepts, you can proceed to the API docs.