Gulp Cheatsheet¶
Gulp - Das Streaming Build System
Gulp ist ein Toolkit, um schmerzhafte oder zeitraubende Aufgaben in Ihrem Entwicklungs-Workflow zu automatisieren, so dass Sie aufhören können, etwas zu tun und zu bauen. Es verwendet Node.js-Streams, baut schneller, indem es die Notwendigkeit, temporäre Dateien auf Festplatte zu schreiben. < p>
Inhaltsverzeichnis¶
- [Installation](#installation
- (#getting-started)
- Core Concepts
- (#basic-tasks_)
- [File Operations](LINK_4__
- (#css-processing_)
- JavaScript Processing
- Bildoptimierung
- HTML-Bearbeitung
- Entwicklungsserver
- (#watch-tasks_)
- [Build Pipeline](#build-pipeline
- [Plugin Ecosystem](#plugin-ecosystem_
- (#advanced-patterns)
- (#performance-optimization_)
- [Fehlerbehandlung](#error-handling
- Test
- [Bestellung](LINK_17__
- Beste Praktiken
Installation¶
Globale Installation¶
```bash
Install Gulp CLI globally¶
npm install -g gulp-cli
Verify installation¶
gulp --version ```_
Lokale Installation¶
```bash
Initialize npm project¶
npm init -y
Install Gulp locally¶
npm install --save-dev gulp
Install common plugins¶
npm install --save-dev gulp-sass gulp-uglify gulp-concat gulp-clean-css ```_
Projektaufbau¶
```bash
Create project structure¶
mkdir my-gulp-project cd my-gulp-project
Initialize package.json¶
npm init -y
Install Gulp and plugins¶
npm install --save-dev gulp gulp-sass gulp-autoprefixer gulp-clean-css gulp-uglify gulp-concat gulp-imagemin gulp-htmlmin
Create gulpfile¶
touch gulpfile.js
Create source directories¶
mkdir -p src/{scss,js,images,html} mkdir dist ```_
Paket.json Scripts¶
json
{
"name": "my-gulp-project",
"version": "1.0.0",
"scripts": {
"build": "gulp build",
"dev": "gulp dev",
"watch": "gulp watch",
"clean": "gulp clean",
"serve": "gulp serve"
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-uglify": "^3.0.2",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^8.0.0",
"gulp-htmlmin": "^5.0.1"
}
}_
Erste Schritte¶
Basic Gulpfile¶
```javascript // gulpfile.js const gulp = require('gulp'); const sass = require('gulp-sass')(require('sass')); const cleanCSS = require('gulp-clean-css'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat');
// Define paths const paths = { styles: { src: 'src/scss//*.scss', dest: 'dist/css/' }, scripts: { src: 'src/js//*.js', dest: 'dist/js/' } };
// Compile Sass function styles() { return gulp.src(paths.styles.src) .pipe(sass().on('error', sass.logError)) .pipe(cleanCSS()) .pipe(gulp.dest(paths.styles.dest)); }
// Process JavaScript function scripts() { return gulp.src(paths.scripts.src) .pipe(concat('main.js')) .pipe(uglify()) .pipe(gulp.dest(paths.scripts.dest)); }
// Watch files function watch() { gulp.watch(paths.styles.src, styles); gulp.watch(paths.scripts.src, scripts); }
// Export tasks exports.styles = styles; exports.scripts = scripts; exports.watch = watch; exports.build = gulp.parallel(styles, scripts); exports.default = gulp.series(exports.build, watch); ```_
Aufgaben ausführen¶
```bash
Run individual tasks¶
gulp styles gulp scripts
Run build task¶
gulp build
Run default task (build + watch)¶
gulp
Run with specific gulpfile¶
gulp --gulpfile custom.gulpfile.js
List available tasks¶
gulp --tasks ```_
Projektstruktur¶
bash
my-gulp-project/
├── src/
│ ├── scss/
│ │ ├── main.scss
│ │ ├── _variables.scss
│ │ └── components/
│ ├── js/
│ │ ├── main.js
│ │ └── modules/
│ ├── images/
│ └── html/
├── dist/
│ ├── css/
│ ├── js/
│ ├── images/
│ └── index.html
├── gulpfile.js
└── package.json_
Kernkonzepte¶
Strom und Rohrleitungen¶
```javascript // Basic stream example gulp.src('src/**/*.js') // Read files .pipe(uglify()) // Transform .pipe(gulp.dest('dist/')); // Write files
// Multiple transformations gulp.src('src/scss/**/*.scss') .pipe(sass()) // Compile Sass .pipe(autoprefixer()) // Add vendor prefixes .pipe(cleanCSS()) // Minify CSS .pipe(gulp.dest('dist/css/')); ```_
Glob Muster¶
```javascript // Glob pattern examples gulp.src('src/.js') // All .js files in src/ gulp.src('src/**/.js') // All .js files in src/ and subdirectories gulp.src('src/js/.{js,ts}') // All .js and .ts files in src/js/ gulp.src(['src/**/.js', '!src/vendor/**']) // Exclude vendor directory
// Multiple sources gulp.src([ 'src/js/vendor/.js', 'src/js/main.js', 'src/js/modules/.js' ]) ```_
Aufgabenfunktionen¶
```javascript // Named function function buildCSS() { return gulp.src('src/scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css/')); }
// Arrow function const buildJS = () => { return gulp.src('src/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js/')); };
// Async function async function copyFiles() { return gulp.src('src/assets/**/*') .pipe(gulp.dest('dist/assets/')); }
// Export tasks exports.css = buildCSS; exports.js = buildJS; exports.copy = copyFiles; ```_
Serie und Parallel¶
```javascript const { series, parallel } = require('gulp');
// Run tasks in series (one after another) const build = series(clean, parallel(styles, scripts), copyAssets);
// Run tasks in parallel (simultaneously) const dev = parallel(styles, scripts, serve, watch);
// Mixed series and parallel const deploy = series( clean, parallel(styles, scripts, images), copyFiles, uploadToServer );
exports.build = build; exports.dev = dev; exports.deploy = deploy; ```_
Grundlegende Aufgaben¶
Datei Kopieren¶
```javascript // Simple file copy function copyHTML() { return gulp.src('src/**/*.html') .pipe(gulp.dest('dist/')); }
// Copy with base option function copyAssets() { return gulp.src('src/assets/**/*', { base: 'src' }) .pipe(gulp.dest('dist/')); }
// Copy specific files function copyFonts() { return gulp.src([ 'src/fonts//*.{woff,woff2,ttf,eot}', 'node_modules/font-awesome/fonts//*' ]) .pipe(gulp.dest('dist/fonts/')); } ```_
Dateireinigung¶
```javascript const del = require('del');
// Clean build directory function clean() { return del(['dist/**', '!dist']); }
// Clean specific files function cleanCSS() { return del(['dist/css/**/*.css']); }
// Clean with patterns function cleanOld() { return del([ 'dist/', '!dist/vendor', '!dist/vendor/' ]); }
exports.clean = clean; ```_
Umbenennung der Datei¶
```javascript const rename = require('gulp-rename');
// Add suffix function minifyCSS() { return gulp.src('src/css/**/*.css') .pipe(cleanCSS()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('dist/css/')); }
// Change extension function compileTypeScript() { return gulp.src('src/**/*.ts') .pipe(typescript()) .pipe(rename({ extname: '.js' })) .pipe(gulp.dest('dist/js/')); }
// Custom rename function function customRename() { return gulp.src('src/**/*.scss') .pipe(sass()) .pipe(rename((path) => { path.dirname += '/compiled'; path.basename += '-processed'; })) .pipe(gulp.dest('dist/css/')); } ```_
Dateioperationen¶
Dateibetonung¶
```javascript const concat = require('gulp-concat');
// Concatenate JavaScript files function concatJS() { return gulp.src([ 'src/js/vendor/.js', 'src/js/modules/.js', 'src/js/main.js' ]) .pipe(concat('bundle.js')) .pipe(gulp.dest('dist/js/')); }
// Concatenate CSS files function concatCSS() { return gulp.src('src/css/**/*.css') .pipe(concat('styles.css')) .pipe(gulp.dest('dist/css/')); }
// Conditional concatenation function buildVendorJS() { return gulp.src([ 'node_modules/jquery/dist/jquery.min.js', 'node_modules/bootstrap/dist/js/bootstrap.min.js', 'src/js/vendor/*.js' ]) .pipe(concat('vendor.js')) .pipe(gulp.dest('dist/js/')); } ```_
Datei filtern¶
```javascript const gulpif = require('gulp-if'); const filter = require('gulp-filter');
// Conditional processing function processFiles() { const isProduction = process.env.NODE_ENV === 'production';
return gulp.src('src/js/**/*.js') .pipe(gulpif(isProduction, uglify())) .pipe(gulp.dest('dist/js/')); }
// Filter specific files function processAssets() { const jsFilter = filter('/*.js', { restore: true }); const cssFilter = filter('/*.css', { restore: true });
return gulp.src('src/**/*') .pipe(jsFilter) .pipe(uglify()) .pipe(jsFilter.restore) .pipe(cssFilter) .pipe(cleanCSS()) .pipe(cssFilter.restore) .pipe(gulp.dest('dist/')); } ```_
Dateitransformation¶
```javascript const replace = require('gulp-replace'); const template = require('gulp-template');
// String replacement function updateVersion() { return gulp.src('src/**/*.js') .pipe(replace('{{VERSION}}', process.env.npm_package_version)) .pipe(gulp.dest('dist/js/')); }
// Template processing function processTemplates() { return gulp.src('src/templates/**/*.html') .pipe(template({ title: 'My Website', version: '1.0.0', timestamp: new Date().toISOString() })) .pipe(gulp.dest('dist/')); }
// Multiple replacements function processConfig() { return gulp.src('src/config.js') .pipe(replace('{{API_URL}}', process.env.API_URL || 'http://localhost:3000')) .pipe(replace('{{DEBUG}}', process.env.NODE_ENV === 'development')) .pipe(gulp.dest('dist/js/')); } ```_
CSS Verarbeitung¶
Sass Compilation¶
```javascript const sass = require('gulp-sass')(require('sass')); const autoprefixer = require('gulp-autoprefixer'); const cleanCSS = require('gulp-clean-css'); const sourcemaps = require('gulp-sourcemaps');
// Basic Sass compilation function compileSass() { return gulp.src('src/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist/css/')); }
// Advanced Sass processing function processCSS() { return gulp.src('src/scss/main.scss') .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded', includePaths: ['node_modules'] }).on('error', sass.logError)) .pipe(autoprefixer({ cascade: false })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/css/')) .pipe(cleanCSS()) .pipe(rename({ suffix: '.min' })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/css/')); }
// Production CSS build function buildProductionCSS() { return gulp.src('src/scss/**/*.scss') .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules/bootstrap/scss'] })) .pipe(autoprefixer({ browsers: ['last 2 versions', '> 1%'], cascade: false })) .pipe(cleanCSS({ level: 2 })) .pipe(gulp.dest('dist/css/')); } ```_
PostCSS Verarbeitung¶
```javascript const postcss = require('gulp-postcss'); const autoprefixer = require('autoprefixer'); const cssnano = require('cssnano'); const tailwindcss = require('tailwindcss');
// PostCSS with plugins function processPostCSS() { const plugins = [ tailwindcss(), autoprefixer(), cssnano() ];
return gulp.src('src/css/**/*.css') .pipe(postcss(plugins)) .pipe(gulp.dest('dist/css/')); }
// Tailwind CSS processing function buildTailwind() { return gulp.src('src/css/tailwind.css') .pipe(postcss([ tailwindcss('./tailwind.config.js'), autoprefixer(), ...(process.env.NODE_ENV === 'production' ? [cssnano()] : []) ])) .pipe(gulp.dest('dist/css/')); } ```_
CSS Optimierung¶
```javascript const purgecss = require('gulp-purgecss'); const critical = require('critical');
// Remove unused CSS function purgeCSS() { return gulp.src('dist/css//*.css') .pipe(purgecss({ content: ['dist//.html', 'dist/**/.js'], safelist: ['active', 'show', /^carousel-/] })) .pipe(gulp.dest('dist/css/')); }
// Extract critical CSS function extractCritical() { return critical.generate({ base: 'dist/', src: 'index.html', dest: 'css/critical.css', inline: true, width: 1300, height: 900 }); }
// CSS linting const stylelint = require('gulp-stylelint');
function lintCSS() { return gulp.src('src/scss/**/*.scss') .pipe(stylelint({ reporters: [ { formatter: 'string', console: true } ] })); } ```_
JavaScript Verarbeitung¶
Grundlegendes JavaScript Verarbeitung¶
```javascript const uglify = require('gulp-uglify'); const babel = require('gulp-babel'); const concat = require('gulp-concat');
// Basic JavaScript minification function minifyJS() { return gulp.src('src/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }
// Babel transpilation function transpileJS() { return gulp.src('src/js/**/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(gulp.dest('dist/js/')); }
// Complete JavaScript pipeline function processJS() { return gulp.src('src/js/**/*.js') .pipe(sourcemaps.init()) .pipe(babel({ presets: ['@babel/env'] })) .pipe(concat('bundle.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js/')) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js/')); } ```_
TypScript Verarbeitung¶
```javascript const typescript = require('gulp-typescript');
// TypeScript compilation function compileTypeScript() { const tsProject = typescript.createProject('tsconfig.json');
return tsProject.src() .pipe(tsProject()) .js .pipe(gulp.dest('dist/js/')); }
// TypeScript with source maps function buildTypeScript() { const tsProject = typescript.createProject('tsconfig.json');
return gulp.src('src/ts/**/*.ts') .pipe(sourcemaps.init()) .pipe(tsProject()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js/')); } ```_
JavaScript Bunding¶
```javascript const browserify = require('browserify'); const source = require('vinyl-source-stream'); const buffer = require('vinyl-buffer');
// Browserify bundling function bundleJS() { return browserify({ entries: 'src/js/main.js', debug: true }) .bundle() .pipe(source('bundle.js')) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(uglify()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('dist/js/')); }
// Webpack integration const webpack = require('webpack-stream');
function webpackBundle() { return gulp.src('src/js/main.js') .pipe(webpack({ mode: 'production', output: { filename: 'bundle.js' }, module: { rules: [ { test: /.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } })) .pipe(gulp.dest('dist/js/')); } ```_
JavaScript Futter¶
```javascript const eslint = require('gulp-eslint'); const jshint = require('gulp-jshint');
// ESLint function lintJS() { return gulp.src('src/js/**/*.js') .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()); }
// JSHint function hintJS() { return gulp.src('src/js/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(jshint.reporter('fail')); }
// Combined linting function checkJS() { return gulp.src('src/js/**/*.js') .pipe(eslint()) .pipe(eslint.format()) .pipe(jshint()) .pipe(jshint.reporter('default')); } ```_
Bildoptimierung¶
Grundlegende Bildbearbeitung¶
```javascript const imagemin = require('gulp-imagemin'); const webp = require('gulp-webp'); const responsive = require('gulp-responsive');
// Basic image optimization function optimizeImages() { return gulp.src('src/images/**/*') .pipe(imagemin([ imagemin.gifsicle({ interlaced: true }), imagemin.mozjpeg({ quality: 75, progressive: true }), imagemin.optipng({ optimizationLevel: 5 }), imagemin.svgo({ plugins: [ { removeViewBox: true }, { cleanupIDs: false } ] }) ])) .pipe(gulp.dest('dist/images/')); }
// WebP conversion function generateWebP() { return gulp.src('src/images/**/*.{jpg,jpeg,png}') .pipe(webp()) .pipe(gulp.dest('dist/images/webp/')); }
// Responsive images function createResponsiveImages() { return gulp.src('src/images//*.{jpg,jpeg,png}') .pipe(responsive({ '/*': [ { width: 320, rename: { suffix: '-small' } }, { width: 640, rename: { suffix: '-medium' } }, { width: 1024, rename: { suffix: '-large' } }, { width: 1920, rename: { suffix: '-xlarge' } } ] })) .pipe(gulp.dest('dist/images/responsive/')); } ```_
Erweiterte Bildbearbeitung¶
```javascript const sharp = require('gulp-sharp-responsive'); const sprite = require('gulp.spritesmith');
// Sharp image processing function processWithSharp() { return gulp.src('src/images/**/*.{jpg,jpeg,png}') .pipe(sharp({ formats: [ { format: 'jpeg', options: { quality: 80 } }, { format: 'webp', options: { quality: 80 } } ] })) .pipe(gulp.dest('dist/images/')); }
// CSS Sprites function createSprites() { const spriteData = gulp.src('src/images/icons/*.png') .pipe(sprite({ imgName: 'sprite.png', cssName: 'sprite.css', imgPath: '../images/sprite.png' }));
spriteData.img.pipe(gulp.dest('dist/images/')); spriteData.css.pipe(gulp.dest('dist/css/'));
return spriteData; }
// SVG sprites const svgSprite = require('gulp-svg-sprite');
function createSVGSprites() { return gulp.src('src/images/icons/*.svg') .pipe(svgSprite({ mode: { symbol: { dest: '.', sprite: 'sprite.svg' } } })) .pipe(gulp.dest('dist/images/')); } ```_
HTML Processing¶
HTML Mining¶
```javascript const htmlmin = require('gulp-htmlmin'); const fileinclude = require('gulp-file-include'); const replace = require('gulp-replace');
// Basic HTML minification function minifyHTML() { return gulp.src('src/**/*.html') .pipe(htmlmin({ collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true })) .pipe(gulp.dest('dist/')); }
// HTML includes function processHTML() { return gulp.src('src/pages/*.html') .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist/')); }
// HTML templating function buildHTML() { return gulp.src('src/templates/*.html') .pipe(replace('{{TITLE}}', 'My Website')) .pipe(replace('{{VERSION}}', process.env.npm_package_version)) .pipe(htmlmin({ collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest('dist/')); } ```_
HTML Validierung und Verarbeitung¶
```javascript const htmlhint = require('gulp-htmlhint'); const w3cjs = require('gulp-w3cjs'); const inject = require('gulp-inject');
// HTML validation function validateHTML() { return gulp.src('dist/**/*.html') .pipe(htmlhint()) .pipe(htmlhint.reporter()) .pipe(w3cjs()) .pipe(w3cjs.reporter()); }
// Asset injection function injectAssets() { const target = gulp.src('src/index.html'); const sources = gulp.src(['dist/js//*.js', 'dist/css//*.css'], { read: false });
return target .pipe(inject(sources, { relative: true, transform: function (filepath) { if (filepath.slice(-3) === '.js') { return ''; } return ''; } })) .pipe(gulp.dest('dist/')); } ```_
Entwicklungsserver¶
Standard Server Setup¶
```javascript const browserSync = require('browser-sync').create(); const connect = require('gulp-connect');
// Browser Sync server function serve() { browserSync.init({ server: { baseDir: 'dist' }, port: 3000, open: true }); }
// Connect server function connectServer() { connect.server({ root: 'dist', livereload: true, port: 8080 }); }
// Reload browser function reload(done) { browserSync.reload(); done(); } ```_
Erweiterte Serverkonfiguration¶
```javascript // Advanced Browser Sync setup function advancedServe() { browserSync.init({ server: { baseDir: 'dist', middleware: [ // Custom middleware function(req, res, next) { console.log('Request:', req.url); next(); } ] }, port: 3000, ui: { port: 3001 }, files: [ 'dist//*.html', 'dist//.css', 'dist/**/.js' ], reloadDelay: 1000, notify: false, ghostMode: { clicks: true, forms: true, scroll: true } }); }
// Proxy server function proxyServe() { browserSync.init({ proxy: 'localhost:8080', port: 3000, files: ['dist/**/*'], reloadDelay: 1000 }); } ```_
Live Reload¶
```javascript // Live reload with gulp-connect function liveReload() { return gulp.src('dist/**/*.html') .pipe(connect.reload()); }
// Watch with live reload function watchWithReload() { gulp.watch('src/scss//*.scss', gulp.series(styles, reload)); gulp.watch('src/js//.js', gulp.series(scripts, reload)); gulp.watch('src/**/.html', gulp.series(copyHTML, reload)); }
// Complete development server function dev() { serve(); watchWithReload(); }
exports.serve = serve; exports.dev = dev; ```_
Aufgaben ansehen¶
Basic Watch Setup¶
```javascript // Basic watch function watch() { gulp.watch('src/scss//*.scss', styles); gulp.watch('src/js//.js', scripts); gulp.watch('src/**/.html', copyHTML); gulp.watch('src/images/**/*', images); }
// Watch with options function watchAdvanced() { gulp.watch('src/scss/**/*.scss', { events: 'all', delay: 500 }, styles);
gulp.watch('src/js/**/*.js', { ignoreInitial: false }, scripts); } ```_
Erweiterte Uhrenmuster¶
```javascript const chokidar = require('chokidar');
// Custom watcher function customWatch() { // Watch SCSS files const scssWatcher = chokidar.watch('src/scss/**/*.scss'); scssWatcher.on('change', () => { console.log('SCSS file changed'); styles(); });
// Watch JS files const jsWatcher = chokidar.watch('src/js/**/*.js'); jsWatcher.on('add', () => { console.log('JS file added'); scripts(); }); jsWatcher.on('unlink', () => { console.log('JS file removed'); scripts(); }); }
// Conditional watching function conditionalWatch() { if (process.env.NODE_ENV === 'development') { gulp.watch('src/scss//*.scss', gulp.series(styles, reload)); gulp.watch('src/js//.js', gulp.series(lintJS, scripts, reload)); } else { gulp.watch('src/scss/**/.scss', styles); gulp.watch('src/js/**/*.js', scripts); } } ```_
Uhr mit Fehlerbehandlung¶
```javascript const plumber = require('gulp-plumber'); const notify = require('gulp-notify');
// Error handling in watch function watchWithErrors() { gulp.watch('src/scss//*.scss', () => { return gulp.src('src/scss//*.scss') .pipe(plumber({ errorHandler: notify.onError({ title: 'Sass Error', message: '<%= error.message %>' }) })) .pipe(sass()) .pipe(gulp.dest('dist/css/')) .pipe(browserSync.stream()); }); }
// Graceful error handling function gracefulWatch() { gulp.watch('src/js//*.js', () => { return gulp.src('src/js//*.js') .pipe(plumber()) .pipe(babel()) .on('error', function(err) { console.error('Error:', err.message); this.emit('end'); }) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }); } ```_
Pipeline erstellen¶
Entwicklung¶
```javascript // Development build pipeline const developmentBuild = gulp.series( clean, gulp.parallel( copyHTML, gulp.series(lintCSS, styles), gulp.series(lintJS, scripts), copyAssets, optimizeImages ) );
// Development with watch const dev = gulp.series( developmentBuild, gulp.parallel(serve, watch) );
exports.dev = dev; ```_
Produktionsaufbau¶
```javascript // Production build pipeline const productionBuild = gulp.series( clean, gulp.parallel( minifyHTML, buildProductionCSS, buildProductionJS, optimizeImages, copyAssets ), injectAssets, generateSitemap );
// Production JavaScript build function buildProductionJS() { return gulp.src('src/js/**/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(concat('bundle.js')) .pipe(uglify()) .pipe(rev()) .pipe(gulp.dest('dist/js/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/')); }
exports.build = productionBuild; ```_
Multi-Umwelt baut¶
```javascript const gulpif = require('gulp-if');
// Environment-aware build function buildForEnvironment() { const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = process.env.NODE_ENV === 'development';
return gulp.src('src/js/**/*.js') .pipe(gulpif(isDevelopment, sourcemaps.init())) .pipe(babel()) .pipe(gulpif(isProduction, uglify())) .pipe(gulpif(isDevelopment, sourcemaps.write('.'))) .pipe(gulp.dest('dist/js/')); }
// Multiple environment configs const environments = { development: { sourcemaps: true, minify: false, baseUrl: 'http://localhost:3000' }, staging: { sourcemaps: true, minify: true, baseUrl: 'https://staging.example.com' }, production: { sourcemaps: false, minify: true, baseUrl: 'https://example.com' } };
function buildWithConfig() { const env = process.env.NODE_ENV || 'development'; const config = environments[env];
return gulp.src('src/**/*.js') .pipe(gulpif(config.sourcemaps, sourcemaps.init())) .pipe(replace('{{BASE_URL}}', config.baseUrl)) .pipe(gulpif(config.minify, uglify())) .pipe(gulpif(config.sourcemaps, sourcemaps.write('.'))) .pipe(gulp.dest('dist/js/')); } ```_
Plugin Ecosystem¶
Grundlegende Plugins¶
```bash
Core plugins¶
npm install --save-dev gulp-sass gulp-autoprefixer gulp-clean-css npm install --save-dev gulp-uglify gulp-concat gulp-babel npm install --save-dev gulp-imagemin gulp-htmlmin
Utility plugins¶
npm install --save-dev gulp-sourcemaps gulp-rename gulp-if npm install --save-dev gulp-plumber gulp-notify gulp-filter
Development plugins¶
npm install --save-dev browser-sync gulp-connect npm install --save-dev gulp-eslint gulp-stylelint
Advanced plugins¶
npm install --save-dev gulp-rev gulp-inject gulp-replace npm install --save-dev gulp-zip gulp-ftp gulp-s3-upload ```_
Dateiverarbeitung Plugins¶
```javascript // File manipulation const rev = require('gulp-rev'); const revReplace = require('gulp-rev-replace'); const size = require('gulp-size');
// Asset revisioning function revisionAssets() { return gulp.src(['dist//*.css', 'dist//*.js']) .pipe(rev()) .pipe(gulp.dest('dist/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/')); }
// Replace revisioned assets function replaceRevisionedAssets() { const manifest = gulp.src('dist/rev-manifest.json');
return gulp.src('dist/**/*.html') .pipe(revReplace({ manifest: manifest })) .pipe(gulp.dest('dist/')); }
// File size reporting function reportSizes() { return gulp.src('dist/**/*') .pipe(size({ showFiles: true, gzip: true })); } ```_
Testen von Plugins¶
```javascript const mocha = require('gulp-mocha'); const karma = require('karma').Server; const jest = require('gulp-jest');
// Mocha tests function runMochaTests() { return gulp.src('test/**/*.js', { read: false }) .pipe(mocha({ reporter: 'spec' })); }
// Karma tests function runKarmaTests(done) { new karma({ configFile: __dirname + '/karma.conf.js', singleRun: true }, done).start(); }
// Jest tests
function runJestTests() {
return gulp.src('.')
.pipe(jest({
preprocessorIgnorePatterns: [
'
Bereitstellung Plugins¶
```javascript const ftp = require('vinyl-ftp'); const s3 = require('gulp-s3-upload')(); const ghPages = require('gulp-gh-pages');
// FTP deployment function deployFTP() { const conn = ftp.create({ host: 'ftp.example.com', user: process.env.FTP_USER, password: process.env.FTP_PASSWORD, parallel: 10 });
return gulp.src('dist/**/*', { base: 'dist', buffer: false }) .pipe(conn.newer('/public_html')) .pipe(conn.dest('/public_html')); }
// S3 deployment function deployS3() { return gulp.src('dist/**/*') .pipe(s3({ Bucket: 'my-bucket', ACL: 'public-read' })); }
// GitHub Pages deployment function deployGitHub() { return gulp.src('dist/**/*') .pipe(ghPages()); } ```_
Erweiterte Muster¶
Individuelle Plugins¶
```javascript const through = require('through2'); const PluginError = require('plugin-error');
// Simple custom plugin function customPlugin(options) { options = options || {};
return through.obj(function(file, encoding, callback) { if (file.isNull()) { return callback(null, file); }
if (file.isStream()) {
return callback(new PluginError('custom-plugin', 'Streaming not supported'));
}
try {
// Process file content
const content = file.contents.toString();
const processed = content.replace(/foo/g, 'bar');
file.contents = Buffer.from(processed);
this.push(file);
callback();
} catch (err) {
callback(new PluginError('custom-plugin', err));
}
}); }
// Usage function useCustomPlugin() { return gulp.src('src/**/*.js') .pipe(customPlugin({ option: 'value' })) .pipe(gulp.dest('dist/')); } ```_
Stream Processing¶
```javascript const map = require('map-stream'); const transform = require('stream-transform');
// Map stream processing function processWithMap() { return gulp.src('src/**/*.js') .pipe(map((file, callback) => { // Process each file const content = file.contents.toString(); const processed = content.toUpperCase(); file.contents = Buffer.from(processed); callback(null, file); })) .pipe(gulp.dest('dist/')); }
// Transform stream function processWithTransform() { return gulp.src('src/**/*.json') .pipe(transform((file, encoding, callback) => { try { const data = JSON.parse(file.contents.toString()); data.processed = true; data.timestamp = new Date().toISOString(); file.contents = Buffer.from(JSON.stringify(data, null, 2)); callback(null, file); } catch (err) { callback(err); } })) .pipe(gulp.dest('dist/')); } ```_
Bedingte Verarbeitung¶
```javascript const yargs = require('yargs'); const gulpif = require('gulp-if');
// Command line arguments const argv = yargs.argv;
function conditionalBuild() { return gulp.src('src/**/*.js') .pipe(gulpif(argv.lint, eslint())) .pipe(gulpif(argv.babel, babel())) .pipe(gulpif(argv.minify, uglify())) .pipe(gulp.dest('dist/')); }
// Environment-based conditions function environmentalBuild() { const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = !isProduction;
return gulp.src('src/**/*.js') .pipe(gulpif(isDevelopment, sourcemaps.init())) .pipe(babel()) .pipe(gulpif(isProduction, uglify())) .pipe(gulpif(isDevelopment, sourcemaps.write('.'))) .pipe(gulp.dest('dist/')); }
// File-based conditions function fileBasedProcessing() { return gulp.src('src/**/') .pipe(gulpif('.js', uglify())) .pipe(gulpif('.css', cleanCSS())) .pipe(gulpif('.html', htmlmin())) .pipe(gulp.dest('dist/')); } ```_
Leistungsoptimierung¶
Parallele Verarbeitung¶
```javascript // Parallel task execution const parallelBuild = gulp.parallel( styles, scripts, images, copyAssets );
// Mixed series and parallel const optimizedBuild = gulp.series( clean, gulp.parallel( gulp.series(lintCSS, styles), gulp.series(lintJS, scripts), images ), injectAssets );
exports.build = optimizedBuild; ```_
Incremental Builds¶
```javascript const changed = require('gulp-changed'); const newer = require('gulp-newer');
// Process only changed files function incrementalStyles() { return gulp.src('src/scss/**/*.scss') .pipe(changed('dist/css/', { extension: '.css' })) .pipe(sass()) .pipe(gulp.dest('dist/css/')); }
// Process only newer files function incrementalImages() { return gulp.src('src/images/**/*') .pipe(newer('dist/images/')) .pipe(imagemin()) .pipe(gulp.dest('dist/images/')); }
// Cache-based processing const cache = require('gulp-cache');
function cachedImages() { return gulp.src('src/images/**/*') .pipe(cache(imagemin())) .pipe(gulp.dest('dist/images/')); } ```_
Speicheroptimierung¶
```javascript const remember = require('gulp-remember'); const cached = require('gulp-cached');
// Cached processing with remember function optimizedScripts() { return gulp.src('src/js/**/*.js') .pipe(cached('scripts')) .pipe(eslint()) .pipe(remember('scripts')) .pipe(concat('bundle.js')) .pipe(gulp.dest('dist/js/')); }
// Clear cache when needed function clearCache() { return cache.clearAll(); }
// Memory-efficient streaming function streamEfficient() { return gulp.src('src/**/*.js', { buffer: false }) .pipe(someTransform()) .pipe(gulp.dest('dist/')); } ```_
Fehlerbehebung¶
Fehlerbehebung¶
```javascript const plumber = require('gulp-plumber'); const notify = require('gulp-notify');
// Plumber for error handling function errorHandledStyles() { return gulp.src('src/scss/**/*.scss') .pipe(plumber({ errorHandler: function(err) { console.error('Error:', err.message); this.emit('end'); } })) .pipe(sass()) .pipe(gulp.dest('dist/css/')); }
// Notify on errors function notifyOnError() { return gulp.src('src/scss/**/*.scss') .pipe(plumber({ errorHandler: notify.onError({ title: 'Sass Error', message: '<%= error.message %>' }) })) .pipe(sass()) .pipe(gulp.dest('dist/css/')); } ```_
Erweiterte Fehlerbehandlung¶
``javascript
// Custom error handler
function createErrorHandler(taskName) {
return function(err) {
console.error(Error in ${taskName}:`, err.message);
if (err.stack) {
console.error(err.stack);
}
this.emit('end');
};
}
// Error handling with logging const log = require('fancy-log'); const colors = require('ansi-colors');
function advancedErrorHandling() { return gulp.src('src/js/**/*.js') .pipe(plumber({ errorHandler: function(err) { log.error(colors.red('JavaScript Error:')); log.error(colors.red(err.message)); if (err.fileName) { log.error(colors.yellow('File:'), err.fileName); } if (err.lineNumber) { log.error(colors.yellow('Line:'), err.lineNumber); } this.emit('end'); } })) .pipe(babel()) .pipe(gulp.dest('dist/js/')); }
// Graceful degradation function gracefulBuild() { return gulp.src('src//*.js') .pipe(plumber()) .pipe(babel()) .on('error', function(err) { log.error('Babel compilation failed, using original files'); return gulp.src('src//*.js') .pipe(gulp.dest('dist/js/')); }) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); } ```_
Prüfung¶
Einheitsprüfung¶
```javascript const mocha = require('gulp-mocha'); const istanbul = require('gulp-istanbul');
// Run Mocha tests function runTests() { return gulp.src('test/**/*.js', { read: false }) .pipe(mocha({ reporter: 'spec', timeout: 5000 })); }
// Code coverage function coverage() { return gulp.src('src/**/*.js') .pipe(istanbul()) .pipe(istanbul.hookRequire()); }
function testWithCoverage() { return gulp.src('test/**/*.js', { read: false }) .pipe(mocha()) .pipe(istanbul.writeReports()) .pipe(istanbul.enforceThresholds({ thresholds: { global: 90 } })); }
const testSuite = gulp.series(coverage, testWithCoverage); exports.test = testSuite; ```_
Integrationstests¶
```javascript const puppeteer = require('puppeteer'); const assert = require('assert');
// Browser testing async function browserTest() { const browser = await puppeteer.launch(); const page = await browser.newPage();
await page.goto('http://localhost:3000');
const title = await page.title(); assert.strictEqual(title, 'My Website');
await browser.close(); }
// Visual regression testing const backstop = require('backstopjs');
function visualTest() { return backstop('test', { config: 'backstop.json' }); }
// Performance testing const lighthouse = require('lighthouse');
async function performanceTest() { const results = await lighthouse('http://localhost:3000', { output: 'json', onlyCategories: ['performance'] });
const score = results.lhr.categories.performance.score * 100; console.log('Performance Score:', score);
if (score < 90) { throw new Error('Performance score too low'); } } ```_
Bereitstellung¶
Pipeline bauen und bereitstellen¶
```javascript const zip = require('gulp-zip'); const ftp = require('vinyl-ftp');
// Create deployment package function createPackage() { return gulp.src('dist/**/*') .pipe(zip('deploy.zip')) .pipe(gulp.dest('packages/')); }
// Deploy via FTP function deployToServer() { const conn = ftp.create({ host: process.env.FTP_HOST, user: process.env.FTP_USER, password: process.env.FTP_PASSWORD, parallel: 10, log: console.log });
return gulp.src('dist/**/*', { base: 'dist', buffer: false }) .pipe(conn.newer('/public_html')) .pipe(conn.dest('/public_html')); }
// Complete deployment pipeline const deploy = gulp.series( productionBuild, runTests, createPackage, deployToServer );
exports.deploy = deploy; ```_
CI/CD Integration¶
```javascript // Environment-aware deployment function deployToEnvironment() { const env = process.env.NODE_ENV || 'development'; const configs = { development: { host: 'dev.example.com', path: '/dev' }, staging: { host: 'staging.example.com', path: '/staging' }, production: { host: 'example.com', path: '/public_html' } };
const config = configs[env];
return gulp.src('dist/**/*') .pipe(deployTo(config)); }
// Docker deployment function buildDockerImage() { return gulp.src(['dist/**/*', 'Dockerfile']) .pipe(docker.build({ tag: 'my-app:latest' })); }
// Kubernetes deployment function deployToK8s() { return gulp.src('k8s/*.yaml') .pipe(kubectl.apply()); } ```_
Best Practices¶
Projektorganisation¶
```javascript // Organized gulpfile structure const { src, dest, watch, series, parallel } = require('gulp');
// Task modules const styles = require('./gulp-tasks/styles'); const scripts = require('./gulp-tasks/scripts'); const images = require('./gulp-tasks/images'); const server = require('./gulp-tasks/server');
// Configuration const config = require('./gulp.config.js');
// Export tasks exports.styles = styles; exports.scripts = scripts; exports.images = images; exports.serve = server.serve; exports.build = parallel(styles, scripts, images); exports.dev = series(exports.build, server.serve, server.watch); ```_
Konfigurationsmanagement¶
```javascript // gulp.config.js module.exports = { paths: { src: 'src', dest: 'dist', styles: { src: 'src/scss//*.scss', dest: 'dist/css/' }, scripts: { src: 'src/js//.js', dest: 'dist/js/' }, images: { src: 'src/images/**/', dest: 'dist/images/' } },
options: { sass: { outputStyle: 'compressed', includePaths: ['node_modules'] }, autoprefixer: { browsers: ['last 2 versions', '> 1%'] }, imagemin: { optimizationLevel: 5, progressive: true, interlaced: true } },
server: { port: 3000, baseDir: 'dist' } }; ```_
Performance Best Practices¶
- **Inkrementelle Builds* mit
gulp-changedodergulp-newer__ - ** parallele Verarbeitung** für unabhängige Aufgaben
- Cache teure Operationen mit
gulp-cache_ - ** Verwenden Sie Streaming** statt Pufferung für große Dateien
- Optimieren Sie die Uhrmuster, um unnötige Umbauten zu vermeiden
Code Qualität Best Practices¶
- **Implementieren Sie Linting* für CSS, JavaScript und HTML
- ** Verwenden Sie Quellkarten* für Debugging in der Entwicklung
- ** Fehlerbehandlung hinzufügen** mit
gulp-plumber_ - Include-Tests in Ihrer Build Pipeline
- Dokumentieren Sie Ihre Aufgaben und Konfiguration
Best Practices der Wartung¶
- **Keep Plugins aktualisiert* regelmäßig
- ** Verwenden Sie semantische Versionierung* für Ihre Builds
- **Implementieren Sie richtige Protokollierung* für Debugging
- **Kreate modulare Task-Dateien* für bessere Organisation
- ** Verwenden Sie Umgebungsvariablen* für sensible Konfiguration
--
Zusammenfassung¶
Gulp ist ein leistungsfähiges Streaming-Building-System, das sich bei der Automatisierung repetitiver Aufgaben in der Webentwicklung auszeichnet. Zu den wichtigsten Merkmalen gehören:
- **Stream-basierte Verarbeitung*: Effiziente Dateiverarbeitung ohne temporäre Dateien
- **Code over Configuration*: JavaScript-basierte Konfiguration für maximale Flexibilität
- **Rich Plugin Ecosystem*: Tausende von Plugins für jede denkbare Aufgabe
- **Parallel Processing*: Aufgaben gleichzeitig für schnellere Bauten ausführen
- **Watch and Live Reload*: Automatischer Wiederaufbau und Browser-Erfrischung
- **Incremental Builds*: Prozess nur geänderte Dateien für Geschwindigkeit
- Fehler Handling: Robuste Fehlerbehandlung, um Fehler beim Bau zu verhindern
- **Extensible*: Einfache Erstellung von benutzerdefinierten Plugins und Aufgaben
Durch die Nutzung der Streaming-Architektur von Gulp und des umfangreichen Plug-in-Ökosystems können Sie effiziente und beständige Build-Prozesse erstellen, die mit der Komplexität Ihres Projekts skalieren.
<= <= <= <================================================================================= Funktion copyToClipboard() {\cHFFFF} const commands = document.querySelectorAll('code'); alle Befehle = ''; Befehle. Für jede(cmd) => alle Befehle += cmd.textContent + '\n'); navigator.clipboard.writeText (allCommands); Alarm ('Alle Befehle, die in die Zwischenablage kopiert werden!'); }
Funktion generierenPDF() { Fenster.print(); }