Vue js : Extract actual code from production version minimized files - node.js

We had a vue js code for one of the functionality which we have deployed in production in Production minimized form.
Now I have lost the actual code (Vue js project) so I only left with minimized files (app.js, manifest.js, vendor.js and app.css) because of this I am not able to make any changes for that functionality.
Is there any way to extract the code from production files in vue js project and modify some of the logic.

There is no right anwser for this. You can only try to "hack" some way into webpack minified files. You can do it in Chrome Dev Tools when inspecting the minified file, then click on "Pretty Print" brackets below to format your code in a regular manner, but still all your original source code variables, fnames etc. are changed.. Only if you know some specific values, for examples hard-coded strings you can orient your way around it, but its a long shot...

Related

Use Twitter Bootstrap LESS files with NPM, in Apostrophe CMS

What is considered best practice if I want to use compile Bootstrap from LESS files in my Apostrophe project?
Is it better to install Bootstrap via NPM, or should I manually download Bootstrap and place the files in lib/modules/apostrophe-assets/?
I have reviewed the documentation that I am aware of to try and figure this out. I am not finding any documentation about including CSS and JS assets which are located outside of the lib folder.
I'm the lead developer of Apostrophe at P'unk Avenue.
You can put those files in lib/modules/apostrophe-assets/public/css (and subdirectories thereof, if desired) and include the one that imports all of the others in your configuration for apostrophe-assets, exactly as described in the tutorials:
Pushing assets to the browser
Or you can import it from a LESS file of your own that also imports your custom site-specific styles. That's really up to you.
Of course there is also nothing stopping you from adding assets directly to your outerLayout.html via link and script tags but if you want to take advantage of Apostrophe's minification process, follow the tutorial.
To be clear, any and all templates in Apostrophe can be overridden for your particular project WITHOUT modifying the node_modules/apostrophe folder in any way.
If a template exists at this path:
node_modules/apostrophe/lib/module/MODULE-NAME/views/TEMPLATE-NAME.html
Then just copy it here in your project:
lib/module/MODULE-NAME/views/TEMPLATE-NAME.html
And your version will be rendered instead.
You can use the Nunjucks extends keyword to extend templates that you invent yourself. You can also use cross-module syntax to extend templates that are in a different module:
{# Finds it in the apostrophe-templates module, your version first, #}
{# node_modules if that doesn't exist #}
{% extends "apostrophe-templates:layout.html" %}
Hope this clears things up a little better!

Single SCSS file for Foundation 6

The foundation framework for sites is great but there are lot of steps to start especially for a person who writes server side code.
We need the following:
Single SCSS file with all the code in it in the defined order with all the variables in it. I don't want to mention the include statements.
This is required so that I can run simple sass command:
sass input.scss output.css
I know this can be done simply by combining the files in any text-editor but how to resolve the point mentioned below:
I read in the document that auto-prefixers are not in SCSS files so how these will be handled in the above case.
The one solution I have is to use the compiled CSS, but I still want to have flexibility to change the variables and compile with simple sass command.
Can you please provide solution for this?
You can use the Foundation CLI to generate a project from a template that addresses all of your concerns:
http://foundation.zurb.com/sites/docs/installation.html#command-line-tool
The ZURB template is the one you will want to use since it comes with autoprefixer:
http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template

ES6 imports: pick up updates to external project

We are starting a new project using angular2, typescript and gulp. For the time being our application will consist of two subprojects: a components library (which in the future might be spun off into a separate project) and the app using the component library.
The layouts of the project is going to be something along the lines:
/project_root
/component_library
/src
/library
/components
/services
... etc
/application
/src
/app_name
/components
/services
... etc
The components in application will be using components from the library (but not the other way round)
We would like to have clean (non relative) imports in the app components when importing stuff from the library (we want to avoid ugly imports of the sort '../../../component_library/src/library ...etc' plus, what's more important, we want to be able to move the library code to a separate project without the need to update imports.
There are two possible solutions I see (don't like any of them):
Add a gulp task that would watch the component library and on every change copy the file to node_modules in /project_root
Some sort of simlink? so that we can point /project_root/node_modules to /project_root/component_library/src?
I'm afraid the first solution might not work well with IDE autocomplete in the application (first gulp would need to do the compilation/copying then the IDE would need to pick up the change from node_modules - this looks like something that can be really slow)
The second solution feels hacky - it would need to be repeated by everyone who checks out the code from repo.
What would be the best solution here?
what's more important, we want to be able to move the library code to a separate project without the need to update imports.
Ship your component_library with source and add it as a node_module dependency. Then when someone pulls your code they can add a git remote to node_modules/component_library code and work on the two projects seemlessly.
This is the approach I took with ntypescript.

GWT Superdevmode interposing code server for CSS files

I'm trying to move from Classic to Super dev mode and seeing a problem in the latter. The problem is two-fold. First, it is trying to use the code server to give the css files to the web page. Here is a line from the element in the resultant web page:
<link rel="stylesheet" href="http://127.0.0.1:9876/tdome/../resources/standard.css">
You can see that it is piping the reference through the code server, which is running on port 9876. Now, that wouldn't be a big deal if it would serve the file. But it won't. The styles in that file are missing in the resultant page. This URL straight to the code server:
http://127.0.0.1:9876/resources/standard.css
... gives "server error". Eclipse is tossing a null pointer exception. It seems to have heartburn with files that are not in the /tdome tree. Just snuffling around and pecking in the names of existing files, sometimes Eclipse says it is ignoring the request. Sometimes it says the file doesn't exist when it does, and sometimes (when it really matters, like here), it gives the nullPointerException. At WebServer.java:272, fwiw.
So I need to either get superdevmode to leave these references alone, or get it to serve the file.
Any ideas? Many thanks-
Well, I really didn't find a way to make Super Dev Mode serve the files where they are. But I figured out where they should be instead of where they are. Probably common knowledge to everybody else: make a 'public' directory next to the 'your-project.gwt.xml' file and put them there. The references to them are in that xml file and do not need any qualification- just the filename, no directory path. Super Dev Mode will package them up, serve them, and let you at them.

EmberJS in combination with Ember-Runner

Good day,
I just started with EmberJS in combination with Ember-Runner. I found an working example on Github.
Ember-runner automaticly adds all your template files and JS (at least that is what I thought) together and generarates a singe HTML / JS / templates / CSS file from your own files every time you save. (And optionally minify's and such). A build tool, just like it says in the description.
This is what it does for the CSS and templates part, however for the JS part it only seems to include only one file in my JS folder which is called 'main.js'. Is it possible to scan that dir for other files so it includes those as well? (So I can have separate controller / model files and such).
I hope my question is clear.
Kind regards,
Matthijn Dijkstra

Resources