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

Shrimadhav U K's avatar
Shrimadhav U K committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
## Dependencies

1. Node

## Presteps

1. Install Node ( Welcome to the world of Node <3 )
2. run `npm install -g grunt-cli`

## Installation

1. `npm install` from root folder

## Running the application

* `grunt serve` - starts a local server and keeps watching the file changes

### 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's avatar
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's avatar
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's avatar
Shrimadhav U K committed
85

Bady's avatar
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's avatar
Bady committed
89
(at your option) any later version.  
Shrimadhav U K's avatar
Shrimadhav U K committed
90

Bady's avatar
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's avatar
Bady committed
94
GNU General Public License for more details.  
Shrimadhav U K's avatar
Shrimadhav U K committed
95

Bady's avatar
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/>.