gulp-inline-requirejs

A gulp-plugin that will load and inline contents of a require call from a script tag in a HTML file.

Usage

Install gulp-inline-requirejs as a development dependency:

npm install --save-dev gulp-inline-requirejs

Then, add it to your gulpfile.js:

let inlineRequireJS = require('gulp-inline-requirejs');

When you use it in your workflow, you must always provide a path to the Javascript file where you keep your require js config. The plugin will automatically extract the correct file path directly from the path - you don't need to do anything else.

Use case

Let's say that you are requiring the logic to go along with a view like this:

HTML CONTENTS HERE
<script>
    require(['ButtonElement']);
</script>

What will happen when you run the plugin is that it will detect the path to the file from the config, prepend the stringID of the dependent path and require it:

HTML CONTENTS HERE
<script>
    define('ButtonElement',["exports","UserAgent","PubSub"],function(t,e,n){ (...) });require(['ButtonElement']);
</script>

Example

 return gulp.src(FILES.appwireframeHTML_src)
            .pipe(inlineRequireJS('../compiled/scripts/requireConfig.js'))
            .pipe(gulp.dest(FILES.appwireframeHTML_dest));

Config

The first argument is the path to the requireJS config. This is not optional. You can provide an optional boolean second parameter. If true, the plugin will not require the inlined script. This is useful is you wish to require the code at a later point.

inlineRequireJS(path, noRequire)

path

Type: String

The path to the require config file.

noRequire

Type: boolean

Defaults to false. If true, the script won't require the code immediatly.