Sven Ullmann
10 months ago
6 changed files with 274 additions and 0 deletions
-
68README.md
-
2build.mjs
-
2clean.mjs
-
57config.mjs
-
143gulpfile.mjs
-
2watch.mjs
@ -1,2 +1,70 @@ |
|||||
# gulpfile-setup |
# gulpfile-setup |
||||
|
|
||||
|
package.json: |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"dependencies": { |
||||
|
"@babel/plugin-transform-modules-commonjs": "^7.23.3", |
||||
|
"axios": "^1.6.7", |
||||
|
"concat": "^1.0.3", |
||||
|
"del": "^7.1.0", |
||||
|
"fs": "^0.0.1-security", |
||||
|
"fs-extra": "^11.2.0", |
||||
|
"get-google-fonts": "^1.2.2", |
||||
|
"gulp": ">=4", |
||||
|
"gulp-autoprefixer": "^9.0.0", |
||||
|
"gulp-clean-css": "^4.3.0", |
||||
|
"gulp-concat": "^2.6.1", |
||||
|
"gulp-ignore-errors": "^0.0.4", |
||||
|
"gulp-imagemin": "^9.0.0", |
||||
|
"gulp-plugin-extras": "^0.3.0", |
||||
|
"gulp-sass": "^5.1.0", |
||||
|
"gulp-sharp-responsive": "^0.4.1", |
||||
|
"imagemin": "^8.0.1", |
||||
|
"imagemin-gifsicle": "^7.0.0", |
||||
|
"imagemin-mozjpeg": "^10.0.0", |
||||
|
"imagemin-optipng": "^8.0.0", |
||||
|
"imagemin-svgo": "^10.0.1", |
||||
|
"imagemin-webp": "^8.0.0", |
||||
|
"path": "^0.12.7", |
||||
|
"plugin-error": "^2.0.1", |
||||
|
"pretty-bytes": "^6.1.1", |
||||
|
"sass": "^1.71.1", |
||||
|
"scss-framework": "file:../packages/sumedia-webdesign/scss-framework", |
||||
|
"sharp": "^0.33.2", |
||||
|
"vinyl-buffer": "^1.0.1", |
||||
|
"vinyl-source-stream": "^2.0.0", |
||||
|
"yargs": "^17.7.2" |
||||
|
}, |
||||
|
"peerDependencies": { |
||||
|
"gulp": ">=4" |
||||
|
}, |
||||
|
"peerDependenciesMeta": { |
||||
|
"gulp": { |
||||
|
"optional": true |
||||
|
} |
||||
|
}, |
||||
|
"scripts": { |
||||
|
"clean": "gulp --cwd . --gulpfile gulp/clean.mjs", |
||||
|
"build": "gulp --cwd . --gulpfile gulp/build.mjs", |
||||
|
"watch": "gulp --cwd . --gulpfile gulp/watch.mjs" |
||||
|
}, |
||||
|
"compilerOptions": { |
||||
|
"type": "module", |
||||
|
"module": "es6", |
||||
|
"target": "es6", |
||||
|
"esModuleInterop": true, |
||||
|
"lib": [ |
||||
|
"es6", |
||||
|
"es5", |
||||
|
"es7", |
||||
|
"dom" |
||||
|
] |
||||
|
}, |
||||
|
"exclude": [ |
||||
|
"node_modules" |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
``` |
||||
@ -0,0 +1,2 @@ |
|||||
|
import {build} from "./gulpfile.mjs" |
||||
|
export default function(cb) { build(); cb(); }; |
||||
@ -0,0 +1,2 @@ |
|||||
|
import {clean} from "./gulpfile.mjs" |
||||
|
export default function(cb) { clean(); cb(); }; |
||||
@ -0,0 +1,57 @@ |
|||||
|
const tempDir = './var/tmp/gulp_font_download'; |
||||
|
const mode = 'dev'; //['dev', 'prod'].includes(yargs.argv.mode) ? yargs.agv.mode : 'dev'; |
||||
|
const app = 'frontend'; //'frontend'].includes(yargs.argv.app) ? yargs.argv.app : 'frontend'; |
||||
|
const src = './assets/src'; |
||||
|
const dist = './assets/dist'; |
||||
|
const publ = './public/resources/' + app; |
||||
|
|
||||
|
const config = { |
||||
|
|
||||
|
tempDir: tempDir, |
||||
|
mode: mode, |
||||
|
app: app, |
||||
|
src: src, |
||||
|
dist: dist, |
||||
|
publ: publ, |
||||
|
|
||||
|
watch: { |
||||
|
js: src + '/' + app + '/**/*.+(js)', |
||||
|
css: src + '/' + app + '/app.scss', |
||||
|
srcPublic: src + '/' + app + '/public/**/*', |
||||
|
dist: dist + '/' + app + '/**/*', |
||||
|
img: dist + '/' + app + '/**/*.+(jpg|jpeg|gif|png)', |
||||
|
'publish': dist + '/' + app + '/' |
||||
|
}, |
||||
|
del: { |
||||
|
js: dist + '/' + app + '/**/*.+(js|js.map)', |
||||
|
css: dist + '/' + app + '/**/*.+(css|css.map)', |
||||
|
img: dist + '/' + app + '/**/*.+(jpg|jpeg|gif|png|webp)', |
||||
|
font: dist + '/' + app + '/fonts/', |
||||
|
dist: dist + '/' + app + '/*' |
||||
|
}, |
||||
|
|
||||
|
js: { |
||||
|
'lib': { |
||||
|
'axios': 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.js', |
||||
|
'vue': 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.js', |
||||
|
'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js', |
||||
|
'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js', |
||||
|
'requirejs': 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js' |
||||
|
}, |
||||
|
'app': [src + '/' + app + '/app.js'] |
||||
|
}, |
||||
|
css: { |
||||
|
'lib': { |
||||
|
'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/black-tie/jquery-ui.min.css', |
||||
|
'jquery-ui-theme': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/black-tie/theme.min.css' |
||||
|
}, |
||||
|
'app': [src + '/' + app + '/app.scss'] |
||||
|
}, |
||||
|
font: { |
||||
|
'Lato': 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap', |
||||
|
'Source Sans 3': 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap', |
||||
|
'font-awesome': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export {config} |
||||
@ -0,0 +1,143 @@ |
|||||
|
import yargs from 'yargs'; |
||||
|
import gulp from 'gulp'; |
||||
|
import gf from 'get-google-fonts'; |
||||
|
import sharp from 'gulp-sharp-responsive'; |
||||
|
import concat from 'gulp-concat'; |
||||
|
import autoprefixer from 'gulp-autoprefixer'; |
||||
|
import cleanCSS from 'gulp-clean-css'; |
||||
|
import * as dartSass from 'sass'; |
||||
|
import gulpSass from 'gulp-sass'; |
||||
|
import {deleteSync} from 'del'; |
||||
|
import axios from 'axios'; |
||||
|
import fs from 'fs-extra'; |
||||
|
import path from 'path'; |
||||
|
import {config} from "./config.mjs" |
||||
|
|
||||
|
const sass = gulpSass(dartSass); |
||||
|
|
||||
|
async function prepareSrc(mixedSources) { |
||||
|
await fs.ensureDir(config.tempDir); // Erstellt das temporäre Verzeichnis, falls es noch nicht existiert |
||||
|
|
||||
|
const localFilePaths = await Promise.all(mixedSources.map(async (source, index) => { |
||||
|
const filename = `resource_${index}${path.extname(source)}`; |
||||
|
const localPath = path.join(config.tempDir, filename); |
||||
|
|
||||
|
if (/^https?:\/\//i.test(source)) { |
||||
|
// Source ist eine URL, also herunterladen |
||||
|
const response = await axios({ url: source, responseType: 'arraybuffer' }); |
||||
|
await fs.writeFile(localPath, response.data); |
||||
|
} else { |
||||
|
// Source ist ein lokaler Pfad, also kopieren |
||||
|
return source; |
||||
|
} |
||||
|
|
||||
|
return localPath; |
||||
|
})); |
||||
|
|
||||
|
return localFilePaths; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function clean() { |
||||
|
cleanDist(); |
||||
|
} |
||||
|
|
||||
|
async function build() { |
||||
|
await cleanDist(); |
||||
|
await copyPublic(); |
||||
|
await buildCss(); |
||||
|
await buildJs(); |
||||
|
await buildImg(); |
||||
|
await buildFont(); |
||||
|
publish(); |
||||
|
} |
||||
|
|
||||
|
async function watch() { |
||||
|
await watchCss(); |
||||
|
await watchJs(); |
||||
|
await watchImg(); |
||||
|
} |
||||
|
|
||||
|
function cleanCss() { |
||||
|
deleteSync([config.del.css]); |
||||
|
} |
||||
|
|
||||
|
async function buildCss() { |
||||
|
let sources; |
||||
|
for (let name in config.css) { |
||||
|
sources = await prepareSrc(Object.values(config.css[name])); |
||||
|
gulp.src(sources) |
||||
|
.pipe(sass().on('error',sass.logError)) |
||||
|
.pipe(autoprefixer({cascade: true})) |
||||
|
.pipe(cleanCSS({compatibility: 'ie8'})) |
||||
|
.pipe(concat(name + '.css')) |
||||
|
.pipe(gulp.dest(config.dist + '/' + config.app)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function watchCss() { |
||||
|
gulp.watch(config.watch.css, gulp.series(buildCss)) |
||||
|
} |
||||
|
|
||||
|
function cleanJs() { |
||||
|
deleteSync([config.del.js]); |
||||
|
} |
||||
|
|
||||
|
async function buildJs() { |
||||
|
let sources; |
||||
|
for (let name in config.js) { |
||||
|
sources = await prepareSrc(Object.values(config.js[name])); |
||||
|
gulp.src(sources) |
||||
|
.pipe(concat(name + '.js')) |
||||
|
.pipe(gulp.dest(config.dist + '/' + config.app)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function watchJs() { |
||||
|
gulp.watch(config.watch.js, gulp.series(buildJs)); |
||||
|
} |
||||
|
|
||||
|
function cleanFont() { |
||||
|
deleteSync([config.del.font]); |
||||
|
} |
||||
|
async function buildFont(){ |
||||
|
for (let name in config.font) { |
||||
|
await new gf({ |
||||
|
outputDir: config.dist + '/' + config.app + '/fonts/' + name, |
||||
|
cssFile: name + '.css', |
||||
|
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36', |
||||
|
overwriting: true |
||||
|
}).download(config.font[name]); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function cleanImg() { |
||||
|
deleteSync([config.del.img]); |
||||
|
} |
||||
|
async function buildImg(){ |
||||
|
await gulp.src(config.watch.img) |
||||
|
.pipe(sharp({ |
||||
|
formats: [{format: 'webp'}] |
||||
|
})) |
||||
|
.pipe(gulp.dest(config.dist + '/' + config.app)); |
||||
|
} |
||||
|
|
||||
|
function watchImg() { |
||||
|
gulp.watch(config.watch.img, gulp.series(buildImg)) |
||||
|
} |
||||
|
|
||||
|
async function cleanDist() { |
||||
|
deleteSync([config.del.dist]); |
||||
|
} |
||||
|
async function copyPublic(){ |
||||
|
await gulp.src(config.watch.srcPublic) |
||||
|
.pipe(gulp.dest(config.dist + '/' + config.app)) |
||||
|
} |
||||
|
|
||||
|
function publish(){ |
||||
|
deleteSync([config.publ]); |
||||
|
gulp.src(config.watch.dist) |
||||
|
.pipe(gulp.dest(config.publ)) |
||||
|
} |
||||
|
|
||||
|
export { clean, build, watch }; |
||||
@ -0,0 +1,2 @@ |
|||||
|
import {watch} from "./gulpfile.mjs" |
||||
|
export default function(cb) { watch(); cb(); }; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue