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

[SorinGFS]

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?

[DanielRuf]

Hi @SorinGFS,

MaterializeCSS does not ship the original sourcecode on npm, only the dist files.

Please check the Gruntfile and clone the repo to customize it.

[SorinGFS]

@DanielRuf Hi,

First of all thank you for info. I tried to use gruntfile.js as a guide, with no luck. There are dependencies which cannot be resolved in another environment but grunt. I use webpack 4 compiler which is smart enough to solve vendor dependencies, but it seems that it doesn't manage to solve this one. Lastly, is way beyond my purpose to understand javascript at developer level, I just want to be able to compile all the neccesary javascript files in one single file to be referenced in front end. I'm able to do this with other frameworks, not with materialize-css. :(

[pwcreative]

@SorinGFS

Are you trying to create a smaller materialize.js file that contains only the components you need for the particular project you're working on? I have found an easy way to compile selected js components and any external js libraries you're using (for instance, I use Slick slider rather than the materialize slider because it's way better). If this is what you're trying to achieve let me know and I'll talk you through it. And if not, my apologies and good luck :)

[SorinGFS]

@pwcreative Hi,

Yes, that is exactly what I'm trying to do! With a little clarification though: I need to be able add my own custom scripts for website, and I want to have them all in a single file. I was able to compile custom css file frommaterialze-css sass src files without any problem. But for the javascript part I saw that there are some issues with es2015 probably managed by using babel plugin which is referenced inside gruntfile.js.

Apart from those mentioned above what I'm trying to do is to find a way to be able to update compiled js file when materialize-css releases a new version. I want an easy to maintain setup, same as I have for other frameworks: nodejs, npm, webpack => new js file, without any other change in the rest of the project. And, most important, all in a single file: materialize-css js components + jquery + init.js + my custom scripts all in a single file to be referenced inside html file as <script src="scripts.min.js">

I dont understand why this nice framework neglected such a small thing like the documentation part for customization. Why to botter to distribute the framework files through npm without the possibility of customization?

So, if you solved this matter, please help me and others interested in solving it.

[pwcreative]

@SorinGFS

I'll show you how I do mine and you can decide if it works for you. I don't compile jquery though - all our sites are Wordpress sites, which requires jquery independently.

I think the docs issue is just a time and resource thing - Bootstrap has a much bigger team and budget for instance. But, I think if we want people to use this over something like Bootstrap, then poor docs and lack of support is not going to help, and will push people away....which is why I've started to answer issues on Gitter as I love this framework :)

If we want people new to development to become Materialize champions then we need to help them at the start.

Watch this thread for my compilation method...

[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.

3) 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.

4) 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'

5) 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.

[SorinGFS]

...poor docs and lack of support is not going to help, and will push people away....

If we want people new to development to become Materialize champions then we need to help them at the start.

@pwcreative

Totally agree!

[SorinGFS]

@pwcreative

Thank you for the guide, I tried, works like a charm. As an addition maybe you should specify that grunt-cli should be installed at global level in order to run grunt ugly (just in case somebody doesn't know that). npm install -g grunt-cli

Now, this solution solves some problems, but not all of them (as you already mentioned). We stil have 3 js references inside html file. Did you know how to get rid at least of that init.js file?

[pwcreative]

@SorinGFS

Yes I did wonder how deep to go with making sure people have npm & grunt installed...but I assumed if they got this far they would know how to if not! I'll add it. Maybe I should make a YouTube or web page detailing it as like I said, I want people to use this framework and dig around customizing it. Even the above method is a little clunky.

Which init file? By any chance from the Startup theme? If so, I found I don't really need the init file. I do all my inits in my custom js. You are right, we are now serving jquery, materialize and custom js as 3 scripts. The alternative here could be to put compile jquery before the materialize components (not tested so don't know if this would work), and then possibly include your own js file at the end. I just realised init may be your custom JS file?

Personally I can live with 3 JS files but the above may work to condense to 1. The issue here is my JS file tends to change a lot, wheres the base external scripts and materialize do not.

