Kevin 29b9a0c50c clean && clean html base | 4 years ago | |
---|---|---|
.. | ||
bin | 4 years ago | |
node_modules | 4 years ago | |
CHANGELOG.md | 4 years ago | |
LICENSE | 4 years ago | |
README.md | 4 years ago | |
index.js | 4 years ago | |
package.json | 4 years ago |
The streaming build system
series()
and parallel()
methodslastRun()
symlink()
method was exposed to create symlinks instead of copying filesFollow our Quick Start guide.
Find out about all our work-in-progress and outstanding issues at https://github.com/orgs/gulpjs/projects.
Check out the Getting Started guide and API 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.
gulpfile.js
This file will give you a taste of what gulp does.
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/'
}
};
/* 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
*/
function clean() {
// 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 promise
return del([ 'assets' ]);
}
/*
* Define our tasks using plain functions
*/
function styles() {
return gulp.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));
}
function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
function watch() {
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`
*/
var build = 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;
Most new versions of node support most features that Babel provides, except the import
/export
syntax. When only that syntax is desired, rename to gulpfile.esm.js
, install the [esm][esm-module] module, and skip the Babel portion below.
Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your gulpfile.js
to gulpfile.babel.js
.
npm install --save-dev @babel/register @babel/core @babel/preset-env
Then create a .babelrc file with the preset configuration.
{
"presets": [ "@babel/preset-env" ]
}
And here's the same sample from above written in ES2015+.
import gulp from 'gulp';
import less from 'gulp-less';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import del from 'del';
const paths = {
styles: {
src: 'src/styles/**/*.less',
dest: 'assets/styles/'
},
scripts: {
src: 'src/scripts/**/*.js',
dest: 'assets/scripts/'
}
};
/*
* For small tasks you can export arrow functions
*/
export const clean = () => del([ 'assets' ]);
/*
* You can also declare named functions and export them as tasks
*/
export function styles() {
return gulp.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));
}
export function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
/*
* You could even use `export as` to rename exported tasks
*/
function watchFiles() {
gulp.watch(paths.scripts.src, scripts);
gulp.watch(paths.styles.src, styles);
}
export { watchFiles as watch };
const build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
* Export a default task
*/
export default build;
You can filter out unchanged files between runs of a task using
the gulp.src
function's since
option and gulp.lastRun
:
const paths = {
...
images: {
src: 'src/images/**/*.{jpg,jpeg,png}',
dest: 'build/img/'
}
}
function images() {
return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(paths.images.dest));
}
function watch() {
gulp.watch(paths.images.src, images);
}
Task run times are saved in memory and are lost when gulp exits. It will only
save time during the watch
task when running the images
task
for a second time.
Anyone can help make this project better - check out our Contributing guide!
Support us with a monthly donation and help us continue our activities.
Become a sponsor to get your logo on our README on Github.