Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

90 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Jake is a command-line line tool for building JavaScript packages from source code. It’s basically a thin wrapper around Packr that lets you easily configure builds for multiple packages with different compression settings, using a simple YAML config file.

It supports all the same compression settings as Packr, including generation of source maps for your package files. You can also use ERB in your source files to generate code.

To begin with, create a file called jake.yml in the root directory of your project; you will run the jake command from here. A basic config looks like this:

---
source_directory: source
build_directory: build
layout: together
header: COPYRIGHT
builds:
src:
minify: false
min:
shrink_vars: true
private: true
packages:
[ DESCRIBED BELOW ]
  • source_directory is the directory relative to jake.yml where your source files are, and build_directory is where all the generated build files will be placed.

  • layout describes whether files from separate builds should go in separate directories. For example if you have a package called foo, with the above config the together layout will generate build/foo-src.js and build/foo-min.js, whereas a layout value of apart will generate build/src/foo.js and build/min/foo.js.

  • header specifies a file whose content should appear at the top of all generated build files. The content of this file will typically be JavaScript comments containing copyright and license information. This content is never minified. The header option may be omitted.

The build listing, given by the builds option in the config file, lists all the builds you want to produce for distribution, and what minification settings each build should use. JavaScript projects typically distribute both compressed and uncompressed copies of their code to suit both production and development environments.

You can have as many builds as you like and the names are up to you. I’m using src and min as readily understood examples. Each build may specify some combination of the following options:

  • minify: false – Disables minification for this build. This precludes use of further minification options.

  • shrink_vars: true – Tells the minifier to compress local variable names inside functions.

  • private: true – Tells the minifier to obfuscate ‘private’ variables with numeric replacements. JavaScript convention is that any name beginning with an underscore, e.g. _foo or obj._bar should be considered private. They are replaced with _0, _1, etc.

  • base62: true – Produces base-62 encoded minification.

  • suffix: false – Files from this build should not have a suffix if using the together layout, so you get build/foo.js rather than build/foo-src.js, for example. Only one build may use this option, otherwise file name clashes will occur.

  • source_map: $build_name – Generates a source map for each file in this build, relative to a corresponding file in $build_name. For example, a min build with source_map: src will produce a files foo-min.js and foo-min.js.map where the source map refers to locations in foo-src. You can make the source map relative to the original source code by setting :source as the value of $build_name.

The package listing, given under the packages config option, describes the packages you want to produce and which source files are used to generate them. A package is named using the path under build_directory where it should be generated, e.g. foo or ext/awesome (you may omit the .js extension). Each package lists one or more source files used to build it, and may optionally list some extra options as described below.

For the examples, assume the source directory is src and the build directory is dist. This package uses a single source file src/foo.js and generates dist/foo_dist.js:

foo_dist: foo

This package generates dist/bar.js from src/bar1.js and src/bar2.js

bar:
- bar1
- bar2

This generates a package at dist/sub/dir.js from src/path/file.js and src/path/baz.js:

sub/dir:
- path/file
- path/baz

If all the source files for a package live in the same subdirectory, you can tidy things up using the directory option. If you use any package-level options, you must list the files under the files option (the above examples are just syntactic shorthands for this):

sub/dir:
directory: path
files:
- file
- baz

The full list of package options is as follows:

  • files - lists the source files used to build the package. Shorthand may be used as above if no further options are used.

  • extends - name of another package from which to inherit configuration. Useful for making a package that includes all the files from another, plus a few extras.

  • directory - the directory under source_directory in which to find source files. May be omitted.

  • header - a custom header file to use on this package. Overrides the root header option. May be omitted.

  • packer - lists minification settings that override settings being used for the current build. If a build listed above uses minify: false, this takes precedence over package-specific instructions. Typically used to override options for the minified build.

  • meta - should be a YAML dictionary containing arbitrary data useful to user-defined build events. May be omitted. See ‘Event hooks’ below.

For example, here’s a package listing that uses all the options:

packages:
foo_dist: foo
bar:
- bar1
- bar2
sub/whizz:
extends: foo_dist
directory: path
header: CUSTOM_HEADER
files:
- file1
- file2
last:
packer:
private: false
meta:
requires:
- jQuery
- GMap2
files:
- one_file
- another_file

In conjunction with the build options listed above, this matches the following project layout (omitting build name suffixes for brevity):

-build/-sub/-whizz.js-bar.js-foo_dist.js-last.js-source/-path/-CUSTOM_HEADER-file1.js-file2.js-another_file.js-bar1.js-bar2.js-foo.js-one_file.js-COPYRIGHT-jake.yml

Jake lets you use Ruby’s ERB templating system within your source code so you can insert values generated from Ruby functions. To use this feature, you need to create a file called Jakefile in the root of your project. This contains helper functions that are called in your source code to inject data.

For example, say you want to extract a version number from your version control system and inject it into your code along with the build name. Your source code should contain something like this:

MyJavaScriptLib.VERSION = "<%= version %>-<%= build %>";

And your Jakefile should contain a helper called version:

jake_helper:versiondo# extract version number from svn, git, whatever# e.g. return '1.0'end

Jake has a built-in helper called build that returns the current build name. When built, the output would contain the following:

MyJavaScriptLib.VERSION = "1.0-src"; // or "1.0-min" for the 'min' build

The Jakefile may also define event hooks that are fired during a build when interesting things happen. This allows you to extend your build process using configuration data from Jake. All event callbacks are passed a Build object as the first argument, and may receive additional arguments depending on the event type. We currently have two events:

file_created is fired whenever a new build file is created. The callback is passed the Buildable package object, the current build type (src or min using the above examples), and the full path to the newly created file. The package object may contain metadata (set using the meta option, see above) which you can use for further code generation.

build_complete is fired after a build has finished running, that is after all sets of minification options have been run. At this point you can use any metadata you’ve gathered to generate more code, copy files to your distribution directory, etc.

$register = {}
jake_hook:file_createddo|build, pkg, build_type, path|$register[path] = pkg.metaendjake_hook:build_completedo|build|FileUtils.cp'README', build.build_directory+'/README'# generate code from $registerend

(The MIT License)

Copyright © 2008-2012 James Coglan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Builds JavaScript projects using PackR and ERB

Resources

Stars

77 stars

Watchers

5 watching

Forks

Releases

Packages

Used by

Contributors

Languages