[SorinGFS]

@pwcreative

Clearly you should do a youtube tutorial, because there are many looking, I searched and what exists on youtube does not contain that kind of details.

Any theme initialize their components through init.js file. How do you init components in your custom.js file? In Visual Studio intellisense doesn't work for this kind of construction.

[pwcreative]

Hey @SorinGFS

I init them at the top of my custom JS file if they are global, or inside an if statement if they are conditional on a specific page:

            /****************
          INIT
    ****************/

    $('.scrollspy').scrollSpy();
    $('.button-collapse').sidenav({'edge': 'left'});
    $('.sidenav').sidenav();
    $('.collapsible').collapsible();
    $('select').not('.disabled').formSelect();
    $('.header-carousel').slick({
        dots: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 2000,
        infinite: true,
        speed: 1500,
        fade: true,
        cssEase: 'linear',
        pauseOnHover: false

    });
    $('.parallax').parallax();

Like I said, all my sites are built with traditional HTML, CSS, JS, then ported over to wordpress templates, so it is easy for my to serve a single css file and 3 JS files in the correct order. More complex builds may not work via this method.

[SorinGFS]

@pwcreative

Nice, thank you. Now I try to include grunt ugly into my webpack configuration, see if I manage to build sass and js all at the same time. I'll come back with the conclusion.

[SorinGFS]

@pwcreative

Conclusion: It is hard to replace installed materialize-css files with cloned git repository since I don't know how to write dependencies in package.json, I don't even know if it is right to do it this way.

In any case, I made a major progress with your help. Thank you.

[DanielRuf]

You normally do that with npm install ....

[SorinGFS]

You normally do that with npm install ....

@DanielRuf

npm install ...what? With npm install materialize-css you get incomplete content.

[DanielRuf]

No, you clone the repository with git clone or download it, run npm install inside it (already nentioned) and add more dependencies for require calls using npm, eg for adding lodash it's npm i lodash or npm install lodash.

[SorinGFS]

I know that, but what I wanted to do was different, sometning wrong: to replace the content within node_modules/materializecss folder with the content downloaded using clone method.

[DanielRuf]

For this you can run npm install dogfalo/materialize which will clone it directly from GitHub into node_modules.

[pwcreative]

I think it would be good to have all these various customisation methods listed and explained clearly so that we encourage people to use Materialize! I personally am not a fan of the 'read the docs' response. Actually, if we want people to use this tech, we make it a smooth ride and they will use it. If the ride is smoother elsewhere, they'll go elsewhere.

[SorinGFS]

@DanielRuf

Thank you, it worked. I try now to do the rest of the job to run grunt ugly inside the node_modules/materialize-css folder, but it sais Fatal error: Unable to find local grunt. I added grunt-cli dev dependency, it looks like I need to provide the path to gruntfile.js somhewhere.

[SorinGFS]

I think it would be good to have all these various customisation methods listed and explained clearly so that we encourage people to use Materialize! I personally am not a fan of the 'read the docs' response. Actually, if we want people to use this tech, we make it a smooth ride and they will use it. If the ride is smoother elsewhere, they'll go elsewhere.

@pwcreative

For sure! Especially you figure that if you try to search on google, it sais: No results found for "npm install dogfalo/materialize".

[DanielRuf]

For sure! Especially you figure that if you try to search on google, it sais: No results found for "npm install dogfalo/materialize".

This is only meant for contributors, not for normal users and this is the standard (not recommended) way to install from GitHub using a package manager.

[SorinGFS]

@DanielRuf

I think there is a missing link between the user and the contributor here: the customizer!

It's a major decision to use a new framework. If it can't be customized, well, I choose to stay out! That's why I think @pwcreative was right when he said that better documentation is required.

And I think it would be a waste for this framework not to evolve, especially since it is modular and theoretically very easy to customize.

[DanielRuf]

he said that better documentation is required.

PRs are always very welcome.