cgross / grunt-dom-munger Goto Github PK

Can I configure the options.read() method to only get me the script tags I want to?
If I got it right, I can only get all script tags' src attribute.

I'm using grunt-dom-munger for extracting each value for a certain html attribute throughout my templates. I'm doing this using a callback function which only uses jQuery to read the attribute and writes to a grunt configuration attribute (almost what options.read does, but not exactly).

I'm expecting the files to remain untouched since I'm only reading from them, but it looks like grunt-dom-munger modifies the files as it parses the file? Notably, all newlines added for readability and code formatting are normalised and removed. After running the task, my working directory shows up as modified for all html templates I have, which is not desirable.

Would it be possible to somehow disable this formatting/modification of files when only reading from them?

Gives me error: $.each is undefined.
And var $methodsAndParm = $( 'ul.methods > li > h3' ); returns length of 0 when it should be 3

Is $ NOT a fully featured jquery object>
Also $.fn.jquery is undefined because $.fn is undefined.

Help?

Thank you.

        dom_munger: {
            // https://github.com/cgross/grunt-dom-munger
            gst6969: {
                options: {
                    callback: function ( $, file ) {
                        var $methodsAndParm = $( 'ul.methods > li > h3' );

                        grunt.log.writeln  ( 'jq: ' + $.fn );
                        $.each (
                            $methodsAndParm,
                            function (  intIndex, methodAndParm ) {

                                var strHtml = methodAndParm.html();

                                grunt.log.writeln ( strHtml );
                            }
                        );
                    }
                },
                src: [ 'documentation/src/ngDocs/partials/api/*.html' ]
                // dest: 'dist/index.html' // optional, if not specified the src file will be overwritten
            }

I've tried using this module using the following config:

dom_munger: {
  release: {
    options: {
      src: './www_dev/index.html',
      read: {
        selector: 'script[src]',
        attribute: 'src',
        writeto: 'jsFiles',
        isPath: true
      }
    }
  }
},

But found that the processFile function is never run and this.files on line 170 is an empty array (I refer to the dom_munger.js file in the module source). I've tried version 3.3.0 and 3.4.0. I'm not sure is this an issue with my config or a bug. I may get more time to investigate later.

Hi @cgross

Thanks for your good grunt task.
I have an issue with your grunt.
In some cases, I don't want dom-munger replace /> in link, meta tags.

So, how can I do?

Regards,
Nguyen

Cheerio transforms all attributes into lower case when it loads with the xmlMode="false" option.

This breaks the svg.viewBox attribute. Ideally, we should be able to pass the xmlMode into grunt-dom-munger.

Does your "Full End-to-End Example" have a mistake? The src and dest fields have to be inside the main task, haven't they?

Using
aaa6969 : {
optionjjkjkjks: {
prefix:
{ selector: 'div.span4',
attribute:'class', value:'aaa6969'
}
},
src: 'documentation/src/ngDocs/index.html',
dest: 'documentation/src/ngDocs/1.html'
},

ruins my output.
convertts && to escaped. Why?

     <div class="dropdown search" ng-class="{open: focused &amp;&amp; bestMatch.rank &gt; 0 &amp;&amp; bestMatch.page != currentPage}">
        <input type="text" ng-model="search" placeholder="search the docs" tabindex="1" accesskey="s" class="search-query" focused="focused">

when should stay as:

     <div class="dropdown search"
           ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
        <input type="text" ng-model="search" placeholder="search the docs"
               tabindex="1" accesskey="s" class="search-query" focused="focused">

Hey! My recent project has grown to the point that now dom_munger updates/inserts a lot of parts (100s) into html. With this being said a lot of unnecessary logs are written to output, like "Appended to body", which brings 0 value and frustrates when I need to see logs that were written before munger. My suggestion is to use grunt.verbose instead of grunt.log in the places where we insert/update/delete something. This will allow to use --verbose flag when running grunt tasks to see full output if needed.

It would be very useful to filter the text retrieved during read operations by passing a function to be called each time text is extracted.

My use-case is such that I have to manipulate the urls retrieved when scanning the src attribute of some script tags before they are used in any subsequent tasks.

Hello:
I'm the freshener of the module. I'm confused how remove the js useless files. update task only add the uglified file to the html and original files preserved. Can I must use an id wrapping the scripts or css?

Best Regards.

Hi there, great plugin, think I found an issue though. Let me know if there's a better way to do this but I have a situation where I have to run six different dom-munger operations/targets across three different HTML files, all to separate HTML destinations. The easiest way it seems to do this was to run dom-munger three times, changing necessary variables for the paths. One of the six operations is a read to a property named 'jsFiles'. When dom-munger is run a second time, it sees dom_munger.data (where 'jsFiles' resides) as a target and attempts to run it. This causes the whole grunt file to stop. I think something needs to be implemented where a target named 'data' is skipped.

The quick work around for now is to just explicitly call each of the six dom-munger targets in order for every file as opposed to just blanket running 'dom-munger'.

First off: great plugin!

It would be handy for my use-case if the remove operation was performed after the read.

I'd like to use dom_munger to do the following:

• read and store the src attributes of some script tags
• remove the same script tags
• append a new script tag to the page

Unfortunately, the script tags I want to read are first removed by the remove option.

Using callback could be a workaround but moving the order of operations around would make for a cleaner implementation.

Thanks!

Cheerio exposes an option "xmlMode: true", which should be used to distinguish between writing out HTML ( $.html() ) and XML ( $.xml() ).

Therefore, in method processFile:

updatedContents = $.html();  

Should become:

if (options.xmlMode) {
        updatedContents = $.xml();
} else {
        updatedContents = $.html();  
}

Updated to node v6.9.2 and now get the following error in a yo generator that includes a Gruntfile.js

Running "dom_munger:read" (dom_munger) task

Processing index.html
Warning: Path must be a string. Received [ 'index.html' ] Use --force to continue.

I've made no changes to the Gruntfile.js and this is the config of dom_munger read object:

            read: {
                options: {
                    read: [
                        {selector: '[build-concat]', attribute: 'src', writeto: 'jsRefs', isPath:true}
                    ]
                },
                src: 'index.html'
            }, 

Any suggestions?

Hi,
I was wondering is it possible to apply attributes to the conditional elements on document which they are commented out?

Hello, this is more of a general grunt question, not an issue with your awesome module.

I want to check if files linked from src attributes of multiple html files exist. Since the src links have relative paths, I need to know which file I am processing.

I want to do (config):

dom_munger: {
html: {
options: {
callback: function($) {
$('*').each(function() {
if (this.type === 'script' && this.attribs.src) {
// check if linked files actually exist
if (!grunt.file.read(CURRENT_FILEPATH + this.attribs.src)) {
grunt.fail.fatal('you have linked a file which does not exist');
}
}
});
}
}
}
}

Can you advise how to get the CURRENT_FILEPATH inside the callback function?

grunt.task.current.data.files[0].src does not work because I am passing a glob match pattern such as:
files: [{
expand: true,
src: 'something/else/*/.html'
}]

Cheers,

Mike

I'm working with a index.html.erb file (rails file), and I need to update the src attribute of a script to be something like this:

<script src="<%= path_to_code %>"></script>

I'm using the update method, but when I do so (by value: ''<%= path_to_code %>"), it doesn't put transfter that string literally to my file. I'm guessing that <%= %> is used in grunt/this library.

How would I escape this so I can pass it as a string?

This is more a RFC cuz I'm not 100% sure this is necessary.

What do you think about adding a replace, after and before options?

The reason is because we had to replace a LESS import to a CSS import and rather than doing 3 separate updates it was easier to just replace. You can't append/prepend however since a <link> doesn't have children.

Also, theoretically if you have after or before you don't need replace since you can just remove the original element afterwards.

Just started using dom-munger, started out with the read example and got an error that I wasn't passing strings to path.join. No idea what to do here so I debugged dom_munger.js and found out that 'undefined' was being used in path.join (line 34) for val. Eventually I realized that this was due to a <script> tag in my HTML file that had inline JS rather than a source attribute. Admittedly, had I looked at my HTML sooner, I may have realized this quicker, easily fixed by switching selector to 'script[src]'. However it would have been nice to get some warning at least like "Hey, the attribute you're requesting doesn't exist for this node".

Liking what this plug-in does so far, keep up the good work!

This way people can use DOM that will eventually be removed as a selector BEFORE it's gone.

This is a very functional plugin from usability perspective, and I've used it on grunt-powered projects. I do, however, have specific requirements to use this for projects powered with gulp, so was wondering if you have any plans for porting this to gulp. Cheers!

I'm not sure if you can't cant do this or the documentation is just unclear.
Basically what i want to do is to use the callback to select one dom object in the html and then write that to the destination file.

When I load XML string into cheerio it converts all nodes (attributes + element node) into lowercase. Everything works fine but post cheerio transformation my XPath query fails because of all lowercase issue. Is there any way we could avoid this behavior of cheerio?

Thanks,
M

I want to collect all the javascript file references (paths) from all html files [src].

Is there a way to achieve this? Currently, the writeto variable jsRefs is getting overwritten and I am not sure how to get around this.

grunt.initConfig({
        dom_munger: {
            your_target: {
                options: {
                    read: {
                        selector: 'script',
                        attribute: 'src',
                        // Is there a way to instruct jsRefs to be
                        // a multi-dimensional array or object.key
                        // combination per source file holding
                        // the jsRefs Arrays?
                        writeto: 'jsRefs',
                        // <-
                        isPath: true
                    }
                },
                // Going through multiple html files, collecting javascript references
                src: ['html/*.html']
            },
        },
        log: {}
    });

    grunt.registerTask("log", function() {
        var jsFiles = grunt.config.process('<%= dom_munger.data.jsRefs %>');

        // only last processed file with array of paths
        console.dir(jsFiles);
    });