<div id="test" nick="casper" class="dddd"></div>

$('#test').attr('nick');  // "casper"
$('#test').prop('nick');  // undefined

$('#test')[0].nick = 'chyingp';
$('#test').attr('age');  // "casper"
$('#test').prop('nick');  // "chyingp"

document.getElementsByTagName('div')[0].id;  // "casper"
document.getElementsByTagName('div')[0].getAttribute('id');  // "casper"

document.getElementsByTagName('div')[0].className;  // "dddd"
document.getElementsByTagName('div')[0]['class'];  // undefined

$('test').attr('class', 'dddd');  //有效
$('test').attr('className', 'dddd');  //无效

$('#box')[0].setAttribute('checked', false);
$('#box')[0].getAttribute('checked', false);  // 'false'

$('#box')[0].checked;  // true

<input type="checkbox" id="box" checked="checked" />


<script>
document.getElementById('box').setAttribute('checked', false);
document.getElementById('box').getAttribute('checked');  // "false"
document.getElementById('box').checked;  // true

document.getElementById('box').checked = false;  // 复选框选中态消失

</script>

    attr: function( elem, name, value ) {
        // 这里一坨代码可以先直接忽视，不影响下面主要逻辑，...代表被忽略的代码
        // ...

        // All attributes are lowercase
        // Grab necessary hook if one is defined
        if ( notxml ) {
            name = name.toLowerCase();
            // 这里几种情况：
            // 1、一些特殊的特性，如href、width等=>attrHooks
            // 2、一些值为Boolean的属性，如checked等=>boolHook
            // 3、其他：nodeHook，主要是针对IE6/7的bug
            hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
        }

        if ( value !== undefined ) {    //设置节点特性，包括：
                                        //$(node).attr('nick','casper') 
                                        //或 $(node).attr({'nick':'casper', 'age':100})
                                        //或 $(node).attr('nick', null)

            if ( value === null ) {    // 删除
                jQuery.removeAttr( elem, name );

            } else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
                return ret;    // 一些特殊的特性，比如href、src等，有专门的set方法

            } else {    // 普通的setAttribute
                elem.setAttribute( name, value + "" );
                return value;
            }

        } else if ( hooks && notxml && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
            // 获取特性值，且该特性有对应的hook~
            return ret;

        } else {    // 普通的获取特性值

            // In IE9+, Flash objects don't have .getAttribute (#12945)
            // Support: IE9+
            if ( typeof elem.getAttribute !== core_strundefined ) {
                ret =  elem.getAttribute( name );
            }

            // Non-existent attributes return null, we normalize to undefined
            return ret == null ?
                undefined :
                ret;
        }
    }

var gulp = require('gulp'),
    preprocess = require('gulp-preprocess');

gulp.task('default', function() {
    gulp.src('src/index.html')
        .pipe(preprocess({USERNAME:'程序猿小卡'}))
        .pipe(gulp.dest('dest/'));
});

module.exports = function (options) {
    return through.obj(function (file, enc, cb) {
        // 主体实现忽略若干行
    });
};

'use strict';
var gutil = require('gulp-util');
var through = require('through2');
var pp = require('preprocess');

module.exports = function (options) {
    return through.obj(function (file, enc, cb) {
        if (file.isNull()) {
            this.push(file);
            return cb();
        }

        if (file.isStream()) {
            this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
            return cb();
        }

        var content = pp.preprocess(file.contents.toString(), options || {});
        file.contents = new Buffer(content);

        this.push(file);

        cb();
    });
};

module.exports = function (options) {
    return through.obj(function (file, enc, cb) {

        // 如果文件为空，不做任何操作，转入下一个操作，即下一个 .pipe()
        if (file.isNull()) {
            this.push(file);
            return cb();
        }

        // 插件不支持对 Stream 对直接操作，跑出异常
        if (file.isStream()) {
            this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
            return cb();
        }

        // 将文件内容转成字符串，并调用 preprocess 组件进行预处理
        // 然后将处理后的字符串，再转成Buffer形式
        var content = pp.preprocess(file.contents.toString(), options || {});
        file.contents = new Buffer(content);

        // 下面这两句基本是标配啦，可以参考下 through2 的API
        this.push(file);

        cb();
    });
};

npm install

grunt dist

grunt jshint

grunt.initConfig({
    clean: {
        dev: [ 'dev/' ],
    },
    jshint: {
        all: ['dist/js/**/*.js']
    }
});

grunt.config.set('jshint', {
    all: ['dist/js/**/*.js']
});
grunt.task.run('jshint');

grunt.task.registerTask('hello', '一个无聊的demo', function() {
    console.log( '大家好，我是grunt任务！');    
});

grunt hello

grunt.registerMultiTask('inline', "同样是很无聊的demo", function() {

    var files = this.filesSrc;  // 用户

    files.forEach(function(filepath){
        console.log( '输出文件路径：'+ filepath  );
    };
});

grunt.initConfig({
    'inline': {
        test: {
            src: [$config.distPath+'**/*.html']
        }
    }
});

grunt inline

grunt.task.registerTask('hello', '一个无聊的demo', function() {
    console.log( '大家好，我是grunt任务！');    
});

grunt.loadNpmTasks('grunt-cdn');

grunt.task.loadTasks('proj-task/core');

<script type="text/javascript" src="modules/common/js/nohost.js?__inline"></script>

<script>
void function(){setTimeout(function(){var b=document.cookie.match(/(^| )nohost_guid=([^;]*)(;|$)/);if(!b?0:decodeURIComponent(b[2])){var b="/nohost_htdocs/js/SwitchHost.js?random="+Math.random(),c=function(a){try{eval(a)}catch(b){}window.SwitchHost&&window.SwitchHost.init&&window.SwitchHost.init()},a=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;a.open("GET",b);a.onreadystatechange=function(){4==a.readyState&&((200<=a.status&&300>a.status||304===a.status||1223===a.status||
0===a.status)&&c(a.responseText),a=null)};a.send(null)}},1500)}();
</script>

.
├── app.js
├── node_modules
├── package.json
└── views

var express = require('express'),
    hbs = require('hbs'),
    app = express();

app.set('view engine', 'hbs');  // 用hbs作为模版引擎
app.set('views', __dirname + '/views'); // 模版所在路径

app.get('/', function(req, res){
    res.render('index', {title: 'hbs demo', author: 'chyingp'});
});

app.listen(3000);   

.
├── app.js
├── node_modules
│   ├── express
│   └── hbs
├── package.json
├── public
│   └── style.css
└── views
    ├── index.hbs
    ├── layout.hbs
    └── profile.hbs

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>

{{{body}}}

</body>
</html>

<h1>Demo by {{author}}</h1>

<p>{{author}}: welcome to homepage, I'm handsome!</p>

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name) {
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];
    return val;
});

{{{block "stylesheets"}}}

 {{{block "scripts"}}}

