gbm-template v0.0.4
gbm-template
Open source template for a gulp-babel-mocha project We work with yarn :)
Usage
- Download this repo, obviously
- Git init your project
- Change the package.js file project description (name, description, repository & etc)
yarnto install all the packages used by the template- Install gulp globally, you know,
yarn global add gulp - Code like a beast!
Gulp
If you haven't already, you should install gulp as a global package, as you'll need it to run the varies tasks.
All tasks can be executed with either gulp or yarn run.
(If you preferred not to install gulp globally, stick to running with yarn)
Configuration is in gulpfile.babel.js (ES6 supported, yey!), and includes a pre built set of basic tasks.
Tasks
| Gulp Tasks | Description |
|---|---|
lint | Runs eslint on your source code and tests. |
babel | Transpile your source code, outputting into the dist/ |
test | Run the mocha test you'll add to test/ outputting the result to the your console, great for running tests locally. |
test-ci | Same as test, except it outputs the results in junit format to the test-results.xml file. Mainly for when running the tests on a CI server, or if your feeling frisky. |
build | Run lint, test & babel in sequence, so you can check the full process is running smooth. |
build-ci | Runs lint, test-ci & babel. Main command in the circle-ci config. |
Babel
Transpiling your code and test with babel means you can write your code in ES6. (or higher if play with the config a bit)
The project config is set so you can write ES6 code in both the source code, test code and gulpfile.
Babel Preset
The babel config is located in the .babelrc file.
This template currently configured to use the es2015 and stage-2.
Output and Publication
Transpile your code running gulp babel, which outputs to the dist/ folder in the root of the project.
The auto-publication of this template publishes both the original untranspiled code and the transpiled code. You can read more about it under Auto Publishing
If you plan to publish your package manually, don't forget to include the dist/ folder content, the package.js file and change the project main entry point accordingly.
Linting
Starting a new project without a few weeks of slight neglect with eslint is crazy easy and great.
Configuration
This template is configured to lint both the source and test code with a slightly tweaked air-bnb configuration which slightly differs form source to test.
Main eslint configuration is in .eslintrc and is used to lint the src/ folder. The test config builds on top of it with the test/.eslintrc file.
React
This template lint react and .jsx files as well! so other then adding the plugin to babel you are ready to go.
Testing
Hate or love it you need to do it. The template is ready to run mocha tests outputting to either your console or into the test-results.xml file in Junit.
Running the tests with gulp and you can write your tests in ES6.
Continues Integration
The template comes with ready to run circle-ci config, running ready gulp tasks. Why circle? well, cause we like it :)
Configuration
Circle CI config is in the circle.yml ready to install and cache gulp, lint, test and build your code. And if you set it up, auto publish to the public npm registry.
Auto Publishing
The circle configuration is set to auto publish changes that pass the CI tests as a package to npm.
What is Published
The template is currently configured to publish both the transpiled code and the original untranspiled source code. We found it very useful when transpiled packages include the original code for when we like to dig into them for whatever reason.
If you decide to change this behaviour you'll need to modify the deploy.sh file. Don't forget to change the project main entry point in the package.js currently set to dist/index.js. Also don't forget to include the package.js file itself.
Enabling Auto Publication
In order to allow auto publication simply add you account credentials to the following environment variables.
NPM_EMAIL- account email addressNPM_USER- npm usernameNPM_PASS- account password
Ohh and don't forget to inc the package version before merging into master or the publication is skipped.
Configuration
Publication will occur for changes merged only to the master branch if you configure the required environment variable and have incremented the version in the package.json.
If you want publication to occur on a different branch change the circle.yml file accordingly. All other configuration is in the deploy.sh script.
Cheers, -Team BookMD
