Documentation about customizing javascript load on the page using NPM is missing

I tried to find a way to combine those 3 references to js files existing in html page, and it looks like there is no such documentation. Beside this, I think every project uses some extra javascript files. In order to have one single reference in html I need a way to compile all the neccessary javascript in one single file. I also need to be able to cusomize the content of the javascript library thru NPM, because I think this is the point of installing the source code with NPM.

I tried unsuccessfully to compile the three references together. It seems that (correct me if I’m wrong) the materialize.js library does not resolve its jQuery dependency internally, and for this reason the three files only see their components when they are loaded on the same file.

I think it is easy to compile a file that only includes the components selected from node_modules, but there is no documentation anywhere for this too, and as I have seen there are many people looking for this documentation. Instead, I think the result custom.js will have the same compilation problem with the other 2 files, jQuery and init.js.

So the question is: where or when will we be able to have the documentation I mentioned above?

[pwcreative]

I actually already answered this in another post but it has zero response:

https://github.com/Dogfalo/materialize/issues/6248

1. Create a folder on your desktop called materialize-js-compiler

2. Open terminal, cd into this folder, and run the following commands:

git clone https://github.com/Dogfalo/materialize cd materialize npm install npm install -g grunt-cli

This clones the latest materialize release, moves the terminal into it, loads node modules, and as @SorinGFS pointed out, installs the grunt cli globally.

1. Open the Gruntfile and comment out any unnecessary components on lines 192-221. Bear in mind that some components rely on others, and some are needed by default. I use this compiler to generate the js file for each project I work on, so comment and uncomment as I move from project to project.

2. If you want to include external js, create a new folders inside materialize-js-compiler > materialize and pop any scripts in there. I use the Startup theme and Slick, so all those scripts go in here. Add these as new lines after line 222:

      'startup/TweenMax.min.js',
      'startup/ScrollMagic.min.js',
      'startup/animation.gsap.min.js',
      'startup/startup.js',
      'slick/slick.min.js'
   

3. Add a new task right at the end:

grunt.registerTask(‘ugly’, [‘concat:temp’, ‘configureBabel’, ‘babel:bin’, ‘clean:temp’, ‘uglify’]);

Now, if you run ‘grunt ugly’ from terminal, you’ll get a nice new materialize.min.js file in the bin folder - containing just the components you selected and the external scripts.

There will be a neater way to do this but it was the first way I got it to work so I just stick with it. Hope it helps.

[DanielRuf]

he said that better documentation is required.

PRs are always very welcome.