asset function is not defined in the context

[rajkaran]

HI there,

I am new to Grunt, I have added below lines to my grunt file.

module.exports = function (grunt) {

 // Load grunt tasks automatically
 require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Configurable paths for the application
 var appConfig = {
   app: require('./bower.json').appPath || 'web/bundles/insighteclipse/app',
   dist: 'dist'
 };

// Define the configuration for all the tasks
grunt.initConfig({

// Project settings
   yeoman: appConfig,


twigRender: {
    your_target: {
      files : [
        {
          data: { 
              greeting: "Hello",
              target: "world"
            },
          template: 'src/Insight/EclipseBundle/Resources/views/Default/sample.html.twig',
          dest: '<%= yeoman.dist %>/demo/sample.html.twig'
        }
      ]
    },
},

  });

 grunt.loadNpmTasks('grunt-twig-render');



};

And got this error

Running "twigRender:your_target" (twigRender) task
Error parsing twig template src/Insight/EclipseBundle/Resources/views/Default/sa
mple.html.twig:
TwigException: asset function does not exist and is not defined in the context
Error parsing twig template src/Insight/EclipseBundle/Resources/views/Default/sa
mple.html.twig:
TwigException: asset function does not exist and is not defined in the context
Warning: ENOENT, no such file or directory 'C:\xampp\htdocs\eclipse\InsightEclip
seBundle::base.html.twig' Used --force, continuing.

What I am missing??

I am aiming to convert twig templates into html so that I can have all the rendered paths to my assests, which I would feed into usemin and get my assets uglified.

Any suggestions do achieve similar is welcome.

Thanks

Raj

[stefanullinger]

Hi Raj,

although this error seems to be related to Twig itself, I would like to help you with this. But I think, I will need to see the template. It seems you are using a function called 'asset' somewhere. Have you tried removing this function? Does it work without it?

[rajkaran]

Hi Sullinger,

If I remove that function then my template will not include my assests(js, css, images).

Below is the template:

{% extends 'InsightEclipseBundle::base.html.twig' %}

{% block title %}A sample Page{% endblock %}

{% block stylesheets %}
<link href="{{ asset('bundles/insighteclipse/bower_components/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/insighteclipse/app/styles/base.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/insighteclipse/app/styles/main.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block javascript %}

<script src="{{ asset('web/bundles/insighteclipse/bower_components/lib/router.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/bower_components/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/bower_components/angular/angular.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/bower_components/angular-route/angular-route.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/bower_components/jquery-ui/jquery-ui.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/bower_components/angular-ui-sortable/sortable.js') }}"></script>



<script src="{{ asset('bundles/insighteclipse/app/scripts/app.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/app/scripts/controllers/main.js') }}"></script>
<script src="{{ asset('bundles/insighteclipse/app/scripts/controllers/about.js') }}"></script>

{% endblock %}

[stefanullinger]

Hi Raj,

by looking at your template, I guess you are using Assetic for asset management in a Symfony 2 setup. Assetic extends twig by adding the asset function that then can preprocess the defined asset in any way you like.

Like some people posted on this issue of the Assetic repo, I don't really see a need for using Assetic with grunt. Instead you should use grunt plugins to replace the usage of Assetic, if possible.

You can still use this 'asset' function, but you will have to extend Twig in JavaScript/Grunt as Assetic does extend Twig in PHP/Symfony. Please see the grunt-twig-render readme on how you can add custom functions to Twig. This way, you can define your own 'asset' function and define what should be done with the assets.

Hope this points you in the right direction?!

Stefan

[rajkaran]

Hi,

Just for curiosity, what is the output if I compile my twig template with this grunt plugin, because as you see in the error I also have the issue related to extending templates.

My actual motive of using this plugin was to feed the generated html file to the usemin plugin, The whole process looks cumbersome; so I am planning to abandon the idea.

Raj

[stefanullinger]

Hi Ray,

if you add an asset function that simply outputs the provided string, your Twig task output will be valid HTML files that you can then pass to the usemin plugin.

Note: The following is untested / pseudo-code.

options:
{
  extensions:
  [
    function(Twig)
    {
      Twig.exports.extendFunction( "asset", function( source )
      {
        return source;
      });
    }

  ]
}

Then

<link href="{{ asset('bundles/insighteclipse/bower_components/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
...

should become

<link href="bundles/insighteclipse/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
...

[rajkaran]

This is interesting.. let me try this.

One more question how can I ignore extended twigs or is there any way to add them in the twig under compilation.

Thanks a lot

[stefanullinger]

So you mean something like a per template extension?
This might be possible by setting up multiple targets for the twigRender grunt task.

grunt.initConfig({
  twigRender: {
    options: {
      // Task-specific options go here.
    },
    templatesWithAssets: {
      options: {
        // Target specific options go here
      },
      files : [
        {
          data: // Path to JSON, JSON5 or YAML file, or POJO, or Array of filepaths and POJO
          template: // Path to template file
          dest: // Path to output destination here
        }
      ]
    },
    templatesWithoutAssets: {
      options: {
        // Target specific options go here
      },
      files : [
        {
          data: // Path to JSON, JSON5 or YAML file, or POJO, or Array of filepaths and POJO
          template: // Path to template file
          dest: // Path to output destination here
        }
      ]
    }
  },
});

[rajkaran]

Hi,

what I do with this:

{% extends 'InsightEclipseBundle::base.html.twig' %}

This causes an error.

Warning: ENOENT, no such file or directory 'C:\xampp\htdocs\eclipse\InsightEclipseBundle::base.html.twig' Used --force, continuing.

[stefanullinger]

Hey Raj,

using namespaces is not yet supported by the underlying TwigJS library, but there is a pull-request for it, so you might have to wait until it is merged.

Stefan

[rajkaran]

Is there any way I can write a function and replace it with actual twig template or remove this statement. because I don't add any css or js to my base template

Raj

[stefanullinger]

There are many options. You could try to add another task that replaces this namespace or removes it entirely, for example using https://github.com/erickrdch/grunt-string-replace