SuperPlan(3)TaoBao Winner - UI - RequiredJS Grunt

SuperPlan(3)TaoBao Winner - UI - RequiredJS Grunt

4. RequireJS http://requirejs.org/
Follow the document here http://requirejs.org/docs/jquery.html
Add RequiredJS
Download the file from here http://requirejs.org/docs/download.html

I just go through the simple example to get an idea of how it works.

Here is the sample of requires_demo.html
<html]]>
<head]]>
<title]]>jQuery+RequireJS</title]]>
<scriptdata-main="scripts/main"src="./scripts/require-jquery.js"></script]]>
</head]]>
<body]]>
<h1]]>jQuery+RequireJS</h1]]>
</body]]>

</html]]>

It will load the min.'s in the scripts directory. main.js
require([ "jquery", "jquery.plugin1", "jquery.plugin2" ], function($) {
// the jquery.alpha.js and jquery.beta.js plugins have been loaded.
$(function() {
$('body').sayhello1().sayhello2(); });

});

jquery.plugin1.js
$.fn.sayhello1 = function() {
    return this.append('<p>Sillycat, go and go!</p>');
};


jquery.plugin2.js
$.fn.sayhello2 = function() {
    return this.append('<p>Kiko, go and go!</p>');
};


the main.js will load the other 2 plugins.

5. Grunt http://gruntjs.com/
Grunt and gruntplugins are installed and managed by nom, node.js package manager.
I love nodeJS, I used to read some documents and examples about nodeJS.

Install GRUNT Command Line Interface(CLI)
Make sure I did not installed any old version.
>npm uninstall -g grunt
>sudo npm install -g grunt-cli

After I installed that, it lives here
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt

>grunt -help
grunt-cli: The grunt command line interface. (v0.1.7)

I will try the first example from here https://github.com/blenderbox/grunt-example and try to understand that.
>git checkout https://github.com/blenderbox/grunt-example.git
>cd grunt-example
>npm install
npm command will install all the package we needs in directory node_modules

>grunt --help
We can see a lot of useful commands. But when I tried
>grunt server

Error Messages:
Running "server" task

Running "clean:server" (clean) task

Running "compass:server" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.

Aborted due to warnings.

Solution:
Follow the document in that URL https://github.com/gruntjs/grunt-contrib-compass

First verify if I have ruby
>ruby -v
ruby 1.8.7

>sudo gem update --system
>sudo gem install compass

It works. Go back to the command line and enter
>grunt server
I can visit the page http://localhost:9000

Execute the command just like ant
>grunt

In the app directory, we have images, scripts and styles.

We use sassy CSS in application.scss. And index.html import all the CSS and Scripts separately.

The most import files are package.json and Gruntfile.js.

In the package.json, we have all the dependencies files.
{
  "name": "grunt-example",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-copy": "~0.4.0",
    "grunt-contrib-concat": "~0.1.2",
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-uglify": "~0.1.1",
    "grunt-contrib-compass": "~0.2.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-cssmin": "~0.4.1",
    "grunt-contrib-connect": "0.1.2",
    "grunt-contrib-clean": "0.4.0",
    "grunt-contrib-htmlmin": "0.1.1",
    "grunt-contrib-imagemin": "0.1.2",
    "grunt-contrib-livereload": "0.1.1",
    "grunt-usemin": "~0.1.9",
    "grunt-regarde": "~0.1.1",
    "grunt-open": "~0.2.0",
    "matchdep": "~0.1.1"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}


The file Grntfile.js is something like build.xml, it is powerful and magic. It can run a server based on node js. Compass the CSS and javascript. It almost can do everything based on web design.

I can understand this configuration file Gruntfile.js, but that is not in detail. Maybe I can know more after backbone.

6. SSI
http://sillycat.iteye.com/blog/1075378
come soon…


7. Backbone
come soon…

References:
NodeJS 1~3
http://sillycat.iteye.com/blog/1453848
http://sillycat.iteye.com/blog/1460938
http://sillycat.iteye.com/blog/1462736

RequireJS
http://requirejs.org/
http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/
http://www.cnblogs.com/zhujl/archive/2011/12/30/2302110.html
http://www.jaceju.net/blog/archives/beginning-requirejs/

Grunt
https://github.com/blenderbox/grunt-example

sassy CSS
http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/