# examples of Msclass,show by scrolling. [msclass official site](http://www.popub.net/)

**It is has two versions for this example. One is normal html files,another is base on grunt.**

---

## The version of basing on [grunt](http://gruntjs.com/).

### Getting Started 

If you don't have installed Grunt , you should need to install it first:

```html
npm install -g grunt-cli
```

* **First**

```html
npm install 
```

* **Second**

```html
grunt
```

## About gruntjs

* **Installing the CLI**

```html
npm install -g grunt-cli
```

 * **package.json**: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.
 how to get it? you can copy other's json,generally, it is like this
</br>

```html
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-nodeunit": "~0.1.2"
  }
}
```
you also can use the command to get it,such as: 

```html
npm init
```
 * **Gruntfile**: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. 
 Generally,it is like this:

```html

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('project.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

```
* **Installing Grunt and gruntplugins**
* The easiest way to add Grunt and gruntplugins to an existing package.json is with the command npm **install <module> --save-dev**. Not only will this install <module> locally, but it will **automatically be added to the [devDependencies](https://npmjs.org/doc/json.html#devDependencies) section**, using a [tilde version range](https://npmjs.org/doc/json.html#Tilde-Version-Ranges).
</br>For example, this will install the latest version of Grunt in your project folder, adding it to your [devDependencies](https://npmjs.org/doc/json.html#devDependencies):

```html
npm install grunt --save-dev
```
* you also can list grunt and the Grunt plugins your project needs as [devDependencies](https://npmjs.org/doc/json.html#devDependencies) in this file,and use command like this:

```html
npm install
```

But I suggest to use the first way to install plugin,because  it will automatically be added to the [devDependencies](https://npmjs.org/doc/json.html#devDependencies) section.

* project.json
It is different between the package.json. project.json is a config file only for the project to provide usefull information for the Gruntfile.js.It can invoke the information of the project.json file.

## More information [http://gruntjs.com/getting-started](http://gruntjs.com/getting-started)