EJS relation + bundling #773

erakis · 2017-08-23T15:06:09Z

Hi,

I was looking for a bundling too like Webpack, but WebPack is not appropriate when the entry are not javascript file. So I found AssetGraph which claims not to have this limitation. Do I'm right ?

I did some test and it's a very interesting tool, good work guys :)

But something is missing, how could I load *.ejs assets ? Do I need to create a new relations javascript file describing *.ejs file ?

My web site structure is something like :

/
   public/
       css/
       fonts/
       images/
       js/
       vendors/
   routes/
       home.js
   views/
       pages/
             home.ejs
       partial/
             header.ejs
             footer.ejs

home.ejs
is including header.ejs and footer.ejs
is including some javascript src tag
header.ejs
is including some css link tag
footer.ejs
is including some javascript src tag

Does this tool is appropriate to bundling my web site. Ideally I would like to :

Include only used javascript, concat them and uglify them.
Concat all css files and minify it to a single file.

Best regards,

The text was updated successfully, but these errors were encountered:

papandreou · 2017-08-23T21:54:41Z

I was looking for a bundling too like Webpack, but WebPack is not appropriate when the entry are not javascript file. So I found AssetGraph which claims not to have this limitation. Do I'm right ?

Yes, correct :). AssetGraph also interops with webpack in case you'd still like to use it for bundling your JavaScript.

But something is missing, how could I load *.ejs assets ?

Hmm, I think you'll need to make sure that .ejs is interpreted as HTML, which is supposed to support the <% ... %> syntax, at least in the sense that its contents shouldn't be scrambled as a result of loading it into AssetGraph and reserializing it.

As an initial attempt, you can try:

require('AssetGraph').Html.prototype.supportedExtensions.push('.ejs');

home.ejs is including header.ejs and footer.ejs

How exactly is it including those files? That sounds like a non-standard relation type, which would have to be added outside of the core framework, and that isn't supported right now. Trying to get it into AssetGraph 4.0.0, stay tuned :)

Does this tool is appropriate to bundling my web site. Ideally I would like to :

Include only used javascript, concat them and uglify them.
Concat all css files and minify it to a single file.

It's very suited to all of the above, with the possible exception of "Include only used javascript". What do you mean by that? Should it exclude dead code from the included files, or should it just ignore other files that might reside on disk, but aren't explicitly included?

erakis · 2017-08-24T21:46:33Z

Hi @papandreou, thank you for taking 2 minutes to answer me.

Yes, correct :). AssetGraph also interops with webpack in case you'd still like to use it for bundling your JavaScript.

I prefer not to use Webpack anyway. I have already wasted too much time (2-3 week) trying to get Webpack working with multiple html/ejs file as entries. extract-text-webpack-plugin htmlwebpackplugin, etc................. there always someting that required a new pluging, and a new one, and a new one and finally you get something that does not work. Maybe it's wonderful for javascript main entry but it is a mess for my needs.

Hmm, I think you'll need to make sure that .ejs is interpreted as HTML, which is supposed to support the <% ... %> syntax, at least in the sense that its contents shouldn't be scrambled as a result of loading it into AssetGraph and reserializing it.

I rename the ejs file to html file and do a small test. The file is loading but I did not test if tag <% %> was scrambled. But what do you mean by scrambled exactly ? Content could be removed ? Modified ?

As an initial attempt, you can try:

I will give a try tomorrow, than you.

How exactly is it including those files? That sounds like a non-standard relation type, which would have to be added outside of the core framework, and that isn't supported right now. Trying to get it into AssetGraph 4.0.0, stay tuned :)

Here is an example :

header.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   ...
  </head>

footer.ejs

   ...

    <% /* jQuery */ %>
    <script src="/public/vendors/jquery/dist/jquery.min.js"></script>

    <% /* jQuery Validate */ %>
    <script src="/public/vendors/jquery-validation/dist/jquery.validate.min.js"></script>

    <% /* Bootstrap */ %>
    <script src="/public/vendors/bootstrap/dist/js/bootstrap.min.js"></script>

