Homepage
This is the build guide and source for the Emote Menu for Twitch. Normal users should check out the homepage as it is a lot more friendly. For developers that want to contribute, check out the build guide below, make some neat changes, then open a pull request.
Building
In order to speed up building and testing, this project uses npm and gulp to build the script.
Basics
- Make sure npm is installed as per their docs.
- Run
npm install
to get the latest dependencies. - Make sure gulp is globally installed:
npm install -g gulp
. - Make changes to the script in the
src
folder (or other files as shown in the locations section below). - Run
gulp
to build the compiled script.
Source files
- Userscript metadata: All userscript metadata is found in
package.json
within theuserscript
property and must be valid JSON. - Templates: All templates are found in
src/templates
and are compiled with hogan.js using mustache syntax. Templates are accessible withinsrc/script.js
by referencingtemplates.filename();
. For a filename offoo.html
, you can reference it bytemplates.foo();
. You may pass in data to the template like so:templates.foo({bar: 'baz'});
. All templates are automatically referenced as partials for all other templates. - Styles: All CSS styles are found in
src/styles
. When adding a new file, you must also add the file togulp/files.js
in the correct order. Do not use vendor-specific property prefixes (-webkit
,-moz
, etc.) as this project uses autoprefixer to prefix properties with the required vendor-specific prefixes. - News updates: All news updates should be put in
news.json
and must be valid JSON. The key must be a timestamp in the form ofYYYY-MM-DDTHH:MM
, e.g.2014-02-05T15:07
and the value will be your message. All links must havetarget="_blank"
.
Third-party files
This script uses a few third-party files to make things easier. All third-party files such as styles or javascript (including jQuery plugins) are minified with the source filename included. Version information can be found in the package.json
. For any minified javascript files that are found in src
, these are files that will eventually be split off from this repo.
Adding a third-party file is very simple.
- Add the package to the
package.json
. For packages without apackage.json
, add them under thenapa
property. - Run
npm install
. - Add the files that need to be included to
gulp/files.js
in the correct order. Typically files will be located innode_modules
.
Each time you compile the script, the third party files will automatically be included.
Compiled files
- script.user.js: This is the userscript file which has all of the required metadata to work with the various userscript engines.
- script.min.js: This is the browser-ready minified version of the script. This is ideal for referencing by third-party scripts. Third-party scripts should only check for updates directly from Github once every 24 hours; do not directly reference the Github file. For direct linking, you should mirror this script to a CDN and use that instead.
Version numbers
This project uses Semantic Versioning for all releases. Version numbers are changed when creating a stable release. Developer or non-stable releases will be marked as the same version they were originally branched from. When referring to a developer or non-stable release, reference it's commit SHA or reference the download link that you used.
Installing developer versions
A developer may ask you to install a developer version, or you may choose to install a specific version from a commit. The initial steps to install are the same as found on the homepage install section, but instead, you will use an install link directly from the source. A developer will provide an install link to a version for you--use the link they provide to install instead of the install button on the home page.
You may retrieve your own install link by visiting the script.user.js file, and pressing the "Raw" button, which will redirect you to the install link to use (or, if you have a userscript engine installed, it will install it right then and there). If you need an install link for a specific commit, while on the script.user.js file, press y
which will change the link to reference the exact commit, then the "Raw" button for the install link for that commit.
Please note: versions directly installed are strictly for testing only. Once you are done testing, please install the latest stable version.
Gulp commands
gulp
: Compiles the script.gulp watch
: Watches for changes topackage.json
and files insrc/
and automatically runsgulp
.gulp init
: Creates a simplebuild/config/script-copy-paths.json
. Every time you compile, the compiled userscript will be copied to all paths in this file. This allows you to easily test the userscript using your normal engine (Greasemonkey or others). Withgulp watch
, all you need to do is make the changes in the source, and refresh your browser! An example file might look like this:
[
{
"dir": "D:/AppData/Mozilla Firefox/Profiles/default/gm_scripts/Twitch_Chat_Emotes",
"filename": "script.user.js"
}
]
Windows developers
Due to a limit of folder nesting in Windows, more specifically length of the path, you may be unable to delete the node_modules
folder. The easiest method that I have found to clear the node_modules
folder is to use rimraf, however it can be destructive, so be careful and check for typos before you send the commands.
- Browse to the project folder.
- Install rimraf:
npm install rimraf -g
- Clear the
node_moules
folder:rimraf node_modules
Some reading on the matter: