I was playing today with Jetbrains Webstorm on an express project I have. It gives me the option to compile pug files into html so I was wondering? Isn't it better to compile the pug files into HTML and serve those from express for performance?
No, if you do that you're not understanding the dynamic nature of pug.
Pug dynamically generates the HTML each time it is called, so if you have a template that shows the user's name inside a div tag based on the results of a database query the same pug template can be used for all queries/users. It's also in-memory and very fast.
If you compile into HTML then somehow you'll have to parse the HTML files and do token substitution before sending the HTML to the client.
If your application is truly static with zero dynamic content then you're better off using pug-loader and webpack to generate HTML using a script instead of an IDE like VS Code or WebStorm.
Related
I want a parameter in html code to be dynamic which is passed while the code. For eg if I run eg.html?link=https://google.com then the html code should be able to parse google.com and be able to open it. If I run eg.html?link=https://gmail.com, then gmail should open.
HTML alone cannot do that. In order to dynamically change the content of the HTML file, you will need some server-side processing using a language such as PHP, Python, or Node.js.
I am generating a component application in Polymer .. as a template I used the following: https://github.com/PolymerLabs/start-polymer3. Everything works excellent, I uploaded it to firebase, the point is that I want to make 'polymer build' generate the structure of folders: build / s6-unbundled, along with other folders like node_modules and my custom script, if you know some way to compress all the scripts generated in the build into a single file. Since the components I want to insert in third-party sites but I want to load only one js file and not have to load all what the polymer generates. I've done this with vue-custom.component but I do not know how to Polymer. I appreciate your help.
I have created a new repository and and included all files necessary to host a website on github, see (https://github.com/tonystaark/tonystaark.github.io/tree/master)
However, I received a 404 error when I visited my own website at tonystaark.github.io. The error says that 'For root URLs (like http://example.com/) you must provide an index.html file.'
How do I convert my .pug format into a html (or .postcss into a .css) file then?
You can easily generate html from pug file using command line option,
pug -O '{"doctype": "html"}' index.pug
It's automatically generate index.html file for you.You can check other options from here
Pug files need to be compiled onto the server before being served as an HTML file. There aren't many great ways to compile Pug in the client. If you have a strong need to use Pug as a templating engine, GitHub Pages will not be able to do that. You will need to host your site somewhere that supports Node.js engines (Heroku, DigitalOcean, Amazon S3, etc.)
I didn't see any Pug files in your GitHub repo, though, so I don't know if you figured out another solution or tried to do something else.
I have a pre-existing project that is currently using gulp.
The key libraries/frameworks/languages are:
MongoDB - Mongoose
AngularJS - With ui-router, also using ngClassify
ExpressJS - With Passport
NodeJS
Jade
Coffeescript
Sass - '.sass' format
JPG/PNG's
Currently everything is watched using live reload, minified using uglify and gzipped. My angular html view/directive snippets are sent into a template cache js file. Even the images are minified using image min.
The single page app is very modular by design, there are multiple 'pages' to the app, each page has a specific use (Take the profile page for example), using ui-route to nest views. Not all users will use each page. Hence why I am choosing to move towards WebPack with each 'page' being a module. The goal for this application is to be as reactive as possible. With potential mild load times when switching which page/module they are on.
My current project structure has a src and dist directory each with a server and client folder. the list directory can of course be safely deleted with every build. I currently have no raw js files or raw html (aside from the gulpfile.js that just requires my gulpfile.coffee), everything gets preprocessed by gulp and thats it.
So here are my questions:
Do I replace most of my gulpfile with webpack, and let webpack process everything (Whats the advantage of this). Or do I create an intermediary folder (The gulp output), then run webpack on that folder (just dealing with the minified js/css/html files). Basically, knowing what my libraries/frameworks are, and my situation, how would you structure the build process?
Can you use an ngClassify app.coffee file as an entry point? Or does it have to be compiled first. (If you can, how?)
You can certainly use Gulp to trigger your Webpack build and manage other tasks you may have however the idea of Webpack is that it is your entire build, you no longer need Gulp tasks to 'minify, 'concatenate' and 'imagemin' files etc as Webpack does all this for you by using Plugins and Loaders.
You will have to run Webpack on the project source, not an already minified bundle created by your custom Gulp build.
The angular questions I don't have an answer to I'm afraid :)
I'm starting to experiment with Polymer 1.0, and I noticed that the some of files included via Bower are broken up into the following three:
polymer-micro.html
polymer-mini.html
polymer.html
And each file is imported via HTML Imports within the next one down the list. Then, the rest of the file is just JavaScript.
Perhaps, it's my lack of knowledge regarding HTML Imports, but is this a clever way to utilize dependency management for JavaScript without having to add a third-party library like Browserify for example?