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
## Dependencies

1. Node

## Presteps

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

## Installation

1. `npm install` from root folder

## Running the application

Shrimadhav U K's avatar
Shrimadhav U K committed
18
* `gulp serve` - starts a local server and keeps watching the file changes
Shrimadhav U K's avatar
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'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/>.