SuperPlan(3)TaoBao Winner - UI - RequiredJS Grunt

SuperPlan(3)TaoBaoWinner-UI-RequiredJSGrunt

4.RequireJShttp://requirejs.org/

Followthedocumentherehttp://requirejs.org/docs/jquery.html

AddRequiredJS

Downloadthefilefromherehttp://requirejs.org/docs/download.html

Ijustgothroughthesimpleexampletogetanideaofhowitworks.

Hereisthesampleofrequires_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]]>

Itwillloadthemin.'sinthescriptsdirectory.main.js

require(["jquery","jquery.plugin1","jquery.plugin2"],function($){

//thejquery.alpha.jsandjquery.beta.jspluginshavebeenloaded.

$(function(){

$('body').sayhello1().sayhello2();});

});

jquery.plugin1.js

$.fn.sayhello1=function(){

returnthis.append('<p>Sillycat,goandgo!</p>');

};

jquery.plugin2.js

$.fn.sayhello2=function(){

returnthis.append('<p>Kiko,goandgo!</p>');

};

themain.jswillloadtheother2plugins.

5.Grunthttp://gruntjs.com/

Gruntandgruntpluginsareinstalledandmanagedbynom,node.jspackagemanager.

IlovenodeJS,IusedtoreadsomedocumentsandexamplesaboutnodeJS.

InstallGRUNTCommandLineInterface(CLI)

MakesureIdidnotinstalledanyoldversion.

>npmuninstall-ggrunt

>sudonpminstall-ggrunt-cli

AfterIinstalledthat,itliveshere

/usr/local/bin/grunt->/usr/local/lib/node_modules/grunt-cli/bin/grunt

>grunt-help

grunt-cli:Thegruntcommandlineinterface.(v0.1.7)

Iwilltrythefirstexamplefromherehttps://github.com/blenderbox/grunt-exampleandtrytounderstandthat.

>gitcheckouthttps://github.com/blenderbox/grunt-example.git

>cdgrunt-example

>npminstall

npmcommandwillinstallallthepackageweneedsindirectorynode_modules

>grunt--help

Wecanseealotofusefulcommands.ButwhenItried

>gruntserver

ErrorMessages:

Running"server"task

Running"clean:server"(clean)task

Running"compass:server"(compass)task

Warning:YouneedtohaveRubyandCompassinstalledandinyoursystemPATHforthistasktowork.Moreinfo:https://github.com/gruntjs/grunt-contrib-compassUse--forcetocontinue.

Abortedduetowarnings.

Solution:

FollowthedocumentinthatURLhttps://github.com/gruntjs/grunt-contrib-compass

FirstverifyifIhaveruby

>ruby-v

ruby1.8.7

>sudogemupdate--system

>sudogeminstallcompass

Itworks.Gobacktothecommandlineandenter

>gruntserver

Icanvisitthepagehttp://localhost:9000

Executethecommandjustlikeant

>grunt

Intheappdirectory,wehaveimages,scriptsandstyles.

WeusesassyCSSinapplication.scss.Andindex.htmlimportalltheCSSandScriptsseparately.

Themostimportfilesarepackage.jsonandGruntfile.js.

Inthepackage.json,wehaveallthedependenciesfiles.

{

"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"

}

}

ThefileGrntfile.jsissomethinglikebuild.xml,itispowerfulandmagic.Itcanrunaserverbasedonnodejs.CompasstheCSSandjavascript.Italmostcandoeverythingbasedonwebdesign.

IcanunderstandthisconfigurationfileGruntfile.js,butthatisnotindetail.MaybeIcanknowmoreafterbackbone.

6.SSI

comesoon…

7.Backbone

comesoon…

References:

NodeJS1~3

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

sassyCSS

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