This repo contains everything you need to start using Matreshka.js and ECMAScript 2016 today. In case if you don't want to use Matreshka.js, just don't import it (and remove files if you'd like). The boilerplate is created for everybody who wants to meet the new generation of JavaScript, not only for Matreshka.js fans.
There are few steps you need to pass to get started (you will need to use a command line).
- Install Node.js 4+ and npm (usually it automatically installs with Node.js).
- Install Gulp globally via
npm install --global gulp
(you might need to usesudo
:sudo npm install --global gulp
). - Download or clone this repository.
- Install all dev dependencies via
npm install
. - Run
gulp
to see is everything OK (/dist/ folder is created, /index.html and /dist/index.html look the same).
There is a little application (modules, styles etc) which is used as an example.
That's all you need to install needed environment. Let's code!
- Modify existing application.
- Run
gulp
again. It will compile your application source to /dist/ folder.
After you run gulp
command as a result you get ready-to-go application in /dist/ folder which you can upload to a server.
Since ECMAScript.next code needs to be compiled to old-fashioned JavaScript, there are two options how this can be done.
The first is browser compiling via babel/browser.js. This way is useful in case if you have small application and if you don't like to run any command-line watcher while you develop an application. If you have a lot of modules, you can discover slow loading. It happens because scripts need to be recompiled on every page reload. This way is turned on by default.
The second way is useful when you develop application which contains 10+ modules. For this you need to run gulp scripts:watch
before any change to scripts. Files will be compiled and put to /js/ folder on every change from /src/. To use this option you need to modify /src/config.js by replacing all "src"
substrings by "js"
in map
object (for example change lib: 'src/lib'
to lib: 'js/lib'
) and get rid of settings required for Babel (remove babelOptions
and transpiler
). But don't worry about all this stuff. You can look at /src/config.precompiled-example.js and see how it looks like or just rename it to /src/config.js.
- /css/ - CSS files
- /templates/ - HTML templates you may need to include
- /img/ - Images that could be used by your HTML and CSS
- /js/ - Compiled uncompressed JavaScript (ECMAScript 5) files (this folder is gitignored)
- /src/ - The source code written in ECMAScript 2016
- /src/app/ - Your application source files
- /src/app/app.js - This is your start point for development
- /src/lib/ - Some libraries you might need to download and include to the project
- /src/config.js - SystemJS configuration file
- /dist/ - Compiled ready-to-go application files (this folder is gitignored)
- /gulp.js - A Gulp file
- /package.json - Metadata for npm (I hope you already know what is it :))
- /index.html - Main HTML file
- /.gitignore - The list of ignored files and folders for Git
gulp scripts
- Compiles files from /src/ to /js/. You don't need it if you're using browser compiler.gulp scripts:watch
- Listens changes from /src/ and runsscripts
task for every single changed file. You don't need it if you're using browser compiler.gulp scripts:bundle
- Compiles scripts into one single JavaScript bundle and puts it to /dist/js/.gulp scripts:build
- Runsscripts:bundle
, adds needed polyfill and minifies /dist/js/app.js.gulp html
- Uses gulp-htmlprocessor to replace development part of HTML (few<script>
tags and application initialization) by single minified production<script>
and copies the new file to /dist/ folder. To make it clear look at gulp-htmlprocessor docs or compare /index.html to /dist/index.html.gulp default
(or justgulp
) - runsscripts:build
,html
, copies files from /css/ to /dist/css/ and /img/ to /dist/img/.
Enjoy!