Not generating minified file from source?

[alkah3st]

Here's my task:

gulp.task('js', function() { return domsrc({file:'source/wp-content/themes/'+project.theme+'/footer.php',selector:'script',attribute:'src'}) .pipe(concat('app.min.js')) .pipe(uglify()) .pipe(gulp.dest('runtime/wp-content/themes/'+project.theme+'/')); });

project.theme = 'leviathan' and resolves to a real path

The second half from your example works (removing the scripts and injecting the reference to the minified script) but the minified script is never created in the /runtime/ directory.

This is the JS in my footer.php:

<script src="/wp-content/themes/leviathan/assets/js/libraries/jquery-1.10.1.min.js"></script>
<script src="/wp-content/themes/leviathan/assets/js/libraries/gumby/ui/gumby.checkbox.js"></script>

[alkah3st]

I've also tried this just a plainjane html file with these two scripts in the root, and it doesn't concat/dist the js files.

[cgross]

Hmm. Can you show me the content of your html file?

You might also try to look at the contents of the stream after domSrc. Use something like: https://github.com/sindresorhus/gulp-debug

[cgross]

Oh sorry I just realized you did paste the html. I think this might be a bug because your html file is not in root. Lemme take a look and get back to you.

[cgross]

I think I see the problem. The pathing in your script tags is not relative to footer.php. Instead its relative to your main app. Obviously you're not serving footer.php directly, but simply embedding it in another page that gets served. So the pathing works correctly there, but domSrc will assume the pathing in the script tags is relative to the file they're read from.

I think the easiest way around this is for me to add an option to allow you to specify the directory the references should be relative to. I'll do that now.

[cgross]

Ok I just published an update. Do another npm install gulp-dom-src to get version 0.1.1. Then you'll want to do something like:

gulp.task('js', function() {
    return domsrc({
        file:'source/wpcontent/themes/'+project.theme+'/footer.php',
        selector:'script',
        attribute:'src',
        cwd: 'source'
    })
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('runtime/wp-content/themes/'+project.theme+'/'));
});

Notice the new cwd option. I'm guessing that yours needs to be "source" but not sure. Let me know if that fixes it for you.

[alkah3st]

Awesome! Okay let me try this out.

[alkah3st]

That works great; I get the app.min.js file generated exactly where I wanted. Now it looks like I have a problem with cheerio, because when cheerio processes my footer.php, since the file isn't a complete HTML file (that is, it has slash body but no opening body tag), it chops off the closing body and html tags after injecting the app.min.js file:

<div class="dom-build">

    <script src="/wp-content/themes/leviathan/assets/js/app.min.js"></script>

</div>

[ there was a closing body and html tag in the original file]

Also it leaves an unwieldy chunk of white space where the script tags were.

[cgross]

Yea I was afraid you'd hit something with cheerio. Its only designed for valid html. I would suggest you do something else to change the script references. Perhaps just read the file in yourself, change it, and save it.

[alkah3st]

So maybe, use dom src to combine everything as I'm doing now, but do something like this https://github.com/hemanth/gulp-replace to replace the footer block with the reference to the minified file?

[cgross]

Yup, exactly.

[alkah3st]

Cool, thank you for the help. Halfway there, but exciting nonetheless! Great work btw.

[cgross]

Thanks!

[alkah3st]

For posterity's sake if anyone has a similar issue: I ended up using https://www.npmjs.org/package/gulp-html-replace with dom src and it works beautifully.