home.ejs

   <% /* Here I include the partial header section */ %>
   <%- include('header') -%>

   <body class="nav-md">
     <div class="container body">
       <div class="main_container">
       ...

   <% /* Here I include the partial footer section */ %>
   <%- include('footer') -%>   

   </body>
   </html>

This partial section are useful to prevent repeating it each page (ejs). Instead we include it and we have only one instance to maintain. If AssetGraph is not supporting it, maybe I could create a pre-AssetGraph task to merge all partial section into their respective page and copy those page to the dist folder, or something like that... At the end, I will have a kind of HTML page compatible, except maybe for the <% %> EJS tag. Or maybe your have a better idea ? Or a better site structure to proposed me ?

It's very suited to all of the above, with the possible exception of "Include only used javascript". What do you mean by that? Should it exclude dead code from the included files, or should it just ignore other files that might reside on disk, but aren't explicitly included?

A work colleague told me that Webpack with its graph was able to remove the dead code from included file. But I guess it's not quite that. It can only remove unused files?

Best regards,

* v3: 3.7.0 Add .ejs to Html#supportedExtensions (see #773)

papandreou · 2017-08-24T22:37:22Z

I've released assetgraph 3.7.0 and assetgraph-builder 5.5.0 where the .ejs extension is interpreted as HTML, so at least that should be out of the way now so the require('AssetGraph').Html.prototype.supportedExtensions.push('.ejs'); is no longer required.

I rename the ejs file to html file and do a small test. The file is loading but I did not test if tag <% %> was scrambled. But what do you mean by scrambled exactly ? Content could be removed ? Modified ?

AssetGraph is using an HTML parser to build a DOM of all HTML files (now including .ejs) in the project, so which poses a problem for template constructs that aren't valid HTML. However, we have some mechanisms in place that will rewrite the most typical syntaxes, including <% ... %> so that we can still parse the document, so you should be good.

However, there's still some work to do in order to get AssetGraph to understand all the essential parts of your project well enough to be able to do a production build of it -- I assume that's what you're aiming for, right? Come to think of it, you probably want to use assetgraph-builder for that. Still, since assetgraph-builder uses assetgraph internally, some of the support work would have to happen in AssetGraph itself.

It's not a perfect fit right now, but I'd at least like to spend a little time exploring the use case :)

In any case, assetgraph(-builder) will need a bit of help discovering those templates. You'll need to bring them all into scope by mentioning them all at the buildProduction (from assetgraph-builder) command line, eg. buildProduction ... switches ... *.ejs

Munter · 2017-08-27T22:54:20Z

If your page is actually just a static site I would highly recommend a separate assembly step that takes your code from your .ejs authoring abstraction and outputs a working website. This is the ideal input for assetgraph. If this is not an option I guess you'll either need to try your luck with @papandreou 's suggestion or help us out with our thoughts on extensions for v4, do you could implement .ejs templating support

papandreou added a commit that referenced this issue Aug 24, 2017

Add .ejs to Html#supportedExtensions (see #773)

49f78cc

papandreou added a commit that referenced this issue Aug 24, 2017

Merge branch 'v3'

eb9decf

* v3: 3.7.0 Add .ejs to Html#supportedExtensions (see #773)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EJS relation + bundling #773

EJS relation + bundling #773

erakis commented Aug 23, 2017 •

edited

papandreou commented Aug 23, 2017

erakis commented Aug 24, 2017 •

edited

papandreou commented Aug 24, 2017

Munter commented Aug 27, 2017

EJS relation + bundling #773

EJS relation + bundling #773

Comments

erakis commented Aug 23, 2017 • edited

papandreou commented Aug 23, 2017

erakis commented Aug 24, 2017 • edited

header.ejs

footer.ejs

home.ejs

papandreou commented Aug 24, 2017

Munter commented Aug 27, 2017

erakis commented Aug 23, 2017 •

edited

erakis commented Aug 24, 2017 •

edited