{{#extend "stylesheets"}}
<link rel="stylesheet" href="/css/index.css"/>
{{/extend}}

let the magic begin

{{#extend "scripts"}}
<script>
  document.write('foo bar!');
</script>
{{/extend}}

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

// 改动主要在这个方法
hbs.registerHelper('block', function(name, context) {
    var len = (blocks[name] || []).length;
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];

    return len ? val : context.fn(this);
});

jQuery.extend = jQuery.fn.extend = function() {

// 扩展jQuery对象本身，此处添加了jQuery.noConflict方法
jQuery.extend({
    noConflict: function（deep）{
        //实现细节略
    },
    //..
})

// 扩展jQuery.fn，此处添加 jQuery.fn.data方法
jQuery.fn.extend({
    data: function( key, value ) {
        //实现细节略
    },
    //...
})

jQuery.extend({nick: 'casper'});

console.log(jQuery.nick);   //输出：'casper'

var obj1 = {nick: 'casper'}，
    obj2 = {nick: 'chyingp', age: 25};
var obj3 = jQuery.extend(obj1, obj2);

console.log( JSON.stringify(obj1) );    // 输出 {"nick":"chyingp","age":25}
console.log( JSON.stringify(obj3) );    // 输出 {"nick":"chyingp","age":25}

var obj1 = { nick: 'casper',  scores: { math: 100, English: 100 } },
    obj2 = { scores: { hitory: 100 } },
    obj3 = jQuery.extend(obj1, obj2);

console.log( JSON.stringify(obj1) );    // 输出 {"nick":"casper","scores":{"hitory":100}}

var obj1 = { nick: 'casper',  scores: { math: 100, English: 100 } },
    obj2 = { scores: { hitory: 100 } },
    obj3 = jQuery.extend( true, obj1, obj2 );

console.log( JSON.stringify(obj1) );    // 输出 {"nick":"casper","scores":{"math":100,"English":100,"hitory":100}}

jQuery.fn.extend({
    say: function(){
        console.log("hello, I'm "+this.attr('id'));
    }
});

$('#casper').say(); // 输出 hello, I'm casper

jQuery.extend = jQuery.fn.extend = function() {
    var src, copyIsArray, copy, name, options, clone,
        target = arguments[0] || {},    // 常见用法 jQuery.extend( obj1, obj2 )，此时，target为arguments[0]
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {    // 如果第一个参数为true，即 jQuery.extend( true, obj1, obj2 ); 的情况
        deep = target;  // 此时target是true
        target = arguments[1] || {};    // target改为 obj1
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  // 处理奇怪的情况，比如 jQuery.extend( 'hello' , {nick: 'casper})~~
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {   // 处理这种情况 jQuery.extend(obj)，或 jQuery.fn.extend( obj )
        target = this;  // jQuery.extend时，this指的是jQuery；jQuery.fn.extend时，this指的是jQuery.fn
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) { // 比如 jQuery.extend( obj1, obj2, obj3, ojb4 )，options则为 obj2、obj3...
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {    // 防止自引用，不赘述
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                // 如果是深拷贝，且被拷贝的属性值本身是个对象
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {    // 被拷贝的属性值是个数组
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {    被拷贝的属性值是个plainObject，比如{ nick: 'casper' }
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );  // 递归~

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {  // 浅拷贝，且属性值不为undefined
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

fis server open

#!/usr/bin/env node

require('../fis.js').cli.run(process.argv);

// 加载FIS内核
var fis = module.exports = require('fis-kernel');

//项目默认配置
fis.config.merge({
   // ...
});

//exports cli object
// fis命令行相关的对象
fis.cli = {};

// 工具的名字。在基于fis的二次解决方案中，一般会将名字覆盖
fis.cli.name = 'fis';

//colors
// 日志友好的需求
fis.cli.colors = require('colors');

//commander object
// 其实最后就挂载了 commander 这个插件
fis.cli.commander = null;

//package.json
// 把package.json的信息读进来，后面会用到
fis.cli.info = fis.util.readJSON(__dirname + '/package.json');

//output help info
// 打印帮助信息的API
fis.cli.help = function(){
    // ...
};

// 需要打印帮助信息的命令，在 fis.cli.help() 中遍历到。 如果有自定义命令，并且同样需要打印帮助信息，可以覆盖这个变量
fis.cli.help.commands = [ 'release', 'install', 'server' ];

//output version info
// 打印版本信息
fis.cli.version = function(){
    // ...
};

// 判断是否传入了某个参数（search）
function hasArgv(argv, search){
    // ...
}

//run cli tools
// 核心方法，构建的入口所在。接下来我们就重点分析下这个方法。假设我们跑的命令是 fis server open
// 实际 process.argv为 [ 'node', '/usr/local/bin/fis', 'server', 'open' ]
// 那么，argv[2] ==> 'server'
fis.cli.run = function(argv){
    // ...
};

//run cli tools
fis.cli.run = function(argv){

    fis.processCWD = process.cwd(); // 当前构建的路径

    if(hasArgv(argv, '--no-color')){    // 打印的命令行是否单色
        fis.cli.colors.mode = 'none';
    }

    var first = argv[2];
    if(argv.length < 3 || first === '-h' ||  first === '--help'){
        fis.cli.help(); // 打印帮助信息
    } else if(first === '-v' || first === '--version'){
        fis.cli.version();  // 打印版本信息
    } else if(first[0] === '-'){
        fis.cli.help(); // 打印版本信息
    } else {
        //register command
        // 加载命令对应的插件，这里特指 fis-command-server
        var commander = fis.cli.commander = require('commander');
        var cmd = fis.require('command', argv[2]);
        cmd.register(
            commander
                .command(cmd.name || first)
                .usage(cmd.usage)
                .description(cmd.desc)
        );
        commander.parse(argv);  // 执行命令
    }
};

var server = require('./lib/server.js');  // 依赖的基础库

// 命令的配置属性，打印帮助信息的时候会用到
exports.name = 'server';
exports.usage = '<command> [options]';
exports.desc = 'launch a php-cgi server';

// 对外暴露的 register 方法，参数的参数为 fis.cli.command 
exports.register = function(commander) {

    // 略过若干个函数

    // 命令的可选参数，格式参考 commander 插件的文档说明
    commander
        .option('-p, --port <int>', 'server listen port', parseInt, process.env.FIS_SERVER_PORT || 8080)      
        .action(function(){
            // 当 command.parse(..)被调用时，就会进入这个回调方法。在这里根据fis server 的子命令执行具体的操作
            // ...
        });

    // 注册子命令 fis server open
    // 同理，可以注册 fis server start 等子命令
    commander
        .command('open')
        .description('open document root directory');
};

$('div').each(function(index, elem){
    $(this).addClass('red');
});

/**
 * @description 对jQuery对象中，匹配的的每个dom元素执行一个方法
 * @param {Number} index 当前处理元素在集合中的位置
 * @param {DOMElement} Element 当前处理的dom元素
*/
.each( function(index, Element) )

$('div').each(function(index, elem){
    $(this).addClass('red');
});

$('div').each(function(index, elem){
    if(index>=5) return false;  // 跳出循环
    $(this).addClass('red');
});

略。。。

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value + ':' + this);
});

0: 52-52
1: 97-97

/**
 * @description 对集合（数组或对象）中的每个元素，执行某个操作
 * @param {Number|String} indexInArray 元素在集合中对应的位置（如集合为数组，则为数字；如集合为对象，则为键值）
 * @param {AnyValue} valueOfElement 集合中的元素
*/
jQuery.each( collection, callback(indexInArray, valueOfElement) )

$.each( ['one,'two','three', 'four'], function(index, value){
    if(index >= 2) return false;
    alert( "Index:" + index + ", value: " + value );
});

$.each( { name: "John", lang: "JS" }, function(k, v){
    alert( "Key: " + k + ", Value: " + v );
});

// args is for internal usage only
each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );   // obj是不是类似数组的对象，比如 {'0':'hello', '1':'world', 'length':2}，其实就是为jQuery对象服务啦

    if ( args ) {   // args，其实没发现这个参数有什么实际作用~~直接跳过看else里面的内容即可，除了callback传的参数不同外无其他区别
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.apply( obj[ i ], args );

                if ( value === false ) {
                    break;
                }
            }
        }

    // A special, fast, case for the most common use of each
    } else {
        if ( isArray ) {    // 处理数组
            for ( ; i < length; i++ ) {
                value = callback.call( obj[ i ], i, obj[ i ] );

                if ( value === false ) {
                    break;
                }
            }
        } else {    // 处理对象
            for ( i in obj ) {
                value = callback.call( obj[ i ], i, obj[ i ] ); // value 为callback的返回值

                if ( value === false ) {    // 注意这里，当value===false的时候，直接跳出循环了
                    break;
                }
            }
        }
    }

    return obj;
},

each: function( callback, args ) {
    return jQuery.each( this, callback, args );
},

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

(function( window, undefined ) {
    var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    };
    window.jQuery = window.$ = jQuery;
})( window );

(function( window, undefined ) {
var
    jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    }；

    //各种原型属性
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {
            //...
        },
        ...
    };
    jQuery.fn.init.prototype = jQuery.fn;

    //extend方法，用来扩展jQuery，或jQuery.fn
    jQuery.extend = jQuery.fn.extend = function() {
        //...
    };

    jQuery.fn.extend({
        addClass: function( value ) {
            //...
            return this;    //返回this，链式调用的秘密
        }
    });

    window.jQuery = window.$ = jQuery;

})( window );

    jQuery.fn.extend({
        addClass: function( value ) {

meteor create meteor-todo-list

.
├── .meteor  // 项目依赖的package，在这个小demo里我们可以先忽略
├── meteor-todo-list.css  // 页面相关的css
├── meteor-todo-list.html  //  页面入口文件
└── meteor-todo-list.js  // 页面主逻辑

<head>
    <title>程序猿小卡的meteor demo</title>    
</head

<body>
    {{>create}}

    <div class="todo-items">
        {{#each tasks}}
            {{>task}}
        {{/each}}
    </div>
</body>

<template name="create">
    <div class="">
        <input type="text" placehodler="输入todo项" class="js-text" />
        <button class="js-add">创建</button>
    </div>
</template>

if( Meteor.isClient ){
    //...
}

  Template.body.helpers({
    tasks: function(){
      return Tasks.find({});
    }
  });

<template name="nonsense">
    <p>hello {{nick}}</p>
</template>

var Tasks = new Mongo.Collection("tasks");

return Tasks.find({});

Tasks.insert({text: value, createdAt: new Date()});

  Template.create.events({
    'click .js-add': function(event, template){
      var $input = template.$('.js-text'),
          value = $input.val();

      Tasks.insert({text: value, createdAt: new Date()});

      $input.val('');
    }
  });

npm uninstall -g grunt

npm install -g grunt-cli

npm install -g grunt-init

grunt-init --help

git clone [email protected]:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

grunt-init jquery

Please answer the following:
[?] Project name (test) DemoJQuery            
[?] Project title (DemojQuery)   
[?] Description (The best jQuery plugin ever.) just for test
[?] Version (0.1.0) 1.0.0
[?] Project git repository (git://github.com/root/test.git) 
[?] Project homepage (https://github.com/root/test) 
[?] Project issues tracker (https://github.com/root/test/issues) 
[?] Licenses (MIT) 
[?] Author name (none) 程序 猿 小卡
[?] Author email (none) 
[?] Author url (none) http://chyingp.cnblogs.com
[?] Required jQuery version (*) 1.9.0
[?] Do you need to make any changes to the above before continuing? (y/N) N

//项目目录结构
-rw-r--r--   1 root        staff  1670  5  9 15:13 CONTRIBUTING.md
-rw-r--r--   1 root        staff   559  5  9 15:13 DemoJQuery.jquery.json
-rw-r--r--   1 root        staff  2184  5  9 15:13 Gruntfile.js
-rw-r--r--   1 root        staff  1053  5  9 15:13 LICENSE-MIT
-rw-r--r--   1 root        staff   543  5  9 15:13 README.md
drwxr-xr-x   5 root        staff   170  5  9 15:13 libs
-rw-r--r--   1 root        staff   423  5  9 15:13 package.json
drwxr-xr-x   4 root        staff   136  5  9 15:13 src
drwxr-xr-x   5 root        staff   170  5  9 15:13 test

npm install

grunt

Running "jshint:gruntfile" (jshint) task
>> 1 file lint free.

Running "jshint:src" (jshint) task
>> 1 file lint free.

...

npm init

{  "name": "HelloProj",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-nodeunit": "~0.1.2"
  }
}

npm install

npm install grunt --save-dev

module.exports = function(grunt) {

    // 项目配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {   //压缩文件
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        concat: {   //合并文件
            js:{
                src: ['js/moduleA.js', 'js/moduleB.js'],
                dest: 'dist/js/moduleA-moduleB.js'
            },
            css:{
                src:['dist/css/moduleA.css', 'dist/css/moduleB.css'],
                dest: 'dist/css/moduleB.css'
            }
        }
    });

    // 加载uglify插件，完成压缩任务
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 加载concat插件，完成文件合并任务
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 默认任务，如果运行grunt命令，且后面没有指定任务，或为defalut时，运行这个
    grunt.registerTask('default', ['concat', 'uglify']);

};

-rwxr-xr-x@  1 casperchen  staff   877  2 18 09:00 README.md
-rwxr-xr-x@  1 casperchen  staff   138  2 18 09:00 rename.json
drwxr-xr-x@ 10 casperchen  staff   340  2 18 09:00 root
-rwxr-xr-x@  1 casperchen  staff  3521  2 18 09:00 template.js

  /* 
   * 模板名字
   * https://gruntjs.com/ 
   *
   * 版权信息
   * Licensed under the MIT license.
   */

  'use strict';

  // 模板简单介绍信息
  exports.description = '创建IMWEB专属模板，带文件合并压缩哦！';

  // 开始回答项目相关问题前，控制台打印的相关信息
  exports.notes = '这段信息出现位置：回答各种项目相关的信息之前 ' +
    '\n\n'+
    '逐个填写就行，如果不想填的会可以直接enter跳过';

  // 结束回答项目相关问题后，控制台打印出来的信息
  exports.after = '项目主框架已经搭建好了，现在可以运行 ' +
    '\n\n' +
    '1、npm install 安装项目依赖的node模块\n'+
    '2、grunt 运行任务，包括文件压缩、合并、校验等\n\n';

  // 如果运行grunt-init运行的那个目录下，有目录或文件符合warOn指定的模式
  // 则会跑出警告，防止用户不小心把当前目录下的文件覆盖了，一般都为*，如果要强制运行，可加上--force
  // 例：grunt-init --force imweb_template
  exports.warnOn = '*';

  // The actual init template.
  exports.template = function(grunt, init, done) {

    init.process({type: 'IMWEB'}, [
      // 项目创建的时候，需要回答的问题
      init.prompt('name'),
      init.prompt('title'),
      init.prompt('description', 'IMWEB项目骨架'),
      init.prompt('version', '1.0.0'),
      init.prompt('author_name'),
      init.prompt('author_email'),
    ], function(err, props) {

      props.keywords = [];

      // 需要拷贝处理的文件，这句一般不用改它
      var files = init.filesToCopy(props);

      // 实际修改跟处理的文件，noProcess表示不进行处理
      init.copyAndProcess(files, props, {noProcess: 'libs/**'});

      // 生成package.json，供Grunt、npm使用
      init.writePackageJSON('package.json', {
        name: 'IMWEB-PROJ',
        version: '0.0.0-ignored',
        npm_test: 'grunt qunit',

        node_version: '>= 0.8.0',
        devDependencies: {
          'grunt-contrib-jshint': '~0.1.1',
          'grunt-contrib-qunit': '~0.1.1',
          'grunt-contrib-concat': '~0.1.2',
          'grunt-contrib-uglify': '~0.1.1',
          'grunt-contrib-cssmin': '~0.6.0',
          'grunt-contrib-watch': '~0.2.0',
          'grunt-contrib-clean': '~0.4.0',
        },
      });

      // All done!
      done();
    });
  };

  {
    "src/*.js": "js/*.js",
    "test/test.html": "test/test.html"
  }

-rwxr-xr-x@  1 casperchen  staff  2408  5 10 09:34 Gruntfile.js
-rwxr-xr-x@  1 casperchen  staff   605  2 18 09:00 README.md
drwxr-xr-x   4 casperchen  staff   136  5  9 20:31 css
drwxr-xr-x@  8 casperchen  staff   272  5  9 20:44 js
drwxr-xr-x@  5 casperchen  staff   170  2 18 09:00 libs
drwxr-xr-x@  5 casperchen  staff   170  2 18 09:00 test

'use strict';

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    // Metadata.
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
      ' */\n',
    // 任务配置信息

    clean: {  // Grunt任务开始前的清理工作
      files: ['dist']
    },
    concat: { //文件压缩
      js_and_css: {
        files: {
          // js文件合并
          'dist/js/base.js': ['js/simple.js', 'js/badjs.js', 'js/nohost.js'],
          'dist/js/main.js': ['js/moduleA.js', 'js/moduleB.js' 'js/main.js'],

          // css文件合并
          'dist/css/style.css': ['css/reset.css', 'css/moduleA.css', 'css/moduleB.css']
        }
      }
    },
    uglify: { //js文件压缩
      js: {
        files: {
          'dist/js/base.min.js': ['dist/js/base.js'],
          'dist/js/main.min.js': ['dist/js/main.js']
        }
      }
    },
    cssmin:{  //CSS文件压缩
      css: {
        files: {
          'dist/css/style.min.css': ['dist/css/style.css']
        }
      }
    },
    qunit: {  //单元测试，范例中未启用
      files: ['test/**/*.html']
    },
    jshint: { //文件校验，范例中未启用
      gruntfile: {
        options: {
          jshintrc: '.jshintrc'
        },
        src: 'Gruntfile.js'
      },
      src: {
        options: {
          jshintrc: 'js/.jshintrc'
        },
        src: ['js/**/*.js']
      },
      test: {
        options: {
          jshintrc: 'test/.jshintrc'
        },
        src: ['test/**/*.js']
      }
    },
    watch: {  //watch任务，实时监听文件的变化，并进行编译
      gruntfile: {
        files: '<%= jshint.gruntfile.src %>',
        tasks: ['jshint:gruntfile']
      },
      src: {
        files: '<%= jshint.src.src %>',
        tasks: ['jshint:src', 'qunit']
      },
      test: {
        files: '<%= jshint.test.src %>',
        tasks: ['jshint:test', 'qunit']
      }
    },
  });

  // 加载各种grunt插件完成任务
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 默认任务
  grunt.registerTask('default', ['clean', 'concat', 'uglify', 'cssmin']);
  //grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']);

};

drwxr-xr-x@  8 casperchen  staff     272  5 10 00:59 imweb_template

grunt-init --force imweb_template/
npm install
grunt

Running "clean:files" (clean) task
Cleaning "dist"...OK

Running "concat:js_and_css" (concat) task
File "dist/js/base.js" created.
File "dist/js/main.js" created.
File "dist/css/style.css" created.

Running "uglify:js" (uglify) task
File "dist/js/base.min.js" created.
Uncompressed size: 96927 bytes.
Compressed size: 7609 bytes gzipped (34814 bytes minified).
File "dist/js/main.min.js" created.
Uncompressed size: 926 bytes.
Compressed size: 93 bytes gzipped (305 bytes minified).

Running "cssmin:css" (cssmin) task
File dist/css/style.min.css created.

Done, without errors.

-rw-r--r--   1 root        staff    2398  5 10 14:39 Gruntfile.js
-rw-r--r--   1 root        staff     605  5 10 14:37 README.md
drwxr-xr-x   6 root        staff     204  5 10 14:37 css
drwxr-xr-x   4 root        staff     136  5 10 14:39 dist
drwxr-xr-x@  8 casperchen  staff     272  5 10 00:59 imweb_template
drwxr-xr-x  10 root        staff     340  5 10 14:37 js
drwxr-xr-x   5 root        staff     170  5  9 20:17 libs
drwxr-xr-x  10 casperchen  staff     340  5 10 09:28 node_modules
-rw-r--r--   1 root        staff     458  5 10 14:37 package.json
drwxr-xr-x   4 root        staff     136  5  9 20:17 src
drwxr-xr-x   5 root        staff     170  5  9 20:17 test

.addClass(className)：添加className

.removeClass(className)：删除className

.hasClass(className)：是否有className

.toggleClass(className)：如果没有className，则添加className；如果有，则删除className

$('#aa').addClass('green'); // 添加green类
$('#cc').addClass('red green'); // 添加red green类


// index：元素在集合中的位置，从0开始
// className：元素当前className
// 返回值：添加到元素上的class
$('div').addClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

$('#aa').removeClass('green'); // 添加green类
$('#aa').removeClass('red green'); // 添加red green类
$('#aa').removeClass();  // 删除所有class

// index：元素在集合中的位置，从0开始
// className：元素当前className
// 返回值：从元素上删除的class
$('div').removeClass(function(index, className){
    if(index>1){
        return 'red';
    }else{
        return 'green';
    }
});

$('div').hasClass('red');  // 是否存在div，它有red类

## .toggleClass：切换类

npm install grunt # 本地安装
npm install -g grunt-cli # 全局安装

casperchenMacBookPro:testUsemin casperchen$ ll
total 200
drwxr-xr-x  16 casperchen  staff   544B 12 14 23:17 node_modules

casperchenMacBookPro:node_modules casperchen$ ll
total 0
drwxr-xr-x  16 casperchen  staff   544B 12  5 00:49 grunt

node test.js

casperchenMacBookPro:testUsemin casperchen$ node test.js 
hello grunt

npm install -g grunt-cli

casperchenMacBookPro:bin casperchen$ pwd
/usr/local/bin
casperchenMacBookPro:bin casperchen$ ll grunt
lrwxr-xr-x  1 root  admin    39B  8 18 21:43 grunt -> ../lib/node_modules/grunt-cli/bin/grunt

node-inspector &

casperchenMacBookPro:tmp casperchen$ node-inspector &
[1] 14390
casperchenMacBookPro:tmp casperchen$ Node Inspector v0.6.1
   info  - socket.io started
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.

^CcasperchenMacBookPro:testUsemin casperchen$ node --debug-brk $(which grunt) dev
debugger listening on port 5858

// 3rd party
var express = require('express');
var hbs = require('hbs');

var app = express();

// set the view engine to use handlebars
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

app.use(express.static(__dirname + '/public'));

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name) {
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];
    return val;
});

app.get('/', function(req, res){
    res.render('index');
});

app.listen(3000);

var hbs = require('hbs'),
    Handlebars = require('handlebars'),
    fs = require('fs'),
    path = require('path'),
    grunt = require('grunt');

var views = path.resolve('views'),
    dest = path.resolve('dest'),
    filename = path.resolve(views, 'index.hbs'),
    destname = path.resolve(dest, 'index.html'),
    settings = {
        views: views
    },
    options = {
        title: 'hbs without express',
        nick: 'casper',
        settings: settings
    };

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name, context) {
    var len = (blocks[name] || []).length;
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];

    if(!len){
        return context.fn(this);
    }else{
        return val;
    }
});

hbs.__express(filename, options, function(err, res){
    grunt.file.write(destname, res);
});

$(function(){
    console.log('dom ready 啦！！');
});

$('#casper').addClass('handsome');

jQuery = function( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );   //就是这货
},

init: function( selector, context, rootjQuery ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Handle HTML strings
    if ( typeof selector === "string" ) {
        if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
            // Assume that strings that start and end with <> are HTML and skip the regex check
            match = [ null, selector, null ];

        } else {
            match = rquickExpr.exec( selector );
        }

        // Match html or make sure no context is specified for #id
        if ( match && (match[1] || !context) ) {

            // HANDLE: $(html) -> $(array)
            if ( match[1] ) {
                context = context instanceof jQuery ? context[0] : context;

                // scripts is true for back-compat
                jQuery.merge( this, jQuery.parseHTML(
                    match[1],
                    context && context.nodeType ? context.ownerDocument || context : document,
                    true
                ) );

                // HANDLE: $(html, props)
                if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                    for ( match in context ) {
                        // Properties of context are called as methods if possible
                        if ( jQuery.isFunction( this[ match ] ) ) {
                            this[ match ]( context[ match ] );

                        // ...and otherwise set as attributes
                        } else {
                            this.attr( match, context[ match ] );
                        }
                    }
                }

                return this;

            // HANDLE: $(#id)
            } else {
                elem = document.getElementById( match[2] );

                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if ( elem && elem.parentNode ) {
                    // Handle the case where IE and Opera return items
                    // by name instead of ID
                    if ( elem.id !== match[2] ) {
                        return rootjQuery.find( selector );
                    }

                    // Otherwise, we inject the element directly into the jQuery object
                    this.length = 1;
                    this[0] = elem;
                }

                this.context = document;
                this.selector = selector;
                return this;
            }

        // HANDLE: $(expr, $(...))
        } else if ( !context || context.jquery ) {
            return ( context || rootjQuery ).find( selector );

        // HANDLE: $(expr, context)
        // (which is just equivalent to: $(context).find(expr)
        } else {
            return this.constructor( context ).find( selector );
        }

    // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {
        this.context = this[0] = selector;
        this.length = 1;
        return this;

    // HANDLE: $(function)
    // Shortcut for document ready
    } else if ( jQuery.isFunction( selector ) ) {
        return rootjQuery.ready( selector );
    }

    if ( selector.selector !== undefined ) {
        this.selector = selector.selector;
        this.context = selector.context;
    }

    return jQuery.makeArray( selector, this );
},

jQuery( selector [, context ] )
    jQuery( selector [, context ] )
    jQuery( element )
    jQuery( elementArray )
    jQuery( object )
    jQuery( jQuery object )
    jQuery()
jQuery( html [, ownerDocument ] )
    jQuery( html [, ownerDocument ] )
    jQuery( html, attributes )
jQuery( callback )
    jQuery( callback )

jQuery()
jQuery( element )
jQuery( callback )

<div id="id_container" class="container">
    <div class="header"></div>
</div>

//
$('#id_container')
$('.container')

//
$('.header', $('#id_container')[0])
$('.header', $('#id_container'))

//
$(document.getElementsByTagName('div'))
$(document.getElementsByTagName('div')[0])
$($('.header'))
$({name:'casper', age:25})

//
$('<div class="content"><span>casper</span></div>')
$('<div class="content"><span>casper</span></div>', document)
$('<div></div>', {'class':'content'})
$('<div/>', {'class':'content'})

//
$(function(){
    console.log('$(callback)');
});

init: function( selector, context, rootjQuery ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

else if ( jQuery.isFunction( selector ) ) {
            return rootjQuery.ready( selector );
        } 

else if ( selector.nodeType ) {
            this.context = this[0] = selector;
            this.length = 1;
            return this;
        }

return jQuery.makeArray( selector, this );

$('.header').selector

if ( selector.selector !== undefined ) {
    this.selector = selector.selector;
    this.context = selector.context;
}
return jQuery.makeArray( selector, this );

init: function( selector, context, rootjQuery ) {
    //各种省略
        } else {    //先跑到这个分支里去鸟
            match = rquickExpr.exec( selector );  //这里，match==['#casper', undefined, 'casper']
        }
    //各种省略
            // HANDLE: $(#id)   //然后跑到这个分支了，其实源码的注释这里也说了~~
            } else {
                elem = document.getElementById( match[2] );

                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if ( elem && elem.parentNode ) {
                    // Handle the case where IE and Opera return items
                    // by name instead of ID
                    if ( elem.id !== match[2] ) {
                        return rootjQuery.find( selector );
                    }

                    // Otherwise, we inject the element directly into the jQuery object
                    this.length = 1;
                    this[0] = elem;
                }

                this.context = document;
                this.selector = selector;
                return this;
            }

        // HANDLE: $(expr, $(...))
        }     // 下面全部省略

//首先进入这个分支
match = rquickExpr.exec( selector );  //['#casper', undefined, 'casper']

//然后进入这个分支
} else {
                return this.constructor( context ).find( selector );
            }

//先进入这个分支
match = rquickExpr.exec( selector );  // match==null

//然后进入这个分支~
else if ( !context || context.jquery ) {
                return ( context || rootjQuery ).find( selector );

            // HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            } 

//首先进入这里
match = rquickExpr.exec( selector );  // match==null

//然后进入这里
// HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            } else {
                return this.constructor( context ).find( selector );
            }

//首先进入这里
match = rquickExpr.exec( selector );  // match==null

//然后进入这里
// HANDLE: $(expr, $(...))
            } else if ( !context || context.jquery ) {
                return ( context || rootjQuery ).find( selector );

//首先进入这里
        // Handle HTML strings
        if ( typeof selector === "string" ) {
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                // Assume that strings that start and end with <> are HTML and skip the regex check
                match = [ null, selector, null ];  //[null, '<div></div>', null]

            }
//然后进入这里
            // Match html or make sure no context is specified for #id
            if ( match && (match[1] || !context) ) {

                // HANDLE: $(html) -> $(array)
                if ( match[1] ) {
                    context = context instanceof jQuery ? context[0] : context;  // context == {style:{background:red}}

                    //先把创建好的dom借点复制到this里
                    // scripts is true for back-compat
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );
                    //然后将{style: 'background:red'}等属性添加到创建好的dom节点上
// HANDLE: $(html, props)
                    if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                        for ( match in context ) {
                            // Properties of context are called as methods if possible
                            if ( jQuery.isFunction( this[ match ] ) ) {
                                this[ match ]( context[ match ] );

                            // ...and otherwise set as attributes
                            } else {
                                this.attr( match, context[ match ] );
                            }
                        }
                    }

                    return this;

                // HANDLE: $(#id)
                }

        //首先华丽丽进入这个分支
        if ( typeof selector === "string" ) {
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                // Assume that strings that start and end with <> are HTML and skip the regex check
                match = [ null, selector, null ];

            }
            //然后进入这个分支
            // Match html or make sure no context is specified for #id
            if ( match && (match[1] || !context) ) {

                //在进入这个分支
                // HANDLE: $(html) -> $(array)
                if ( match[1] ) {
                    context = context instanceof jQuery ? context[0] : context;

                    // scripts is true for back-compat
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );
// 木有赋值
                    return this;

npm install
node demo.js 

'use strict';

exports.register = function(commander){

    //  fis relase --watch 时，就会执行这个方法
    function watch(opt){
        // ...
    }

    // 打点计时用，控制台里看到的一堆小点点就是这个方法输出的
    function time(fn){
        // ...
    }

    // fis release --live 时，会进入这个方法，对浏览器进行实时刷新
    function reload(){
        //...
    }

    // 高能预警！非常重要的方法，fis release 就靠这个方法走江湖了
    function release(opt){
        // ...
    }

    // 可以看到有很多配置参数，每个参数的作用可参考对应的描述，或者看官方文档
    commander
        .option('-d, --dest <names>', 'release output destination', String, 'preview')
        .option('-m, --md5 [level]', 'md5 release option', Number)
        .option('-D, --domains', 'add domain name', Boolean, false)
        .option('-l, --lint', 'with lint', Boolean, false)
        .option('-t, --test', 'with unit testing', Boolean, false)
        .option('-o, --optimize', 'with optimizing', Boolean, false)
        .option('-p, --pack', 'with package', Boolean, true)
        .option('-w, --watch', 'monitor the changes of project')
        .option('-L, --live', 'automatically reload your browser')
        .option('-c, --clean', 'clean compile cache', Boolean, false)
        .option('-r, --root <path>', 'set project root')
        .option('-f, --file <filename>', 'set fis-conf file')
        .option('-u, --unique', 'use unique compile caching', Boolean, false)
        .option('--verbose', 'enable verbose output', Boolean, false)
        .action(function(){

            // 省略一大堆代码

            // fis release 的两个核心分支，根据是否有加入 --watch 进行区分
            if(options.watch){
                watch(options); // 有 --watch 参数
            } else {
                release(options);   // 这里这里！重点关注！没有 --watch 参数
            }
        });
};

findFisConf();  // 找到当前项目的fis-conf.js

setProjectRoot();   // 设置项目根路径，需要编译的源文件就在这个根路径下

mergeFisConf(); // 导入项目自定义配置

readSourcesAndReleaseToDest(options);   // 将项目编译到默认的目录下

if(options.root){

    if(options.file){
        // 项目根路径，为 options.root 指定的路径
        // fis-conf.js路径，为 options.file 指定的路径
    }else{
        // 项目根路径，为 options.root 指定的路径
        // fis-conf.js路径，为 options.root/fis-conf.js 
    }
}else{

    if(options.file){
        // fis-conf.js路径，为 options.file 指定的路径
        // 项目根路径，为 fis-conf.js 所在的目录        
    }else{
        // fis-conf.js路径，为 逐层向上遍历后，找到的 fis-conf.js 路径
        // 项目根路径，为 fis-conf.js 所在的目录
    }
}

// 如果找到了 fis-conf.js
if(conf){
    var cache = fis.cache(conf, 'conf'); 
    if(!cache.revert()){
        options.clean = true;
        cache.save();
    }
    require(conf);  // 加载 fis-conf.js，其实就是合并配置
} else {
    // 还是没有找到 fis-conf.js
    fis.log.warning('missing config file [' + filename + ']');
}

var collection = {};    // 跟total一样，key=>value 为 “编译的源文件路径”＝》"对应的file对象"
    var total = {};
    var deploy = require('./lib/deploy.js');    // 文件部署模块，完成从 src -> dest 的最后一棒

function release(opt){

    opt.beforeEach = function(file){
        // 用compile模块编译源文件前调用，往 total 上挂 key=>value
        total[file.subpath] = file;
    };
    opt.afterEach = function(file){
        // 用compile模块编译源文件后调用，往 collection 上挂 key=>value
        collection[file.subpath] = file;
    };

    opt.beforeCompile = function(file){
        // 在compile内部，对源文件进行编译前调用（好绕。。。）
        collection[file.subpath] = file;        
    };

    try {
        //release
        // 在fis-kernel里，fis.release = require('./lib/release.js');
        // 在fis.release里完成除了最终部署之外的文件编译操作，比如文件标准化等
        fis.release(opt, function(ret){

            deploy(opt, collection, total); // 项目部署（本例子里特指将编译后的文件写到某个特定的路径下）
        });
    } catch(e) {
        // 异常处理，暂时忽略
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>getting started</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/jsx" src="js/helloworld.js"></script>
</body>
</html>

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

fis server start
fis release

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <!-- <script src="build/JSXTransformer.js"></script> -->
</head>
<body>

    <div id="example"></div>

    <script src="js-build/helloworld.js"></script>
</body>
</html>

npm install -g react-tools

jsx --watch js/ js-build/

React.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

<!DOCTYPE html>
<html>
<head>
    <title>getting started</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">
      var HelloComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <h1>Hello World</h1>
                        <p>I am Hello World Component</p>
                    </div>                  
                );
            }
        });

      React.render(
        <HelloComponent />,
        document.getElementById('example')
      );
    </script>
</body>
</html>

      var HelloComponent = React.createClass({
            render: function(){
                return (
                        <h1>Hello World</h1>
                        <p>I am Hello World Component</p>
                );
            }
        });

    <script type="text/jsx">    

        var HelloComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <h1>Title is: {this.props.title}</h1>
                        <p>Content is: {this.props.content}</p>
                    </div>                  
                );
            }
        });

        React.render(
            <HelloComponent title="hello" content="world" />,
            document.getElementById('example')
        );

    </script>

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/jsx">

        var Title = React.createClass({
            render: function(){
                return (
                    <h1>This is Title</h1>
                );
            }
        });

        var Content = React.createClass({
            render: function(){
                return (
                    <p>This is Content</p>
                );
            }
        });

        // Article组件包含了 Title、Content 组件
        var Article = React.createClass({
            render: function() {
                return (
                    <div class="article">
                        <Title />
                        <Content />
                    </div>
                );              
            }
        });

        React.render(
          <Article />,
          document.getElementById('example')
        );
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">        

        var HelloComponent = React.createClass({
            getInitialState: function(){
                return {
                    title: 'title1',
                    content: 'content1'
                };
            },
            componentDidMount: function(){
                var that = this;
                setTimeout(function(){
                    that.setState({
                        title:'title2', 
                        content:'content2'
                    });
                }, 2000);
            },
            render: function(){
                return (
                    <div>
                        <h1>Title is: {this.state.title}</h1>
                        <p>Content is: {this.state.content}</p>
                    </div>                  
                );
            }
        });


        React.render(
            <HelloComponent />,
            document.getElementById('example')
        );

    </script>
</body>
</html>

fis release --watch

// 是否自动重新编译
if(options.watch){
    watch(options); // 对！就是这里
} else {
    release(options);
}

function watch(opt){
    var root = fis.project.getProjectPath();
    var timer = -1;
    var safePathReg = /[\\\/][_\-.\s\w]+$/i;    // 是否安全路径（参考）
    var ignoredReg = /[\/\\](?:output\b[^\/\\]*([\/\\]|$)|\.|fis-conf\.js$)/i;  // ouput路径下的，或者 fis-conf.js 排除，不参与监听
    opt.srcCache = fis.project.getSource(); // 缓存映射表，代表参与编译的源文件；格式为 源文件路径＝>源文件对应的File实例。比较奇怪的是，opt.srcCache 没见到有地方用到，在 fis.release 里，fis.project.getSource() 会重新调用，这里感觉有点多余

    // 根据传入的事件类型（type），返回对应的回调方法
    // type 的取值有add、change、unlink、unlinkDir
    function listener(type){
        return function (path) {
            if(safePathReg.test(path)){
                var file = fis.file.wrap(path);
                if (type == 'add' || type == 'change') {    // 新增 或 修改文件
                    if (!opt.srcCache[file.subpath]) {  // 新增的文件，还不在 opt.srcCache 里
                        var file = fis.file(path);
                        opt.srcCache[file.subpath] = file;  // 从这里可以知道 opt.srcCache 的数据结构了，不展开
                    }
                } else if (type == 'unlink') {  // 删除文件
                    if (opt.srcCache[file.subpath]) {
                        delete opt.srcCache[file.subpath];  // 
                    }
                } else if (type == 'unlinkDir') {   // 删除目录
                     fis.util.map(opt.srcCache, function (subpath, file) {
                        if (file.realpath.indexOf(path) !== -1) {
                            delete opt.srcCache[subpath];
                        }
                    });                       
                }
                clearTimeout(timer);
                timer = setTimeout(function(){
                    release(opt);   // 编译，增量编译的细节在内部实现了
                }, 500);
            }
        };
    }

    //添加usePolling配置
    // 这个配置项可以先忽略
    var usePolling = null;

    if (typeof fis.config.get('project.watch.usePolling') !== 'undefined'){
        usePolling = fis.config.get('project.watch.usePolling');
    }

    // chokidar模块，主要负责文件变化的监听
    // 除了error之外的所有事件，包括add、change、unlink、unlinkDir，都调用 listenter(eventType) 来处理
    require('chokidar')
        .watch(root, {
            // 当文件发生变化时候，会调用这个方法（参数是变化文件的路径）
            // 如果返回true，则不触发文件变化相关的事件
            ignored : function(path){
                var ignored = ignoredReg.test(path);    // 如果满足，则忽略
                // 从编译队列中排除
                if (fis.config.get('project.exclude')){
                    ignored = ignored ||
                        fis.util.filter(path, fis.config.get('project.exclude'));   // 此时 ignoredReg.test(path) 为false，如果在exclude里，ignored也为true
                }
                // 从watch中排除
                if (fis.config.get('project.watch.exclude')){
                    ignored = ignored ||
                        fis.util.filter(path, fis.config.get('project.watch.exclude')); // 跟上面类似
                }
                return ignored;
            },
            usePolling: usePolling,
            persistent: true
        })
        .on('add', listener('add'))
        .on('change', listener('change'))
        .on('unlink', listener('unlink'))
        .on('unlinkDir', listener('unlinkDir'))
        .on('error', function(err){
            //fis.log.error(err);
        });
}

// ret.src 为项目下的源文件
fis.util.map(ret.src, function(subpath, file){
    if(opt.beforeEach) {
        opt.beforeEach(file, ret);
    }
    file = fis.compile(file);
    if(opt.afterEach) {
        opt.afterEach(file, ret);   // 这里这里！
    }

opt.afterEach = function(file){
    //cal compile time
    // 略过无关代码

    var mtime = file.getMtime().getTime();  // 源文件的最近修改时间
    //collect file to deploy
    // 如果符合这几个条件：1、文件需要部署 2、最近修改时间 不等于 上一次缓存的修改时间
    // 那么重新编译部署
    if(file.release && lastModified[file.subpath] !== mtime){
        // 略过无关代码

        lastModified[file.subpath] = mtime;
        collection[file.subpath] = file;  // 这里这里！！在 deploy 方法里会用到
    }
};

deploy(opt, collection, total); // 部署～

^CadeMacBook-Pro-3:fi a$ tree
.
├── index.css
└── index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css?__inline">
</head>
<body>

</body>
</html>

    if(file.isFile()){
        if(file.useCompile && file.ext && file.ext !== '.'){
            var cache = file.cache = fis.cache(file.realpath, CACHE_DIR),   // 为文件建立缓存（路径）
                revertObj = {};

            // 目测是检测缓存过期了没，如果只是跑 fis release ，直接进else
            if(file.useCache && cache.revert(revertObj)){   // 检查依赖的资源（deps）是否发生变化，就在 cache.revert(revertObj)这个方法里
                exports.settings.beforeCacheRevert(file);
                file.requires = revertObj.info.requires;
                file.extras = revertObj.info.extras;
                if(file.isText()){
                    revertObj.content = revertObj.content.toString('utf8');
                }
                file.setContent(revertObj.content);
                exports.settings.afterCacheRevert(file);
            } else {

    // 如果过期，返回false；没有过期，返回true
    // 注意，穿进来的file对象会被修改，往上挂属性
    revert : function(file){
        fis.log.debug('revert cache');
        // this.cacheInfo、this.cacheFile 中存储了文件缓存相关的信息
        // 如果还不存在，说明缓存还没建立哪（或者被人工删除了也有可能，这种变态情况不多）
        if(
            exports.enable
            && fis.util.exists(this.cacheInfo)
            && fis.util.exists(this.cacheFile)
        ){
            fis.log.debug('cache file exists');
            var infos = fis.util.readJSON(this.cacheInfo);
            fis.log.debug('cache info read');
            // 首先，检测文件本身是否发生变化
            if(infos.version == this.version && infos.timestamp == this.timestamp){
                // 接着，检测文件依赖的资源是否发生变化
                // infos.deps 这货怎么来的，可以看下compile.js 里的实现
                var deps = infos['deps'];
                for(var f in deps){
                    if(deps.hasOwnProperty(f)){
                        var d = fis.util.mtime(f);
                        if(d == 0 || deps[f] != d.getTime()){   // 过期啦！！
                            fis.log.debug('cache is expired');
                            return false;
                        }
                    }
                }
                this.deps = deps;
                fis.log.debug('cache is valid');
                if(file){
                    file.info = infos.info;
                    file.content = fis.util.fs.readFileSync(this.cacheFile);
                }
                fis.log.debug('revert cache finished');
                return true;
            }
        }
        fis.log.debug('cache is expired');
        return false;
    },

if(file.useCompile && file.ext && file.ext !== '.'){
            var cache = file.cache = fis.cache(file.realpath, CACHE_DIR),   // 为文件建立缓存（路径）
                revertObj = {};

            // 目测是检测缓存过期了没，如果只是跑 fis release ，直接进else
            if(file.useCache && cache.revert(revertObj)){
                exports.settings.beforeCacheRevert(file);
                file.requires = revertObj.info.requires;
                file.extras = revertObj.info.extras;
                if(file.isText()){
                    revertObj.content = revertObj.content.toString('utf8');
                }
                file.setContent(revertObj.content);
                exports.settings.afterCacheRevert(file);
            } else {
                // 缓存过期啦！！缓存还不存在啊！都到这里面来！！
                exports.settings.beforeCompile(file);
                file.setContent(fis.util.read(file.realpath));                
                process(file);  // 这里面会对文件进行"标准化"等处理
                exports.settings.afterCompile(file);
                revertObj = {
                    requires : file.requires,
                    extras : file.extras
                };
                cache.save(file.getContent(), revertObj);
            }
        }

        if(file.useStandard !== false){
            standard(file);
        }

function standard(file){
    var path = file.realpath,
        content = file.getContent();
    if(typeof content === 'string'){
        fis.log.debug('standard start');
        //expand language ability
        if(file.isHtmlLike){
            content = extHtml(content);  // 如果有 <link href="index1.css?__inline" /> 会被替换成 <style type="text/css"><<<embed:"index1.css?__inline">>> 这样的占位符
        } else if(file.isJsLike){
            content = extJs(content);
        } else if(file.isCssLike){
            content = extCss(content);
        }
        content = content.replace(map.reg, function(all, type, value){

            // 虽然这里很重要，还是先省略代码很多很多行

    }
}

content = content.replace(map.reg, function(all, type, value){
            var ret = '', info;
            try {
                switch(type){
                    case 'require':
                        // 省略...
                    case 'uri':
                        // 省略...
                    case 'dep':
                        // 省略
                    case 'embed':
                    case 'jsEmbed':
                        info = fis.uri(value, file.dirname);  // value ==> ""index.css?__inline""
                        var f;
                        if(info.file){
                            f = info.file;
                        } else if(fis.util.isAbsolute(info.rest)){
                            f = fis.file(info.rest);
                        }
                        if(f && f.isFile()){
                            if(embeddedCheck(file, f)){ // 一切合法性检查，比如有没有循环引用之类的
                                exports(f); // 编译依赖的资源
                                addDeps(file, f);   // 添加到依赖列表
                                f.requires.forEach(function(id){    
                                    file.addRequire(id);
                                });
                                if(f.isText()){
                                    ret = f.getContent();
                                    if(type === 'jsEmbed' && !f.isJsLike && !f.isJsonLike){
                                        ret = JSON.stringify(ret);
                                    }
                                } else {
                                    ret = info.quote + f.getBase64() + info.quote;
                                }
                            }
                        } else {
                            fis.log.error('unable to embed non-existent file [' + value + ']');
                        }
                        break;
                    default :
                        fis.log.error('unsupported fis language tag [' + type + ']');
                }
            } catch (e) {
                embeddedMap = {};
                e.message = e.message + ' in [' + file.subpath + ']';
                throw  e;
            }
            return ret;
        });

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>main.js、anynomous.js串行加载</h1>

<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

require(['js/anonymous'], function(Anonymous) {
    alert('加载成功');
});

define(['js/jquery'], function() {
    console.log('匿名模块，require直接报错了。。。');
    return{
        say: function(msg){
            console.log(msg);
        }
    }
});

define('name-module', 'js/anonymous', [], function() {
    return {
        say: function(msg){
            alert(msg);
        }
    };
});

npm install -g requirejs

r.js -o ./build.js 

define('js/anonymous',['jquery'], function() {
    console.log('匿名模块，require直接报错了。。。');
    return{
        say: function(msg){
            console.log('anonymous: '+msg);
        }
    }
});
define('js/name-module', ['js/anonymous'], function() {
    return {
        say: function(msg){
            alert('name module: '+msg);
        }
    };
});

var gulp = require('gulp'),
    preprocess = require('gulp-preprocess');

gulp.task('default', function() {

    gulp.src('src/index.html')
        .pipe(preprocess({USERNAME:'程序猿小卡'}))
        .pipe(gulp.dest('dest/'));
});