diff --git a/.all-contributorsrc b/.all-contributorsrc index 70f58726db..414573f365 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1526,13 +1526,24 @@ ] }, { - "login":"singhvisha", - "name":"Vishal Singh", - "avatar_url":"https://avatars0.githubusercontent.com/u/38842688?s=460&v=4", - "profile":"https://github.com/singhvisha", - "contributions":[ + "login":"singhvisha", + "name":"Vishal Singh", + "avatar_url":"https://avatars0.githubusercontent.com/u/38842688?s=460&v=4", + "profile":"https://github.com/singhvisha", + "contributions": [ "doc" - ] + ] + }, + { + "login": "coreygo", + "name": "Corey Gouker", + "avatar_url": "https://avatars1.githubusercontent.com/u/649879?v=4", + "profile": "https://www.coreygo.com", + "contributions": [ + "code", + "doc", + "bug" + ] } ], "repoType": "github" diff --git a/Gruntfile.js b/Gruntfile.js index 664103bd27..af50a8c550 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -290,7 +290,8 @@ module.exports = grunt => { }, dist: { files: { - 'lib/p5.min.js': 'lib/p5.pre-min.js' + 'lib/p5.min.js': 'lib/p5.pre-min.js', + 'lib/modules/p5Custom.min.js': 'lib/modules/p5Custom.pre-min.js' } } }, diff --git a/README.md b/README.md index 6a91b9b96f..cfa2b341d9 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,6 @@ We recognize all types of contributions. This project follows the [all-contribut | [Mislav Milicevic
Mislav Milicevic](https://github.com/dekmm)
[💻](https://github.com/processing/p5.js/commits?author=dekmm "Code") [🐛](https://github.com/processing/p5.js/issues?q=author%3Adekmm "Bug reports") | [Yuting Lu
Yuting Lu](https://github.com/yutinglu413)
[📖](https://github.com/processing/p5.js/commits?author=yutinglu413 "Documentation") | [Adil Rabbani
Adil Rabbani](https://github.com/adilrabbani)
[💻](https://github.com/processing/p5.js/commits?author=adilrabbani "Code") [🐛](https://github.com/processing/p5.js/issues?q=author%3Aadilrabbani "Bug reports") [💡](#example-adilrabbani "Examples") | [Pierre Krafft
Pierre Krafft](http://zalastax.github.io/)
[🐛](https://github.com/processing/p5.js/issues?q=author%3AZalastax "Bug reports") [💻](https://github.com/processing/p5.js/commits?author=Zalastax "Code") [📖](https://github.com/processing/p5.js/commits?author=Zalastax "Documentation") [💡](#example-Zalastax "Examples") [👀](#review-Zalastax "Reviewed Pull Requests") [⚠️](https://github.com/processing/p5.js/commits?author=Zalastax "Tests") [🔧](#tool-Zalastax "Tools") | [Zoë Ingram
Zoë Ingram](https://github.com/zoeingram)
[📖](https://github.com/processing/p5.js/commits?author=zoeingram "Documentation") | [Aidan Nelson
Aidan Nelson](https://github.com/AidanNelson)
[🐛](https://github.com/processing/p5.js/issues?q=author%3Aaidannelson "Bug reports") [💻](https://github.com/processing/p5.js/commits?author=aidannelson "Code") [📖](https://github.com/processing/p5.js/commits?author=aidannelson "Documentation") | [Cameron Yick
Cameron Yick](https://github.com/hydrosquall)
[📖](https://github.com/processing/p5.js/commits?author=hydrosquall "Documentation") | | [Tanvi Kumar
Tanvi Kumar](https://github.com/TanviKumar)
[🐛](https://github.com/processing/p5.js/issues?q=author%3ATanviKumar "Bug reports") [💻](https://github.com/processing/p5.js/commits?author=TanviKumar "Code") [📖](https://github.com/processing/p5.js/commits?author=TanviKumar "Documentation") [💡](#example-TanviKumar "Examples") | [Katsuya Endoh
Katsuya Endoh](https://enkatsu.org)
| [Kevin Bradley
Kevin Bradley](https://github.com/OsakaStarbux)
[📖](https://github.com/processing/p5.js/commits?author=OsakaStarbux "Documentation") | [Justin Kim
Justin Kim](https://justinsunho.com/)
[📖](https://github.com/processing/p5.js/commits?author=justinsunho "Documentation") | [Federico Grandi
Federico Grandi](https://github.com/EndBug)
[💻](https://github.com/processing/p5.js/commits?author=EndBug "Code") [📖](https://github.com/processing/p5.js/commits?author=EndBug "Documentation") | [Freddie Rawlins
Freddie Rawlins](https://freddierawlins.wixsite.com/site)
[💻](https://github.com/processing/p5.js/commits?author=FreddieRa "Code") [📖](https://github.com/processing/p5.js/commits?author=FreddieRa "Documentation") | [Luc de wit
Luc de wit](https://github.com/justlucdewit)
[💻](https://github.com/processing/p5.js/commits?author=Luke_ "Code") [🐛](https://github.com/processing/p5.js/issues?q=author%3ALuke_ "Bug reports") | | [Mark Nikora
Mark Nikora](https://github.com/mcuz)
[💻](https://github.com/processing/p5.js/commits?author=mcuz "Code") | [Louis Demange
Louis Demange](https://github.com/Nekzuris)
[🐛](https://github.com/processing/p5.js/issues?q=author%3ANekzuris "Bug reports") | [Sanket Singh
Sanket Singh](https://twitter.com/sanket24singh)
[💻](https://github.com/processing/p5.js/commits?author=sanketsingh24 "Code") [🐛](https://github.com/processing/p5.js/issues?q=author%3Asanketsingh24 "Bug reports") [📖](https://github.com/processing/p5.js/commits?author=sanketsingh24 "Documentation") [💡](#example-sanketsingh24 "Examples") | [Oren Shoham
Oren Shoham](https://orenshoham.com)
[💻](https://github.com/processing/p5.js/commits?author=oshoham "Code") | [Abhinav Sagar
Abhinav Sagar](https://github.com/abhinavsagar)
[💻](https://github.com/processing/p5.js/commits?author=abhinavsagar "Code") | [Jonathan Heindl
Jonathan Heindl](https://github.com/jonnytest1)
[💻](https://github.com/processing/p5.js/commits?author=jonnytest1 "Code") [💡](#example-jonnytest1 "Examples") [🤔](#ideas-jonnytest1 "Ideas, Planning, & Feedback") [📖](https://github.com/processing/p5.js/commits?author=jonnytest1 "Documentation") | [Hirad Sab
Hirad Sab](https://hiradsab.com)
[💻](https://github.com/processing/p5.js/commits?author=hsab "Code") [🐛](https://github.com/processing/p5.js/issues?q=author%3Ahsab "Bug reports") [📖](https://github.com/processing/p5.js/commits?author=hsab "Documentation") [💡](#example-hsab "Examples") | -| [Vishal Singh
Vishal Singh](https://github.com/singhvisha)
[📖](https://github.com/processing/p5.js/commits?author=singhvisha "Documentation") | +| [Vishal Singh
Vishal Singh](https://github.com/singhvisha)
[📖](https://github.com/processing/p5.js/commits?author=singhvisha "Documentation") | [Corey Gouker
Corey Gouker](https://www.coreygo.com)
[💻](https://github.com/processing/p5.js/commits?author=coreygo "Code") [📖](https://github.com/processing/p5.js/commits?author=coreygo "Documentation") [🐛](https://github.com/processing/p5.js/issues?q=author%3Acoreygo "Bug reports") | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key))! diff --git a/developer_docs/custom_p5_build.md b/developer_docs/custom_p5_build.md index cee4115bd1..0e29821be5 100644 --- a/developer_docs/custom_p5_build.md +++ b/developer_docs/custom_p5_build.md @@ -2,15 +2,15 @@ ## Overview -An excellent new [feature](https://github.com/processing/p5.js/pull/2051) of p5.js allows user to build p5.js as a custom combination of its modules. This greatly helps in reducing the production version size of the library, as well as improves overall performance. +An excellent new [feature](https://github.com/processing/p5.js/pull/2051) of p5.js allows user to build p5.js as a custom combination of its modules. This greatly helps in reducing the production version size of the library, as well as improves overall performance. This feature was suggested as a part of a proposal for Google Summer of Code 2017. -## Usage +## Usage -Currently, the usage is through invoking a Grunt task manually from the command line. +Currently, the usage is through invoking a Grunt task manually from the command line: -``` +```sh git clone https://github.com/processing/p5.js.git cd p5.js npm install @@ -18,10 +18,27 @@ npm run grunt npm run grunt combineModules:module_x:module_y ``` -Here, `module_n` refers to the name of the module which you want to select. Multiple modules must be passed as shown above. Also, these modules must have the same name as their folders in `/src` directory to work correctly. While `core` is included by default, `core/shape` needs to be included for shapes like line() and other core features to work. +Here, `module_n` refers to the name of the modules which you want to select. Multiple modules must be passed as shown above. Also, these modules must have the same name as their folders in `/src` directory to work correctly. While `core` is included by default, `core/shape` needs to be included for shapes like line() and other core features to work. + +The above usage example will likely output a `p5Custom.js` larger than the complete `p5.min.js` as the output is not minified using the `uglify` task. + +The recommended steps to reduce bundle size as much as possible are: + +```sh +git clone https://github.com/processing/p5.js.git +cd p5.js +npm install +npm run grunt +npm run grunt combineModules:min:module_x:module_y uglify +``` + +## Examples -## Example +- `npm run grunt combineModules:min:core/shape:color:math:image uglify` + Generates a `p5Custom.min.js` bundle in the `lib/modules` directory with the combineModules and uglify tasks. Note that modules should be listed after `combineModules:min` and the `uglify` task should have a space after the modules list. -`npm run grunt combineModules:core/shape:color:math:image` +- `npm run grunt combineModules:core/shape:color:math:image` + Generates a non-minified `p5Custom.js` bundle in the `lib/modules` directory. -This will generate your `p5Custom.js` bundle in the `lib/modules` directory. +- `npm run grunt combineModules:min:core/shape:color:math:image` + Generates a `p5Custom.pre-min.js` in the `lib/modules` directory with the `combineModules:min` task. Note that in this example `npm run grunt uglify` can be run separately after running the `combineModules:min` task. diff --git a/tasks/build/combineModules.js b/tasks/build/combineModules.js index 507bb93c8f..e050b402c9 100644 --- a/tasks/build/combineModules.js +++ b/tasks/build/combineModules.js @@ -4,6 +4,7 @@ const fs = require('fs'); const path = require('path'); const browserify = require('browserify'); const derequire = require('derequire'); +const { format } = require('prettier'); module.exports = function(grunt) { grunt.registerTask( @@ -16,12 +17,14 @@ module.exports = function(grunt) { // Module sources are space separated names in a single string (enter within quotes) const temp = []; for (const arg of arguments) { - temp.push(arg); + if (arg !== 'min') { + temp.push(arg); + } } const module_src = temp.join(', '); // Render the banner for the top of the file. Includes the Module name. - const bannerTemplate = `/*! Custom p5.js v<%= pkg.version %> <%= grunt.template.today("mmmm dd, yyyy") %> + const bannerTemplate = `/*! Custom p5.js v<%= pkg.version %> <%= grunt.template.today("mmmm dd, yyyy") %> Contains the following modules : ${module_src}*/`; const banner = grunt.template.process(bannerTemplate); @@ -54,15 +57,25 @@ module.exports = function(grunt) { } console.log(srcFilePath); + // Check whether combineModules is minified + const isMin = args === 'min'; + const filename = isMin ? 'p5Custom.pre-min.js' : 'p5Custom.js'; + // Target file path - const libFilePath = path.resolve('lib/modules/p5Custom.js'); + const libFilePath = path.resolve('lib/modules/' + filename); // Invoke Browserify programatically to bundle the code - const bundle = browserify(srcFilePath, { + let browseified = browserify(srcFilePath, { standalone: 'p5' - }) - .transform('babelify', { plugins: ['static-fs'] }) - .bundle(); + }); + + if (isMin) { + browseified = browseified.exclude('../../docs/reference/data.json'); + } + + const babelifyOpts = { plugins: ['static-fs'] }; + + const bundle = browseified.transform('babelify', babelifyOpts).bundle(); // Start the generated output with the banner comment, let code = banner + '\n'; @@ -73,7 +86,23 @@ module.exports = function(grunt) { code += data; }) .on('end', function() { - grunt.file.write(libFilePath, derequire(code)); + // "code" is complete: create the distributable UMD build by running + // the bundle through derequire + // (Derequire changes the bundle's internal "require" function to + // something that will not interfere with this module being used + // within a separate browserify bundle.) + code = derequire(code); + + // and prettify the code + if (!isMin) { + code = format(code, { + singleQuote: true, + printWidth: 80 + 12 + }); + } + + // finally, write it to disk + grunt.file.write(libFilePath, code); // Print a success message grunt.log.writeln(