An init package (you could view it as an boilerplate, but that would be an over-simplification) to get you up and running fast with a clean environment to prototype with javascript.
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).
Features:
- 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
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
Clone the repository into a new folder (your new project's folder):
git clone [email protected]:rdig/a1w-init.git <your-new-project-folder>
Enter your new folder:
cd <your-new-project-folder>
Just run the npm install script which will set up the project for you
npm install
Start writing Javascript
in a .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 (.js
, .min.js
, .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
.js
files. -
Browser - Starts developemnt using a local web server. Open
http://localhost:8080
in your browser. It will auto-reload every time it detects a change in a.js
or.html
file.
To run the tasks use NPM
's run
command:
npm run <task_name>
These are the available tasks you can use:
terminal
: Start local development development in terminal mode.term
: Same asterminal
.browser
: Start development in browser mode.http
: Same asbrowser
.
There is also a shorter command, npm start
which defaults to starting development in terminal mode.
The project is delivered by default with an index.html
and 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 index.html
.
<!-- 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.
A javascript runtime built on chrome's engine (like you didn't already know what node is...).
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
Used to tranpile javascript files. It contains the following presets:
- 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
4.x
or6.x
, but the4.x
version will spit out an excessive amount of warnings (some packages are only maintained for node6.x
+). - 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 filesbuild
- Destination folder where Gulp will build / transpile / move the processed files.
Both these folders can be easily changed inside the gulpfile's configuration object (configObject
).
We welcome contributions of every form, shape or size. Just have a gander at CONTRIBUTING.MD to figure out how to get started.
See LICENSE