O
O
OnYourLips2015-12-03 17:32:22
css
OnYourLips, 2015-12-03 17:32:22

Building one JS file from other JS, json (with parameters), HTML and CSS?

I have a widget that consists of several pieces of HTML in which data is substituted, several JS files in the correct order, a CSS file, and a json file with parameters.
It is necessary to combine all this into one JS file (including styles and pieces of HTML). Development in one file was not carried out because it is not convenient.
And if everything is clear with JS, then pieces of HTML, CSS and parameters from json must be substituted in certain places, observing the JS syntax:
var cssData = <%= placeholder %>;
Here placeholder must be replaced with the content of a specific variable.
What JS templating engine would you recommend for such a task?
I am using gulp.
I googled that you can use gulp-template, in which to pass json-serialized strings, but I don’t really like this method: IDE support is lost due to incorrect JS syntax.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey Sergey, 2015-12-03
@hahenty

It's time to write your template engine!
In general, instead of intricate delimiter signs, you can simply write
and parse such variable declarations in the necessary separate way.

B
bromzh, 2015-12-03
@bromzh

IMHO, using a template engine to generate js files is a bad idea. It is difficult to debug, there is no control from the side of the language. It's like #define in C/C++.
Why not use a framework for this? Some kind of angular or ember. Just a job for them. Instead var cssData = <%= placeholder %>;use services: var cssData = placeholderService.getValue();. In addition, IDEs can work with popular frameworks.
You can also take react if you don’t want the whole framework. It is quite possible to describe a component in different files there, there are several solutions for this.
There are also web components. Polymer, for example, is already version 1.0. If there is no need to support old browsers, then you can take it. As a last resort, there are polyfills for components.
Well, as an option, there is babel.js. It compiles one js code into another. Write your own plugin and compile everything with it. For gulp, there is gulp-babel.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question