eccenux / gulp-monkeyscript Goto Github PK

$ npm install gulp-monkeyscript --save-dev

See DEVELOPMENT.md for details on customizing gulp-monkeyscript.

Either use package.json directly or use separate monkeyscript.json.

If you use monkeyscript.json you can and add the following line in it to get Intellisense working:

"$schema": "./node_modules/gulp-monkeyscript/schema.json",

Add the key-value pairs to your needs. See Showcase for an example.

gulpfile.js:

var ms = require('gulp-monkeyscript');
var msProject = ms.createProject("monkeyscript.json");

//...
gulp.src("src/**/*.js")
	.pipe(concat("script.user.js"))
    .pipe(msProject())
	.pipe(gulp.dest("dist/"));

Note! You should use createFullProject if you want to create both meta.js and user.js.

Also note that createProject returns a function with pre-complied properties.

You only need the meta file for updates of your user script. This will make things easier for your users. So most of the time you should generate both the main script (user.js) and the meta-data file (meta.js).

An example gulp:

var ms = require('gulp-monkeyscript');
var msProject = ms.createFullProject("package.json");

//...

	// user.js
	gulp.src("src/**/*.js")
		.pipe(concat("script.user.js"))
		.pipe(msProject.main()) // add monkeyscript header
		.pipe(gulp.dest("dist/"));
	;

	// meta.js
	var stream = source("script.meta.js");
	stream.end('');
	stream
		.pipe(msProject.meta()) // add monkeyscript header
		.pipe(gulp.dest("dist/"));
	;

Note! You can find a full glupfile example in the example/ folder.

Also note that this just create an empty stream: var stream = source("script.meta.js");stream.end('');. This was tested with "vinyl-source-stream": "2.0.0",.

This monkeyscript.json:

{
    "$schema": "./node_modules/gulp-monkeyscript/schema.json",
    "name": "My Awesome Userscript!",
    "version": "1.0.0",
    "author": "Tom",
    "description": "This userscript adds new functionality!",
    "match": [
        "http://www.website.com/page1/",
        "http://www.website-alter.com/*"
    ],
    "runAt": "document-start",
    "useStrict": true
}

Becomes:

// ==UserScript==
// @name        My Awesome Userscript!
// @version     1.0.0
// @author      Tom
// @description This userscript adds new functionality!
// @match       http://www.website.com/page1/
// @match       http://www.website-alter.com/*
// @run-at      document-start
// ==/UserScript==
'use strict';

<other source>

Where <other source> is whatever things you contacted or built with gulp.

Basic package.json can be generate with a standard Node command:

npm init

By using package.json you will not have to repeat author, name, version and description twice.

You will just add user-script specific information in a separate property called "monkeyscript".

So a minimum package.json would be created by adding some match array for user-script meta like so:

{
    "author": "Tom",
    "name": "My Awesome Userscript!",
    "version": "1.0.0",
    "description": "This userscript adds new functionality!",
	"monkeyscript": {
	    "meta": {
		    "match": [
		        "http://www.expample.com/page1/*"
		    ]
		}
	}
}

gulpfile.js:

const ms = require('gulp-monkeyscript');
const msProject = ms.createProject("package.json");

gulp.src("src/**/*.js")				// get all js from `src` folder 
	.pipe(concat("script.user.js"))	// concat js to a single file
    .pipe(msProject())				// append Grease/Tampermonkey header to that file
	.pipe(gulp.dest("dist/"));		// put the file in `dist` folder

• readable-stream
• streamqueue

MIT © 2017-2020 Tom O'Neill, Maciej Nux Jaros