Polymer build compress - ecmascript-6

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.

Related

Flutter render downloaded html

I have an elearning APP in Flutter, which can render html files stored online. Now I want to download these files to assets, so they may be accessed offline. For this, I will download a zipped file with the entire html's folder and unzip it.
The problem is the html has many subfolders with it's own assets, which I would have to declare in the pubsp.yaml in order to access, but these downloadable htmls are constantly being added (every new course has new files).
I see a few ways to solve the problem:
Somehow declare access to subfolders in the pubsp.yaml.
As far as I know, this cannot be done.
Update the folder access for the installed APP dynamically.
As far as I know, this cannot be done.
Read the html file without unziping it.
I don't know if this is doable (I'm using webview_flutter_plus to render) and weather it would allow access to files in folders inside the zip without declaring them in the .yaml.
Pre-load empty folders inside assets that would mimic the html folder structure, declare them in the .yaml and then unzip and read the htmls from these folders. I would create some 100 of them in order to accomodate a large number of course downloads.
I believe this method would work, but it seems very cumbersome and inelegant.
So my questions are:
Would any of methods 1-3 work and if so how?
Would method 4 work?
Is it possible to reference folders in the .yaml file without them existing? It would make method 4 far easier.
Is there any other way to accomplish this? I cannot change the language, since the APP is months along, but plugins are fair game.
Thanks in advance!

Generating .html file from template engine

My aim is to create some html files (about 30, preferably via CLI) that are identical except for some arbitrary variables to be replaced in the url of links and scripts sources.
I wish I could automate the file creation process but I'm still struggling with the structure.
My first idea was to use Mustache or Handlebars and save the HTML output to file. It's possible with those tools? Are there any more suitable tools or methods?
Ideal for me would be to create files via node and CLI
Any suggestions are welcome.

Angular merge multiple JSON files into one

I am trying to configure the i18next framework for translations in my angular app. I would like to have multiple JSON files (one per view or part of application) e.g home, catalogue.
The way I want to approach this is I want to put all of these in the assets folder under translations so the structure will look like this.
-home.json
-catalogue.json
Then eventually when the build runs I want to bundle all of these into a single json file: for example en-GB.json.
The problem I am facing is I don't know how to go about this. I can't locate the webpack config and if I was to introduce one, what would be the impact?
In short how can I bundle multiple JSON files into one file.

Gulp with WebPack. Which should be building my coffee/jade etc.?

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 :)

Why is Polymer just a series of HTML files with JavaScript?

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?