Comments (11)
So hatte gestern Abend mal Zeit mir das anzusehen und das ist eig absicht, also das Funktionen die nichtgebraucht werden aus der .min entfernt werden sollte ja so sein. Würde das hier auch ungerne verändern :/ weil das eig "Best Practise" ist.
from ud-basic-webdev-setup.
Da ist einmal meine gulpfile.js Datei.
- Geändert wurde hier, dass der ursprüngliche "Compile .js to minified.js" Abschnitt aus kommentiert wurde
- Neuer "Compile .js to minified.js" Abschnitt hinzugefügt. Siehe Datei.
- Im Abschnitt "Import important packages" noch darunter am ende
const minify = require('gulp-minify');
hinzugefügt
Danach musste ich noch das minify Modul installieren mit npm install gulp-minify
und in der index.html muss natürlich noch im Script-Tag der Dateiname geändert werden, dieser müsste nun main.min.js
lauten anstatt main.bundle.js
Außerdem besitzt meine Ordner Struktur im src
Ordner noch ein assets
Ordner in dem ich alle benötigten Bilder, CSS/JS Bibliotheken rein haue. Der assets
Ordner wird automatisch in den dist
Ordner übertragen.
Ich hoffe ich konnte weiterhelfen
from ud-basic-webdev-setup.
Hmm ich kann dir noch nicht so richtig folgen. Deine Funktion taucht im Bundle nicht auf?
from ud-basic-webdev-setup.
wenn ich zb.
function test(){ var x = 123; console.log(x); }
in der Main.js zustehen habe wird dieser nicht in die main.bundle.js übertragen da in dem Script selber die Funktion nicht aufgerufen wird.
Schreibe ich allerdings
test(); function test(){ var x = 123; console.log(x); }
wird der Funktionsinhalt in die main.bundle.js Datei geschrieben was dann so aussieht
console.log(123);
heißt ich habe am ende keine Funktion mehr die ich über meine HTML Datei aufrufen kann.
from ud-basic-webdev-setup.
Ich habe nun eine Lösung für mich erst einmal gefunden.
Ich habe in der "gulpfile.js" Datei den Abschnitt
const script = () => { return browserify(
${src}/js/main.js, { debug: true }) .transform('babelify', { presets: ['babel-preset-env'], plugins: ['babel-plugin-transform-runtime'] }).plugin('tinyify') .bundle() .pipe(source(
main.bundle.js)) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(terser()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(
${dest}/js)); };
aus kommentiert und dafür folgende Codezeilen hinzugefügt:
const script = () => { return gulp.src('${src}/js/*.js') .pipe(minify({ ext: { min: '.min.js' }, ignoreFiles: ['-min.js'] })) .pipe(gulp.dest('${dest}/js')) };
Somit Generiere ich auch eine Minifizierte JS Datei hab aber nicht die Probleme und es funktioniert alles, so wie es soll.
Aber vielleicht hast du ja noch eine bessere Lösung für mich um das Problem zu lösen.
LG
-Shipy
from ud-basic-webdev-setup.
Hi,
habe das selbe Problem nur hat der Lösungsansatz mit minify nicht funktioniert.
Im Anhang hab ich zwei Screenshots vom src/js/ und dist/js/.
Vielleicht hat ja jemand einen Workaround!?
from ud-basic-webdev-setup.
Vielleicht wäre es sogar möglich einen eigenen "?-Gulp-fragen" Discord Channel zu bekommen, um Beispielsweise solche Probleme besser auch mit der Community zu besprechen.
from ud-basic-webdev-setup.
@Shipyde
Ich bin zwar nicht ganz sicher, aber ich vermute das Verhalten ist Absicht.
In der Regel sind Funktionen, die nicht aufgerufen werden, ziemlich nutzlos und nur Balast. Es gibt hier natürlich auch Ausnahmen. Deswegen ist die Frage ob man das wirklich "fixen" muss oder nicht, weils eben erwartetes Verhalten ist
from ud-basic-webdev-setup.
@micschwarz
Ja ich weiß was du meinst, dass hatte ich auch im Hinterkopf, allerdings bringt mir das ja nichts wenn der Funktionsaufruf im HTML Code passiert und dann dadurch meine komplette Funktion weg ist nur, weil sie nicht in der JS Datei aufgerufen wird.
Klar könnte man versuchen den Teil, zb. bei einem Responsiv Menü mit CSS umsetzen dennoch ist es sichtlich verwirrend wenn dein Code deswegen dann nicht funktioniert und du dir so denkst mh... eigentlich habe ich doch alles richtig gemacht.
Gäbe es den eine Möglichkeit dem Script zu sagen er soll genau diese Funktion so lassen wie sie geschrieben ist?
from ud-basic-webdev-setup.
Du kannst auch statt die Funktion ausm HTML aus aufzurufen, einfach den Listener im JS setzen.
document.getElementById("test").addEventListener('click', test)
Das wäre der vermutlich einfachste und auch sauberste "Workaround". Aber du hast recht, für den Fall sollte man überlegen, ob man das nicht anders machen kann
from ud-basic-webdev-setup.
Du kannst auch statt die Funktion ausm HTML aus aufzurufen, einfach den Listener im JS setzen.
document.getElementById("test").addEventListener('click', test)Das wäre der vermutlich einfachste und auch sauberste "Workaround". Aber du hast recht, für den Fall sollte man überlegen, ob man das nicht anders machen kann
Gut dann werde ich das mal so umsetzen :)
Vielen Dank nochmal für eure Zeit :)
#CLOSED
from ud-basic-webdev-setup.
Related Issues (20)
- Typescript Workflow hinzufügen HOT 3
- npm run dev HOT 1
- e2e Testing als Funktion hinzufügen
- node-gyp error - when installing it uses deprecated node-gyp version 3.8 HOT 2
- Minifyer removes spaces between attributes
- .scss Support
- Schnellere Javascript Builds mit esbuild HOT 1
- Template Engine (EJS) für repetetives HTML HOT 1
- Umgebungsvariablen an Templates übergeben (zu #28) HOT 1
- Sourcemaps nicht im Production Build erstellen HOT 2
- Browsersync wird nicht beendet HOT 2
- Libsass ist deprecated HOT 2
- Wieso müssen .scss Dateinamen mit einem _ beginnen? HOT 1
- E2E Tests my Cypress
- Alle CI Farben hinzufügen
- npm - fibers nicht mehr kompatibel mit Node.js Version >16 HOT 1
- Fehler beim Laden von Schriften
- Vite ist in Version 3 verhanden
- comfort
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ud-basic-webdev-setup.