https://github.com/sercaneraslan/grabs
Front-End Development Environment
https://github.com/sercaneraslan/grabs
development environment front-end javascript
Last synced: 11 months ago
JSON representation
Front-End Development Environment
- Host: GitHub
- URL: https://github.com/sercaneraslan/grabs
- Owner: sercaneraslan
- License: mit
- Created: 2014-08-25T14:26:28.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2023-05-08T14:16:01.000Z (about 3 years ago)
- Last Synced: 2024-04-14T21:45:59.071Z (about 2 years ago)
- Topics: development, environment, front-end, javascript
- Language: JavaScript
- Homepage:
- Size: 1.58 MB
- Stars: 91
- Watchers: 8
- Forks: 10
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Grabs: Front-End Development Environment
Your development environment is ready in seconds.
- You can add any task to your project with `Grunt` plugins.
- You can immediately start developing your project with `Angular` support.
- You can download 3rd party libraries with `Bower`.
- You can compile and compress `Stylus` files to CSS files.
## Getting Started
Grabs eases your development process by including the most popular tools and libraries that are mostly needed for a development environment and allow you to easily extend with new capabilities.
In order to use Grabs, [Node.js](http://nodejs.org), [Npm](https://www.npmjs.org/), [Bower](https://bower.io/) and [Grunt](http://gruntjs.com). By applying the steps down below your development environment will be ready to use.
### Install
Steps:
1. `git clone https://github.com/sercaneraslan/grabs.git`
1. `cd grabs`
1. `./grabs install`
Yes, that is all.
## Features
#### Grunt
You can add Grunt plugins to add more tasks to your project. You can also change the existing configurations from the **gruntfile.js** file.
#### AngularJS
Grabs comes with AngularJS. HTML5 Push State support is active and configurations are done so that all the requests are sent to the **index.html** file. You can change this behavior in **app/js/config/ng-config.js** file.
#### Bower
With Bower you can manage your external dependencies automatically. All you need to do to get them is to edit **bower.json** file and issue **./grabs bowercopy** command. You can also change the configuration from **gruntfile.js** file's **bowercopy** section.
#### Stylus
Your Stylus files are automatically compiled to CSS and minified. You can configure this behavior in **gruntfile.js** under **stylus** section.
#### Sprite
This plugin combines images under **app/img/sprite** disrectory into **sprite.png** file and without any other interference on your part your CSS styles are produced to use this sprite file instead of the individual image file you wrote in your Stylus file.
Images under **app/img/sprite-retina** directory are combined as **sprite-retina.png** to help you support devices with higher pixel density. Other directories are copied into **build** directory without any processing.
You can change these settings from **gruntfile.js** under **sprite** section. Example: app/css/global.styl.
#### Development Mode
In development mode CSS, HTML and JavaScript files are not minimized or combined. Also images are not compressed. When you use **./grabs** command without any arguments, it starts in development mode.
#### Live Mode
In Live mode HTML, CSS and JavaScript files are minimized. CSS and JavaScript files are combined into a single CSS and JavaScript file. Images are compressed. File caching is disabled. You can use Live mode by issuing **./grabs live** command.
#### HTML Compress
Your HTML files are compressed while being delivered. You can change these settings from **gruntfile.js** under **htmlmin** section.
#### Image Compress
Your images are compressed automatically. You can change these settings from **gruntfile.js** under **imagemin** section.
#### JavaScript Minimization
Your JavaScript files are minimized with SourceMap support. You can change these settings from **gruntfile.js** under **uglify** section.
#### Notification
Grunt will notify you when errors occur via your operating system's notification system. You can define notifications for tasks that you want. You can change these settings from **gruntfile.js** under **notify_hooks** section.
#### Cache
Adding a timestamp to the resulting CSS, HTML, JavaScript and Image sprite files' names allows bypassing your browser's cache. For example: **app.min.1408295277445.css**
#### Server
Provides a basic server. You can change these settings from **gruntfile.js** under **connect** section.
#### Livereoad
Whenever an HTML, CSS or JavaScript file changes your browser window will be automatically refreshed. You can change these settings from **gruntfile.js** under **connect** section.
#### Multilanguage Support
Add multiple languages to your project. Checkout **homepage**.
#### Eslint
ESLint, checks your JavaScript files against a standart list of rules for high quality code. You can change these settings from **.eslintrc** under **rules** section.
## License
MIT License