grab-deps

WordPress library to extract dependencies information from js/css files.

This library dump wp-dependencies.json which includes dependencies and path information about js/css.

• You don't have to specify dependencies from php files.
• You can automate the registration & enqueue of assets.

Example

Suppose that you have assets/js/app.js in your theme folder.

/*!
 * My Plugin main JS
 * 
 * @handle my-plugin-app
 * @version 2.1.0
 * @footer false
 * @deps jquery, jquery-masonry, wp-i18n
 */
console.log( 'This script runs jQuery Masonry.' );

And you can get setting file wp-dependencies.json like this.

[
  {
    "handle": "my-plugin",
    "version": "2.1.0",
    "path": "assets/js/app.js",
    "hash": "5e84fd5b5817a6397aeef4240afeb97a",
    "deps": [ "jquery", "jquery-masonry", "wp-i18n" ],
    "ext": "js",
    "footer": true,
    "media": "all"
  }
]

Now you can bulk register assets through php.

add_action( 'init', function() {
    // Load setting as array.
    $settings = json_decode( file_get_contents( __DIR__ . '/wp-dependencies.json' ), true );
    // Register each setting.
    foreach ( $settings as $setting ) {
        $handle  = $setting['handle'];
        $version = $setting['hash']; // You can also specify @version
        $url     = get_template_directory_uri() . '/' . $setting['path'];
        if ( 'js' === $setting['ext'] ) {
            // Register JavaScript.
            wp_register_script( $handle, $url, $deps, $version, $setting['footer'] );
        } else {
            // This is CSS.
            wp_register_style( $handle, $url, $deps, $version, $setting['media'] ); 
        }
    }
} );

Now you can enqueue any of your scripts/styles with wp_enqueue_script( 'my-app-js' ) or wp_enqueue_style( 'my-blocks-alert-css' ).

Supported Header Info

Name	Default	type	Target
@version	0.0.0	String	both
@handle	Base file name without extension	String	both
@deps	Empty	Array	both
@footer	True	Boolean	js
@media	all	String	css

Installation

npm install @kunoichi/grab-deps

Usage

Suppose that the directory structure of your theme/plugin is like below:

assets
- js
  - main.js
- css
  - style.css

And run this in your npm scripts or gulpfile.js.

// Import function.
const { dumpSetting } = require('@kunoichi/grab-deps');
// Dump JSON
dumpSetting( 'assets' );

For automatic dumping, watch assets directory.

// gulpfile.js
const gulp = require( 'gulp' );
const { dumpSetting } = require('@kunoichi/grab-deps');

// Dump task.
gulp.task( 'dump', function( done ) {
	dumpSetting( 'assets' );
	done();
} );

// Watch assets directory.
gulp.task( 'watch', function () {
	// Watch assets change and dump.
	gulp.watch( [ 'assets/**/*.css', 'assets/**/*.js' ], gulp.task( 'dump' ) );
} );

Now you can get updated dump information whatever changes you made for assets.

JSON Example

[
  {
    "path": "assets/js/app.js",
    "deps": [ "jquery", "wp-api-fetch" ],
  }
]

License text

Nowadays, some compilers like webpack extract license comments. If original is like below:

/*!
 * Main app file.js
 * 
 * @version 2.0.0
 */
console.log( 'Start rendering!' );

file.js will compiled like below:

console.log( 'Start rendering!' );

And in same directory, file.js.LICENSE.txt will be exported.

/*!
 * Main app file.js
 * 
 * @version 2.0.0
 */

In such case, @kunoichi/grab-deps will support .LISENCE.txt format by default. 3rd arghment suffix of dumpSetting supports other format.

// If your JS license will be in `app.js.txt`,
// You can set suffix.
// `app.js` will be `app.js.txt`
dumpSetting( 'assets', './wp-dependencies.json', '.txt' );
// If your licenses will be other format, specify function.
dumpSetting( 'assets', './wp-dependencies.json', function( path ) {
  // Convert path to your license.txt
  return licensePath;
} );