oktatas:web:nodejs:gulp:kezdes_es_modullal
Tartalomjegyzék
Gulp - Kezdés ES modullal
- Szerző: Sallai András
- Copyright © 2024, Sallai András
- Licenc: CC BY-SA 4.0
- Web: https://szit.hu
Projekt készítése
mkdir app01 cd app01 npm init -y
Függőségek telepítése
npm install --save-dev browser-sync gulp gulp-minify gulp-clean-css
Ha állományban akarunk szöveget cserélni, és/vagy szöveget összefűzni:
npm install --save-dev gulp-replace gulp-concat
Ha TypeScriptet is használunk:
npm install --save-dev gulp-typescript
Példa gulpfile.js
- gulpfile.js
import {src, dest, parallel} from 'gulp'; import cleanCss from 'gulp-clean-css'; import replace from 'gulp-replace'; import minify from 'gulp-minify'; import concat from 'gulp-concat'; import {create as bsCreate} from 'browser-sync'; const browserSync = bsCreate(); function genHTML(cb) { src('src/**/*.html') .pipe(replace(/app.js/g, 'app-min.js')) .pipe(dest('public')) cb(); } function minifyJS(cb) { src([ 'src/**/*.js', 'node_modules/bootstrap/dist/js/bootstrap.js' ]) .pipe(replace(/import .*/g, '')) .pipe(replace(/export .*/g, '')) .pipe(concat('app.js')) .pipe(minify()) .pipe(dest('public')); cb(); } function minifyCSS(cb) { src([ 'src/**/*.css', 'node_modules/bootstrap/dist/css/bootstrap.css']) .pipe(cleanCss()) .pipe(dest('public')); cb(); } function build(cb) { parallel(genHTML, minifyJS, minifyCSS)(cb); } export default build
TypeScript használat példa
- gulpfile.js
import {src, dest, parallel} from 'gulp'; import cleanCss from 'gulp-clean-css'; import replace from 'gulp-replace'; import minify from 'gulp-minify'; import concat from 'gulp-concat'; import ts from 'gulp-typescript'; import {create as bsCreate} from 'browser-sync'; const browserSync = bsCreate(); function genHTML(cb) { src('src/**/*.html') .pipe(replace(/app.js/g, 'app-min.js')) .pipe(dest('public')) cb(); } function minifyJS(cb) { src([ 'src/**/*.js', 'node_modules/bootstrap/dist/js/bootstrap.js' ]) .pipe(replace(/import .*/g, '')) .pipe(replace(/export .*/g, '')) .pipe(concat('app.js')) .pipe(minify()) .pipe(dest('public')); cb(); } function minifyCSS(cb) { src([ 'src/**/*.css', 'node_modules/bootstrap/dist/css/bootstrap.css']) .pipe(cleanCss()) .pipe(dest('public')); cb(); } function build(cb) { parallel(genHTML, minifyJS, minifyCSS)(cb); } function tsc(cb) { src('src/**/*.ts') .pipe(ts({ outFile: 'output.js' })) .pipe(dest('public')); cb(); } export { tsc } export default build
oktatas/web/nodejs/gulp/kezdes_es_modullal.txt · Utolsó módosítás: 2024/07/28 11:24 szerkesztette: admin