From: Nicolas Coden Date: Sat, 16 Jun 2018 07:15:54 +0000 (+0200) Subject: Use pull request #10925 from ncoden/docs/update-zurb-template-javascript-doc-10353... X-Git-Tag: v6.5.0-rc.1^2~140 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ad6c9eb757647636593b386994ab56e5bd76410f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Use pull request #10925 from ncoden/docs/update-zurb-template-javascript-doc-10353 for v6.5.0 8d92c8086 docs: update ZURB template JavaScript docs #10353 9c2f818da docs: fix typo in starter project docs Signed-off-by: Nicolas Coden --- diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md index 65bdf8575..be07ff935 100644 --- a/docs/pages/starter-projects.md +++ b/docs/pages/starter-projects.md @@ -101,12 +101,16 @@ Here's an overview of what the ZURB Template can do: * **JavaScript Compilation** - All JavaScript files in the `src/assets/js` folder, along with Foundation and its dependencies, are bundled into one file called `app.js`. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler. - - If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html) + JavaScript is transpiled using [Babel](https://babeljs.io) (with the [es2015 plugin](https://babeljs.io/docs/plugins/#es2015)) so you can use [ES2015 features](https://babeljs.io/learn-es2015/). + The main Js file is under `src/assets/js/app.js`, and imports Foundation, jQuery and whatInput. You can import there installed packages and custom files, they will be included in the build. A source map is created that maps back to the original files. By default, the bundled `app.js` is uncompressed. When building for production, the file is run through [UglifyJS](https://github.com/mishoo/UglifyJS) for compression. + The whole bundling process is handled by [webpack](https://webpack.js.org): it manages all assets and dependencies for you and compiles them into one single file. If you're unfamiliar with imports or module bundling, check out: + * [What are ES6 imports](http://2ality.com/2014/09/es6-modules-final.html) + * [Beginner’s guide to webpack](https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460) + * [Beginner’s guide to JavaScript Modules](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). + * **Image Compression** By default, all images are copied as-is from `assets/img` to your `dist` folder. When building for production, images are run through [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) for compression. The plugin supports JPEG, PNG, SVG, and GIF files.