Deprecated in favour of gulp-tasks
This is our approach to a front-end development workflow using gulpjs for task automation.
Just some basics
$ git init your-project-name
$ cd your-project-name
$ git pull https://github.com/KolibriDev/gulp-blender.git
$ make npmand then to have some fun! here are some of our most used tasks
| Dev. server | Production build | Install CreSS into ./src/scss/ |
|---|---|---|
$ gulp serve |
$ make build |
$ gulp cress |
| Warning: will overwrite any existing scss files |
| Run tests (details below) | Deploy via rsync |
|---|---|
$ make test |
$ make deploy |
Makefile
api // base for an API if needed
dev // development build/server (generated content)
dist // production build (generated content)
tasks // all gulp tasks
spec // tests for build and project
├── build
│ └── specs for this build
├── helpers
│ └── specHelpers
├── project
│ └── your specs go here!
└── support
└── jasmine.json
src // the source files for your project
├── config
│ └── project-api.json // pm2 config file to start the API on production
├── fonts
├── img
├── js
│ ├── project.js
│ └── vendor // 3rd party scripts like underscore or jquery
├── scss
│ ├── main.scss
│ └── vendor // 3rd party styles like normalize
└── views
├── index.jade
└── shared
├── _head.jade
└── layout.jade
Our Makefile always consists of the same four commands, npm, test, build and deploy. These are then often broken into seperate commands (if needed), like make build.
build: gulpbuild requirejs
gulpbuild:
gulp build --env=production
requirejs:
@./node_modules/.bin/r.js -o build-require.jsSee Makefile for more detail.
We run jshint on all scripts and use jasmine for more extensive tests. All jasmine tests are located in ./specs, see structure above for detail.
By default there is one pending test in the ./spec/project folder that you should replace with your own tests.
See Makefile for more detail.
We have a base for an API that can be used for whatever purpose, some kind of middleware for a third party connection (e.g. mailchimp signup), or as a way to deliver content.
Feel free to ignore this if you have no use for it. Note that gulp serve starts the API by default, but you can disable it by giving api in gulp-config.json a falsy value (or by removing it completely).
Tasks and plugins are automatically loaded thanks to gulp-load and gulp-load-plugins, so all you need to do is create a new file within ./tasks/ like so
module.exports = function(gulp) {
// What ever you want to do! f.x.
gulp.task(...);
};Check out gulpjs documentation for more info on registering gulp tasks;
Gulp plugins are as previously stated automatically loaded and attached to the gulp object, therefore e.g. gulp-live-server is accessible at any time via gulp.plugin.liveServer().
Still confused? Check out some of the existing tasks!
We love all contributors! If you wanna join the love, check out our issues and have at it. If you have an idea of how we could improve gulp-blender in a way we may not have thought of yet (a.k.a. an issue on it doesn't already exist, open or closed) than go nuts and create some issues or dive in with a pull request.
Kolibri is a digital product development company based in Reykjavík, Iceland. To learn more about us, check out www.kolibri.is.