Skip to content

Commit

Permalink
Use requirejs to bundle/minify extensions, copy only what we need to …
Browse files Browse the repository at this point in the history 
…dist/, part of #634 (#637)

* Rework extension loading to use a json file, drop ?enableExtensions support

* Close, but no cigar

* Working, all extensions built with requirejs, copied as small as possible

* Revert change to swPrecache I removed for debugging

* Don't copy unused SourceCodePro fonts to dist/styles/fonts
  • Loading branch information
@humphd
humphd authored Apr 6, 2017
1 parent d3f1ff7 commit bb57da3
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 173 deletions.
89 changes: 62 additions & 27 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = function (grunt) {
grunt.loadTasks('tasks');

// Project configuration.
grunt.initConfig({
var config = {
pkg : grunt.file.readJSON("package.json"),
clean: {
dist: {
Expand Down Expand Up @@ -78,12 +78,7 @@ module.exports = function (grunt) {
'dependencies.js',

/* extensions and CodeMirror modes */
'!extensions/default/*/unittests.js',
'extensions/default/*/**/*.js',
'!extensions/extra/*/unittests.js',
'extensions/extra/*/**/*.js',
'!extensions/**/node_modules/**/*.js',
'!extensions/**/test/**/*.js',
'!extensions/**/*',
'!**/unittest-files/**',
'thirdparty/i18n/*.js',
'thirdparty/text/*.js'
Expand Down Expand Up @@ -128,37 +123,23 @@ module.exports = function (grunt) {
dest: 'dist/',
cwd: 'src/',
src: [
'extensions/default/**/*',
'extensions/extra/**/*',
'!extensibility/node/spec/**',
'!extensibility/node/node_modules/**/{test,tst}/**/*',
'!extensibility/node/node_modules/**/examples/**/*',
'!filesystem/impls/appshell/**/*',
'!extensions/default/*/unittest-files/**/*',
'!extensions/default/*/unittests.js',
'!extensions/default/{*/thirdparty,**/node_modules}/**/test/**/*',
'!extensions/default/{*/thirdparty,**/node_modules}/**/doc/**/*',
'!extensions/default/{*/thirdparty,**/node_modules}/**/examples/**/*',
'!extensions/default/*/thirdparty/**/*.htm{,l}',
'!extensions/extra/*/unittest-files/**/*',
'!extensions/extra/*/unittests.js',
'!extensions/extra/{*/thirdparty,**/node_modules}/**/test/**/*',
'!extensions/extra/{*/thirdparty,**/node_modules}/**/doc/**/*',
'!extensions/extra/{*/thirdparty,**/node_modules}/**/examples/**/*',
'!extensions/extra/*/thirdparty/**/*.htm{,l}',
'!extensions/dev/*',
'!extensions/samples/**/*',
// We deal with extensions dynamically below in build-extensions
'!extensions/**/*',
'thirdparty/CodeMirror/lib/codemirror.css',
'thirdparty/i18n/*.js',
'thirdparty/text/*.js'
]
},
/* styles, fonts and images */
/* styles, fonts and images - XXXBramble: we skip the fonts */
{
expand: true,
dest: 'dist/styles',
cwd: 'src/styles',
src: ['jsTreeTheme.css', 'fonts/{,*/}*.*', 'images/*', 'brackets.min.css*', 'bramble_overrides.css']
src: ['jsTreeTheme.css', 'images/*', 'brackets.min.css*', 'bramble_overrides.css']
}
]
},
Expand Down Expand Up @@ -432,7 +413,60 @@ module.exports = function (grunt) {
rootDir: 'dist'
}
}
});
};

// Dynamically add requirejs and copy configs for all extensions
function configureExtensions(config) {
var extensions = grunt.file.readJSON("src/extensions/bramble-extensions.json");

// Write a requirejs config for each included extension
extensions.forEach(function(extension) {
config.requirejs[extension.path] = {
options: {
name: 'main',
baseUrl: 'src/' + extension.path,
paths: {
'text' : '../../../thirdparty/text/text',
'i18n' : '../../../thirdparty/i18n/i18n'
},
optimize: 'uglify2',
preserveLicenseComments: false,
useStrict: true,
uglify2: {},
out: 'dist/' + extension.path + '/main.js'
}
};
});

// Also copy each extension's files across to dist/
var extensionGlobs = [];
extensions.forEach(function(extension) {
// First, copy the dir itself. The main.js will get built below.
extensionGlobs.push(extension.path.replace(/\/?$/, "/"));

// If there are any globs defined for extra paths to copy, add those too.
if(extension.copy) {
extensionGlobs = extensionGlobs.concat(extension.copy);
}
});

config.copy.dist.files.push({
expand: true,
dest: 'dist/',
cwd: 'src/',
src: extensionGlobs
});

// Add a task for building all requirejs bundles for each extension
var tasks = extensions.map(function(extension) {
return 'requirejs:' + extension.path;
});
grunt.registerTask('build-extensions', tasks);

return config;
}

grunt.initConfig(configureExtensions(config));

grunt.registerMultiTask('swPrecache', function() {
var done = this.async();
Expand Down Expand Up @@ -496,7 +530,8 @@ module.exports = function (grunt) {
'build',
'requirejs:iframe',
'exec:localize-dist',
'uglify'
'uglify',
'build-extensions'
]);

// task: build dist/ for browser, pre-compressed with gzip and SW precache
Expand Down
52 changes: 5 additions & 47 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,53 +72,11 @@ should host Bramble's iframe, see `src/hosted.js`.

**NOTE 3:** To use Bramble in a production setting locally, you can run `npm run production` and access Bramble at [http://localhost:8000/dist](http://localhost:8000/dist)

# Optional Extension Loading

Bramble supports enabling and disabling various extensions via the URL and query params.
A standard set of default extensions are always turned on:

* CSSCodeHints
* HTMLCodeHints
* JavaScriptCodeHints
* InlineColorEditor
* JavaScriptQuickEdit
* QuickOpenCSS
* QuickOpenHTML
* QuickOpenJavaScript
* QuickView
* UrlCodeHints
* brackets-paste-and-indent
* BrambleUrlCodeHints
* Autosave
* UploadFiles
* WebPlatformDocs
* CodeFolding
* bramble-move-file

You could disable QuickView and CSSCodeHints by loading Bramble with `?disableExtensions=QuickView,CSSCodeHints`
on the URL.

In addition, you can enable other extra extensions:

* SVGCodeHints
* HtmlEntityCodeHints
* LESSSupport
* CloseOthers
* InlineTimingFunctionEditor
* JSLint
* QuickOpenCSS
* RecentProjects
* brackets-cdn-suggestions
* HTMLHinter
* MdnDocs
* SVGasXML

You could enable JSLint and LESSSupport by loading Bramble with `?enableExtensions=JSLint,LESSSupport`
on the URL

NOTE: you can combine `disableExtensions` and `enableExtensions` to mix loading/disabling extensions.
You should check src/utils/BrambleExtensionLoader.js for the most up-to-date version of these
extension lists.
# Extension Loading

Bramble loads a set of extensions defined in `src/extensions/bramble-extensions.json`. You can
add remove from this list. You can also temporarily disable extensions by using `?disableExtensions`.
For example, to disable QuickView and CSSCodeHints load Bramble with `?disableExtensions=QuickView,CSSCodeHints` on the URL.

--------------

Expand Down
23 changes: 23 additions & 0 deletions src/extensions/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Bramble Extension Loading

Bramble extension loading is done by specifying extensions to be loaded in
[`src/extensions/bramble-extensions.json`](src/extensions/bramble-extensions.json).
This is an array of objects with the following form:

```
{
"path": "extensions/default/InlineColorEditor",
"copy": [
"extensions/default/InlineColorEditor/css/main.css",
"extensions/default/InlineColorEditor/img/*.png"
]
}
```

Here `path` refers to the path under `src/` where the extension's dir lives.
The optional `copy` array includes file path globs to be used when copying
files from `src/` to `dist/` for this extension at build time. Many extensions
have no external dependencies, other than the `main.js` file and any modules it
loads. If this is the case, you don't need to include `copy`. It will typically
include things like stylesheets, images, and other resources that get loaded
dynamically at runtime and aren't packaged using requirejs.
103 changes: 103 additions & 0 deletions src/extensions/bramble-extensions.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
[
{
"path": "extensions/default/CSSCodeHints",
"copy": [
"extensions/default/CSSCodeHints/styles/brackets-css-hints.css"
]
},
{
"path": "extensions/default/HTMLCodeHints"
},
{
"path": "extensions/default/HtmlEntityCodeHints",
"copy": [
"extensions/default/HTMLEntityCodeHints/styles.css"
]
},
{
"path": "extensions/default/JavaScriptCodeHints",
"copy": [
"extensions/default/JavaScriptCodeHints/node_modules/tern/lib/tern.js",
"extensions/default/JavaScriptCodeHints/node_modules/tern/lib/infer.js",
"extensions/default/JavaScriptCodeHints/node_modules/tern/lib/def.js",
"extensions/default/JavaScriptCodeHints/node_modules/tern/lib/signal.js",
"extensions/default/JavaScriptCodeHints/node_modules/tern/defs/ecmascript.json",
"extensions/default/JavaScriptCodeHints/node_modules/tern/defs/browser.json",
"extensions/default/JavaScriptCodeHints/node_modules/acorn/dist/acorn.js",
"extensions/default/JavaScriptCodeHints/node_modules/acorn/dist/acorn_loose.js",
"extensions/default/JavaScriptCodeHints/node_modules/acorn/dist/walk.js",
"extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css",
"extensions/default/JavaScriptCodeHints/tern-worker.js",
"extensions/default/JavaScriptCodeHints/MessageIds.js",
"extensions/default/JavaScriptCodeHints/HintUtils2.js"
]
},
{
"path": "extensions/default/InlineColorEditor",
"copy": [
"extensions/default/InlineColorEditor/css/main.css",
"extensions/default/InlineColorEditor/img/*.png"
]
},
{
"path": "extensions/default/JavaScriptQuickEdit"
},
{
"path": "extensions/default/QuickView",
"copy": [
"extensions/default/QuickView/QuickView.css",
"extensions/default/QuickView/*.svg"
]
},
{
"path": "extensions/default/WebPlatformDocs",
"copy": [
"extensions/default/WebPlatformDocs/WebPlatformDocs.css",
"extensions/default/WebPlatformDocs/html.json",
"extensions/default/WebPlatformDocs/css.json",
"extensions/default/WebPlatformDocs/logo.svg"
]
},
{
"path": "extensions/default/bramble",
"copy": [
"extensions/default/bramble/stylesheets/*.css",
"extensions/default/bramble/images/*"
]
},
{
"path": "extensions/default/Autosave"
},
{
"path": "extensions/default/brackets-paste-and-indent"
},
{
"path": "extensions/default/BrambleUrlCodeHints",
"copy": [
"extensions/default/BrambleUrlCodeHints/style.css",
"extensions/default/BrambleUrlCodeHints/camera/camera-shutter-click-08.mp3",
"extensions/default/BrambleUrlCodeHints/glyphicons-12-camera.png",
"extensions/default/BrambleUrlCodeHints/selfiePreview.png"
]
},
{
"path": "extensions/default/UploadFiles",
"copy": [
"extensions/default/UploadFiles/styles.css",
"extensions/default/UploadFiles/images/*.svg"
]
},
{
"path": "extensions/default/bramble-move-file",
"copy": [
"extensions/default/bramble-move-file/styles/style.css",
"extensions/default/bramble-move-file/images/*.svg"
]
},
{
"path": "extensions/default/brackets-show-whitespace",
"copy": [
"extensions/default/brackets-show-whitespace/styles/main.css"
]
}
]
Loading

0 comments on commit bb57da3

Please sign in to comment.