README.md 3.21 KB
Newer Older
Bady committed
1 2
## Official Website of Free Software User Groups in India

Shrimadhav U K committed
3 4 5 6 7 8 9
## Dependencies

1. Node

## Presteps

1. Install Node ( Welcome to the world of Node <3 )
Shrimadhav U K committed
10
2. run `npm install -g gulp-cli`
Shrimadhav U K committed
11 12 13 14 15 16 17

## Installation

1. `npm install` from root folder

## Running the application

Shrimadhav U K committed
18
* `gulp serve` - starts a local server and keeps watching the file changes
Shrimadhav U K committed
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

### Under the Hood!

Okay, Let's look at it one by one.

We installed [Node](https://nodejs.org/en/) so that we can use [Grunt](https://gruntjs.com)  ( The super awesome javascript task runnner).

But why do we even need a task runner? I'm sure you guys had fun at Selenium workshop, automating things. Grunt helps you automate a lot of things.

Now, take a look at package.json file. You'll see a lot of grunt-* dependencies each serving a special purpose in your project. eg. `grunt-contrib-concat` is for concatenating files.

Now, `Gruntfile.js`: This is where you configure/define your grunt tasks. Let's see what all things are defined there now.

Look at jshint
```
jshint: {
  main: {
      files : [{
          src : ['Gruntfile.js', 'js/**/*.js']
      }]
  },
  options: {
    globals: {
      'jQuery': true,
      'angular': true,
      'console': true,
      '$': true,
      '_': true,
      'moment': true
    }
  }
},
```
Here `main` corresponds to a subtask. That means you run this task as `grunt jshint:main`. `grunt jshint`, as you would expect, will run all the subtasks associated with jshint(In this case we've only one, ie `main`)

Now, what does this `jshint:main` task do?

It checks all the files (ie,`Gruntfile.js` and all the javascript files within js folder) for syntax errors.

Similarly we've htmlhint, [pug](https://pugjs.org/) and concat.

Now the cool part! `watch` is the task which lets you watch different files for changes and runs associated task whenever some change happens.
for example,
```
js: {
    files: 'js/**',
    options: {
        nospawn: true,
        livereload: true
    },
    tasks: ['jshint', 'concat']
},
```
This portion inside `watch` configures `jshint` and `uglify` to be run whenever files inside js folder (`js/**`) changes.

Is that a lot to take in?

Bady committed
76 77 78 79 80 81 82
Just one more! `connect` task starts a local server at [http://localhost:8080](http://localhost:8080). It also inject a script to your page that keeps a live connection to the server, so that browser will automatically refresh whenever you change and save code. Doesn't that sound awesome to you?

Let us know ;)


## License

Bady committed
83 84
Official Website of Free Software User Groups in India  
Copyleft (ɔ) 2017 FSCI (Free Software Community of India) - All rights reserved, all wrongs reversed   
Shrimadhav U K committed
85

Bady committed
86 87 88
This project comes under free software license: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
Bady committed
89
(at your option) any later version.  
Shrimadhav U K committed
90

Bady committed
91 92 93
This project is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
Bady committed
94
GNU General Public License for more details.  
Shrimadhav U K committed
95

Bady committed
96 97
You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.