HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Number of replies: 11
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I've been trying to figure out how to create a Javascript Module and add it to a theme, so I copied the example from the Moodle document Javascript Modules but I must have missed out something vital...as it aint working!

Where the example used 'block_overview/helloworld' I used 'theme_graphite/helloworld'.

I added the call in my layout file for the frontpage...

<?php $PAGE->requires->js_call_amd($modulename, $functionname, $params); ?>

Here is the ERROR message I'm getting...

C:\wamp\www\moodle29\theme\graphite\amd>grunt
Loading "Gruntfile.js" tasks...ERROR
>> TypeError: Arguments to path.resolve must be strings
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

The Moodle Gruntfile.js will not work on Windows because it does not have the PWD environment variable.  I tried altering the script to use 'process.cwd()' but that breaks the YUI Shifter task.  So gave up and wrote my own 'amd' task.  See Shoelace's master branch on GitHub - no link as on iPod.  

The issue should be a tracker issue, but did not get around to seeing if there was one in case something was already in the pipeline before release of M2.9.  And anyway, I had a solution.

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thank you Gareth! That's solves the mystery.

Will try it out.

Cheers

Mary

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

MDL-50001

Reported today by me! smile

Average of ratings: -
In reply to Mary Evans

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

No worries.  I've seen the issue and commented.

If you want to create your own cross-platform Gruntfile.js, then the specific Shoelace commit is: https://github.com/gjb2048/moodle-theme_shoelace/commit/b0e4dd2243a547876be5145cf04fdb1d825e9b5c - ok there are other changes too, but that is where I adapted the Gruntfile.js (and package.json) to have the new 'amd' task.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I have just this minute cloned Shoelace and also temporarily removed theme/shoelace/amd/build diectory. Then I ran grunt to see if it would rebuild the 'build' directory and add the minified src files. It did not work out as I had thought, because I got the following error:

C:\wamp\www\moodle29\theme\shoelace>grunt
>> Local Npm module "grunt-text-replace" not found. Is it installed?
>> Local Npm module "grunt-contrib-copy" not found. Is it installed?
>> Local Npm module "grunt-svgmin" not found. Is it installed?
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
>> Local Npm module "grunt-contrib-jshint" not found. Is it installed?
Warning: Task "watch" not found. Use --force to continue.

Aborted due to warnings.

I am obvioulsy doing things wrong, or more realistically, have got the wrong idea how things work?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

You need: https://github.com/gjb2048/moodle-theme_shoelace/blob/master/package.json too, then follow the installation instructions: https://github.com/gjb2048/moodle-theme_shoelace/blob/master/Gruntfile.js#L12-L18

The Shoehorn YouTube video shows this sort of process: 

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

When I said I cloned 'shoelace' into my Moodle29 dev theme directory, I was meaning the master branch which contains all the files in that repository, so I have package.json installed.

Watching your Video, I see you are using more than just 'grunt'. So why is Damyon saying to use 'grunt' when obviously you need more commands with it, as we do when compiling LESS using

recess --compile --compress moodle.less > ../style/moodle.css
or alternatively 
lessc moodle.less > ../style/moodle.css

I think we need more Moodle Docs so idiots like me can get to grips with it.

I have just uninstalled Grunt from the Moodle directory I had it in and moving back to my root dir where I usually work from when compiling LESS files.

I have just updated 'npm' so that may also have been a contributing factor.

Thanks for your help.

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Oh, in the video I believe I just use 'npm' and 'grunt'.  Its just that I have defined several 'grunt tasks', that's the advantage as its modular so you can get it to do lots besides compile the LESS with 'recess' or 'lessc'.

I believe that Damyon is saying just to use 'grunt' because the Moodle Gruntfile.js looks at your current folder and works out what to do without actually specifying a task.

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gareth,

What is confounding me the most is that whatever I do it just isn't doing anything other than giving me errors.

I like the video and your explaination of whatyou are doing makes sense, I have not tried the method you used in that video yet, as I have been messing with the JS Modules stuff. I'm still not sure where this is supposed to go either...I need examples and can't find any!

<?php $PAGE->requires->js_call_amd($modulename, $functionname, $params); ?>

I am presuming that if I do something like this in the layout page it should work...

 <?php
    $modulename = 'theme_graphite/helloworld';
    $functionname = 'makeitBlue'; // I am presuming this is a function! LOL
    $params = '';
    $PAGE->requires->js_call_amd($modulename, $functionname, $params); ?>

It's oh so new to me and it is utterly frustraiting becasue I feel like I am going round in circles.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

Oh, you don't need the 'page requires' bit, that's for dynamic loading of modules (the next step and the docs was wrong with $OUTPUT so I've corrected that).

Ok, after using 'grunt' to make the 'amd/build' folder from 'amd/src' then you use a bit of JS in the theme to load it in an olderish sort of way: https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/config.php#L157-L159 and https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/javascript/moodlebootstrap.js - I learnt most of what I needed to learn from there and the documentation pages as referenced by the tracker by Damyon before they became live.  So in Shoelace this translates into (I decided to trim Bootstrap down, so no parent JS): https://github.com/gjb2048/moodle-theme_shoelace/blob/master/config.php#L56-L60 and https://github.com/gjb2048/moodle-theme_shoelace/blob/master/config.php#L56-L60 and https://github.com/gjb2048/moodle-theme_shoelace/blob/master/javascript/shoelace.js which loads the AMD modules from: https://github.com/gjb2048/moodle-theme_shoelace/tree/master/amd/build and the source: https://github.com/gjb2048/moodle-theme_shoelace/tree/master/amd/src

That should be all you need to get started again, cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: HELP | Oink! Oink! Grunt! Grunt! Where oh where have I gone wrong!

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Ah...but I want to learn about Javascript Modules and how they are loaded!

The fact that you can make them and add them to the theme/themename/amd/src directory means that they have to be compiled using 'grunt' so that the file is rebuilt as a minified file and stored in theme/themename/amd/build. And it this process that I am stuck with. Methinks the pigsty needs cleaning! LOL

Still...I am learning more. The code looks easier to read now and so I am not in awe of it as I first was.

There are lots of folks out there that are having same problem with that 'error message', and most solutions seems to point to coding ERRORS so perhaps Andrew needs to rethnk some of the code in Gruntfile.js as it is throwing an error saying that 'default' task is not defined and yet it is...so someone or something is wrong!

Thanks for the links and info. And yes I saw that you had amended the Moodle doc too. I corrected some "granma" in it the same day or the day before you.

Cheers and many thanks.

Mary

Average of ratings: -