It's meant to build simple code / figuring out how things work as opposed to building web applications (although it features a web server for all your in-browser needs).
- ES6 Syntax transpiling w/ stage-0
- Automatic .js file injection into .html (browser mode)
- Permissive of minified .js files (eg: external libraries brought in)
- Local web server w/ auto-reloading
- File bundling (terminal mode)
- Watching files for changes
- Run the files in the terminal (via node.js) w/ auto-reloading
Automatically via NPM
Create a new folder and enter it:
mkdir <your-new-project-folder>cd <your-new-project-folder>
Install the node package (it will trigger all the additional scripts automatically, and set up everything for you):
npm i es6g-init
Or you can run this in one line:
mkdir <your-new-project-folder> && cd <your-new-project-folder> && npm i es6g-init
Manual via this repository
Clone the repository into a new folder (your new project's folder):
git clone firstname.lastname@example.org:rdig/a1w-init.git <your-new-project-folder>
Enter your new folder:
Just run the npm install script which will set up the project for you
How to use
.js file and it will figure out what you want to do and include your files for your.
In any mode you start it terminal or browser, it will look in the
source folder for any
.js script (including minified
.min.js files) and include them.
Minified files always are included first since we assume they are external libraries.
In terminal mode our
.js files are traspiled (except the minified ones), all of them bundled into a single one, moved into the
build folder, then the bundle is will be run inside the console, with a file watcher that listens for changes.
In browser mode all your
.js files are inserted into the
index.html file's designated comment block (find out more), the
.js files are transpiled, then all of them (
.html) are moved into the
build folder. A web server is spawned for that folder with an auto-reload / file watcher listening for changes.
Terminal - Start development in the current terminal window. In will be refreshed anythime it detects a file change on any
Browser - Starts developemnt using a local web server. Open
http://localhost:8080in your browser. It will auto-reload every time it detects a change in a
To run the tasks use
npm run <task_name>
These are the available tasks you can use:
terminal: Start local development development in terminal mode.
term: Same as
browser: Start development in browser mode.
http: Same as
There is also a shorter command,
npm start which defaults to starting development in terminal mode.
The project is delivered by default with an
app.js so you could verify that everything is working as it should. These should run in both terminal and browser modes.
Make note of the comment blocks inside of
<!-- inject:js --><!-- endinject -->
These serve as anchors for
gulp-inject to link to your created
.js files. If you want to know more about them heve a look at github.com/klei/gulp-inject#optionsstarttag.
More Info: github.com/nodejs/node
Task runner and orchestrator (well, there's npm...) of various services (transpiling, http server, file watcher, ...).
More info: gulpjs.com
There are also a number of other packages (gulp plugins) used for various task:
- gulp-babel - a Gulp plugin for Babel. More info github.com/babel/gulp-babel
- gulp-inject - Inject .js files into .html. More info: github.com/klei/gulp-inject
- gulp-connect - Run a local webserver w/ livereload. More info: github.com/avevlad/gulp-connect
- gulp-concat - Cocatenate files stream into one. More info: github.com/contra/gulp-concat
Clean the environment before transpiling / re-transpiling files.
More info: github.com/sindresorhus/del
- es2015 - babeljs.io/docs/plugins/preset-es2015/
- stage-0 - babeljs.io/docs/plugins/preset-stage-0/
Utility to wait for a resource (file, url) to become available, then execute an action on / for it.
More info: github.com/jeffbski/wait-on
- Node.js - Either node version works
6.x, but the
4.xversion will spit out an excessive amount of warnings (some packages are only maintained for node
- Git - Either version is fine for this project, but if you can trick your package manager into installing the latest one, that would be super.
source- Source folder where you should put your files
build- Destination folder where Gulp will build / transpile / move the processed files.
Both these folders can be easily changed inside the gulpfile's configuration object (
We welcome contributions of every form, shape or size. Just have a gander at CONTRIBUTING.MD to figure out how to get started.