szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!

[[oktatas:web:nodejs:gulp|< Gulp]]

====== Gulp minimalizálás ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== JavaScript =====

<code bash>
npm install --save-dev gulp
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
</code>

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

function streamJS() {
	return src('src/js/*.js')
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js'}))
		.pipe(dest('public/js'));
}

exports.js = streamJS;
</code>

A gulp-babel csomagot használhatjuk, a JavaScript fájlok régebbi fordítására.


==== A minify ====

Az uglify helyett használhatjuk gulp-minify csomagot. Ez készít egy fájlt amibe beleteszi -min részt.

Például:
  * app-min.js


===== CSS =====


<code bash>
npm install --save-dev gulp
npm install --save-dev gulp-clean-css
</code>

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const cleanCSS = require('gulp-clean-css');

function streamCSS() {
	return src('src/css/*.css')
        .pipe(cleanCSS())
        .pipe(rename({ extname: '.min.css'}))
		.pipe(dest('public/css'));
}
exports.css = streamCSS;
</code>

Egyéb lehetőség a CSS minimalizálásra:
  * gulp-cssnano

szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon