Run your frontend projects without the hassle of actually writing gulp or grunt tasks.
GTB is a node.js module which can manage, compile, minify, serve and watch your front-end projects, no matter what frameworks, libraries or languages you use.
.css, .scss, .sassfile it will automatically inject the changes in the browser so you don't even have to do a full page reload. If you're viewing your application on multiple browsers you will see the changes reflect immediately. This may especially come in handy when you're writing/debugging css for a part of your application that isn't visible or reachable at a first glance. For example if you're debugging a dialog that can only be shown with doing few clicks, or a section that's far down your page. A full page refresh will throw you off track every time you make a change, but when your css is auto-injected you will see the changes instantly no matter which part of your site your editing.
@import "sections/*";and have your whole folder imported.
display:flexit will add the
-webkit and -ms-prefixes automatically.
app.jsfile. If you're using angular your code will be automatically annotated so you don't have to write your dependencies as strings. ES6 syntax will be converted to ES5 with babel. If you're building the app in production mode the code will be uglified (minified).
bower install angular jquery --savethe angular and jquery main files would end up in your lib.js library. And if you
bower install normalize.css --savethe normalize.css will end up in your lib.css file.
http://localhost:9000This has few benefits. The first one is that you can open the url on multiple devices on your network and debug the changes on a pc, laptop, tablet and phone simultaneously. The second benefit is that you can use configure the router of your app to use HTML5 mode (urls without hashbangs #) without a problem.
modifyGitignore(boolean): Should GTB go through the project's
.gitignorefile and make sure that folders like
bower_componentsand the build folder of the project are ignored so they're not commited to git.
copyToFolder(string): The path to which you want your files to be copied in the
port(int): The port on which the server should serve the project (default is 9000)
openAfterLaunch(boolean): Should the http://localhost:port url be opened immediately after GTB starts a project
liveReload(boolean): Should the browser be automatically refreshed on every change
syncClicks(boolean): If the development url is opened on multiple devices should the clicks on links, buttons, etc. be synced between every device
syncForms(boolean): Should the content of the forms be synced on every device. This is useful for testing on multiple devices at once so the form filling is synced.
syncScroll(boolean): Should scrolling be synced between multiple devices
npm install bower -g
npm install gtb -g.
The default folder names are: css, js, fonts, templates, bower_components and img. Those folders should be inside a parent folder called
Let's say that you're building an awesome app called
Your project structure should look like this:
/cat-facts-generator--- /app--- /js--- /css--- /img--- /fonts--- /templates--- /bower_copmonents--- .gitignore--- bower.json
(please note that you can change the folder names in your gtb-project-config.json)
After installing gtb run
gtb in your terminal and choose "Create a new project". Enter the name of your app, the name doesn't have to be the same as the folder name so you can just write "cat" instead of "cat-facts-generator".
Method 2: If you don't want to add and persist the project and you just want to run it navigate to the project directory in the terminal and run
The default GTB command will process the files in development mode, run a server on
http://localhost:9000, and keep watching the files for changes.
After running GTB you will see that a
build folder was added but instead of the source files it has the processed and compiled files (app.js, app.css, lib.js, lib.css) etc. This is the folder that you want to deploy to production or upload to your FTP server.
If you want a production version of your app (minified, uglified, etc.) you should run the build command:
gtb -n cat-facts-generator -t build:only. See the list of commands you can run below.
gtb- List of gtb features
gtb list- List all of your projects and pick one to run
gtb .- Run current directory that's opened in the terminal
gtb -n example- Run the project with the name "example", if
exampledoesn't exist in your projects, gtb will ask you to add it
gtb -n example -t process:js- Execute the gulp task named
process:json the project