- Notifications
You must be signed in to change notification settings - Fork4.2k
A toolkit to automate & enhance your workflow
License
gulpjs/gulp
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The streaming build system
- Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
- Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
- Strong Ecosystem - Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations.
- Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use.
Follow ourQuick Start guide.
Find out about all our work-in-progress and outstanding issues athttps://github.com/orgs/gulpjs/projects.
Check out theGetting Started guide andAPI docs on our website!
Excuse our dust! All other docs will be behind until we get everything updated. Please open an issue if something isn't working.
This file will give you a taste of what gulp does.
vargulp=require('gulp');varless=require('gulp-less');varbabel=require('gulp-babel');varconcat=require('gulp-concat');varuglify=require('gulp-uglify');varrename=require('gulp-rename');varcleanCSS=require('gulp-clean-css');vardel=require('del');varpaths={styles:{src:'src/styles/**/*.less',dest:'assets/styles/'},scripts:{src:'src/scripts/**/*.js',dest:'assets/scripts/'}};/* Not all tasks need to use streams, a gulpfile is just another node program * and you can use all packages available on npm, but it must return either a * Promise, a Stream or take a callback and call it */functionclean(){// You can use multiple globbing patterns as you would with `gulp.src`,// for example if you are using del 2.0 or above, return its promisereturndel(['assets']);}/* * Define our tasks using plain functions */functionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS())// pass in options to the stream.pipe(rename({basename:'main',suffix:'.min'})).pipe(gulp.dest(paths.styles.dest));}functionscripts(){returngulp.src(paths.scripts.src,{sourcemaps:true}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatch(){gulp.watch(paths.scripts.src,scripts);gulp.watch(paths.styles.src,styles);}/* * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel` */varbuild=gulp.series(clean,gulp.parallel(styles,scripts));/* * You can use CommonJS `exports` module notation to declare tasks */exports.clean=clean;exports.styles=styles;exports.scripts=scripts;exports.watch=watch;exports.build=build;/* * Define default task that can be called by just running `gulp` from cli */exports.default=build;
Gulp provides a wrapper that will be loaded in your ESM code, so you can name your gulpfile asgulpfile.mjs or with"type": "module" specified in yourpackage.json file.
And here's the same sample from above written inESNext.
import{src,dest,watch}from'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={styles:{src:'src/styles/**/*.less',dest:'assets/styles/'},scripts:{src:'src/scripts/**/*.js',dest:'assets/scripts/'}};/* * For small tasks you can export arrow functions */exportconstclean=()=>del(['assets']);/* * You can also declare named functions and export them as tasks */exportfunctionstyles(){returnsrc(paths.styles.src).pipe(less()).pipe(cleanCSS())// pass in options to the stream.pipe(rename({basename:'main',suffix:'.min'})).pipe(dest(paths.styles.dest));}exportfunctionscripts(){returnsrc(paths.scripts.src,{sourcemaps:true}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(dest(paths.scripts.dest));}/* * You could even use `export as` to rename exported tasks */functionwatchFiles(){watch(paths.scripts.src,scripts);watch(paths.styles.src,styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles,scripts));/* * Export a default task */exportdefaultbuild;
You can filter out unchanged files between runs of a task usingthegulp.src function'ssince option andgulp.lastRun:
constpaths={ ...images:{src:'src/images/**/*.{jpg,jpeg,png}',dest:'build/img/'}}functionimages(){returngulp.src(paths.images.src,{since:gulp.lastRun(images)}).pipe(imagemin()).pipe(gulp.dest(paths.images.dest));}functionwatch(){gulp.watch(paths.images.src,images);}
Task run times are saved in memory and are lost when gulp exits. It will onlysave time during thewatch task when running theimages taskfor a second time.
Anyone can help make this project better - check out ourContributing guide!
About
A toolkit to automate & enhance your workflow
