汇智网-异步编程：http://cw.hubwiz.com/card/c/543e1a4f032c7816c0d5dfa1/1/3/6/

安装：npm install async 
引用：var async = require('async');

//高阶函数test的返回值是一个匿名函数
function test(v){
  return function(){
    return v;
  }
}

//isType函数中预置了判断类型的方法，只指定部分参数来产生的新的定制的函数isString和isFunction就是偏函数
var isType = function(type){
  return function(obj){
    return toString.call(obj)=='[object '+type+']';
  }
};
var isString = isType('String');
var isFunction = isType('Function');

var say =function(name){
    return function(text){
        console.log(name+' say '+text);
    }
};
var tomSay = say('tom');

tomSay ('hello');

async.series([function(cb){
    setTimeout(function(){
        cb(null,1);
    },1000)
},function(cb){
    setTimeout(cb,1000,null,2); 
}],function(err,result){  //result是每个回调函数传进来的data参数，result=[1,2]
    if (err) 
        console.error(err);
    else 
        console.log(result);
})

async.waterfall([function(cb){
    setTimeout(function(){
        cb(null,1);
    },1000)
},function(data,cb){
    setTimeout(cb,1000,null,data+"+"+"2");
}],function(err,result){  //result = "1+2"
    if (err) 
        console.error(err);
    else 
        console.log(result);
})
~~~ 

## parallelLimit(tasks, limit, [callback])
parallelLimit函数和parallel类似，但是它多了一个参数limit。 limit参数限制任务只能同时并发一定数量，而不是无限制并发

## whilst(test, fn, callback)
相当于while，但其中的异步调用将在完成后才会进行下一次循环;test参数是一个返回布尔值结果的函数，通过返回值来决定循环是否继续，作用等同于while循环停止的条件

## doWhilst(fn, test, callback)
相当于do…while,较whilst而言，doWhilst交换了fn,test的参数位置，先执行一次循环，再做test判断

## until(test, fn, callback)
until与whilst正好相反，当test条件函数返回值为false时继续循环，与true时跳出。其它特性一致

## doUntil(fn, test, callback)
doUntil与doWhilst正好相反，当test为false时循环，与true时跳出。其它特性一致

## forever(fn, errback)
forever函数比较特殊，它的功能是无论条件如何，函数都一直循环执行，只有出现程序执行的过程中出现错误时循环才会停止，callback才会被调用

## compose(fn1, fn2...)
使用compose可以创建一个异步函数的集合函数，将传入的多个异步函数包含在其中，当我们执行这个集合函数时，会依次执行每一个异步函数，每个函数会消费上一次函数的返回值

==注意==：从内层到外层的执行的顺序；从右往左执行

## auto(tasks, [callback])
* 用来处理有依赖关系的多个任务的执行
* async.auto的强大是在于，你定义好相互之间的dependencies，他来帮你决定用parallel还是waterfull

## queue(worker, concurrency)
queue相当于一个加强版的parallel，主要是限制了worker数量，不再一次性全部执行。当worker数量不够用时，新加入的任务将会排队等候，直到有新的worker可用

## apply(function, arguments..)
apply是一个非常好用的函数，可以让我们给一个函数预绑定多个参数并生成一个可直接调用的新函数，简化代码

## iterator(tasks)
* 将一组函数包装成为一个iterator，可通过next()得到以下一个函数为起点的新的iterator。该函数通常由async在内部使用，但如果需要时，也可在我们的代码中使用它
* 直接调用()，会执行当前函数，并返回一个由下个函数为起点的新的iterator。调用next()，不会执行当前函数，直接返回由下个函数为起点的新iterator
* 对于同一个iterator，多次调用next()，不会影响自己。如果只剩下一个元素，调用next()会返回null

* process.cwd();            //查看应用程序当前目录
* process.chdir("目录");    //改变应用程序目录
* stdout是标准输出流,作用就是将内容打印到输出设备上
    console.log = function(d){
        process.stdout.write(d+'\n');
    } 
* stderr是标准错误流,用来打印错误信息,可以通过它来捕获错误信息     //process.stderr.write(输入内容);
* stdin是进程的输入流,我们可以通过注册事件的方式来获取输入的内容
    process.stdin.on('readable', function() {
      var chunk = process.stdin.read();
      if (chunk !== null) {
        process.stdout.write('data: ' + chunk);
      }
    });
* process.exit(code);   //需要在程序内杀死进程，退出程序时使用，参数code为退出后返回的代码，如果省略则默认返回0；
* process.on()；        //此方法可监听进程事件
  exit事件：//当进程要退出之前，会触发exit事件。通过监听exit事件，我们可就以在进程退出前进行一些清理工作： 
        process.on("exit",function(code){//参数code表示退出码 
          console.log("I am tired...")//进行一些清理工作
        }); 
    uncaughtException事件:  //如果进程发生了未捕捉的异常，会触发uncaughtException事件。通过监听这个事件，可以 让进程优雅的退出
        process.on("uncaughtException",function(err){
            console.log(err);
        });
        throw new Error("我故意的..."); //故意抛出一个异常
* 设置编码
  process.stdin.setEncoding(编码);
  process.stdout.setEncoding(编码);
  process.stderr.setEncoding(编码);

var child_process = require('child_process');
var child = child_process.spawn( command );
child.stdout.on('data', function(data) {
  console.log(data);
});
通过执行命令得到返回结果

var child_process = require('child_process');
child_process.exec( command , function(err, stdout , stderr ) {
  console.log( stdout );
});

var child_process = require('child_process');
child_process.execFile( file , function(err, stdout , stderr ) {
  console.log( stdout );
});

var child_process = require('child_process');
child_process.fork( modulePath );

var fs= require("fs"); 
fs.writeFile('test.txt', 'Hello Node', function (err) {
   if (err) throw err;
   console.log('Saved successfully'); //文件被保存
});

var fs= require("fs"); 
fs.appendFile('test.txt', 'data to append', function (err) {
   if (err) throw err;  
    console.log('The "data to append" was appended to file!'); 
});

权限：默认为0777，表示文件所有者、文件所有者所在的组的用户、所有用户，都有权限进行读、写、执行的操作

作用就是序列化对象，也就是说将对象类型转换成一个字符串类型（默认的分割符（"&"）和分配符（"="））

querystring.stringify({foo:'bar',cool:['xux', 'yys']},'*','$');
结果：'foo$bar*cool$xux*cool$yys'

运行结果：{ foo: 'bar', cool: ['xux', 'yys']}
parse函数的作用就是反序列化字符串（默认是由"="、"&"拼接而成），转换得到一个对象类型

运行结果：{ foo: '', bar: 'cool', xux: 'cool', yys: '' }

1. 如果占位符没有相对应的参数，占位符将不会被替换
2. 如果有多个参数占位符，额外的参数将会调用util.inspect()转换为字符串。这些字符串被连接在一起，并且以空格分隔
3. 如果第一个参数是一个非格式化字符串，则会把所有的参数转成字符串并以空格隔开拼接在一块，而且返回该字符串

中文网址：http://nodejs.cn/
英文网址：https://nodejs.org/en/

其他相关网址：
https://www.npmjs.com/
https://github.com/

node [options] [v8 options] [script.js | -e "script"] [arguments]

console.time(label) //启动一个定时器，用以计算一个操作的持续时间。 定时器由一个唯一的 label 标识。 当调用 console.timeEnd() 时，可以使用相同的 label 来停止定时器，并以毫秒为单位将持续时间输出到 stdout。 定时器持续时间精确到亚毫秒。
console.timeEnd(label)  //停止之前通过调用 console.time() 启动的定时器，并打印结果到 stdout
console.trace(message[, ...args])   //打印字符串 'Trace :' 到 stderr ，并通过 util.format() 格式化消息与堆栈跟踪在代码中的当前位置。

//同步的方式
const fs = require('fs'); 
fs.unlinkSync('/tmp/hello');
console.log('successfully deleted /tmp/hello');

//异步方式
const fs = require('fs'); 
fs.unlink('/tmp/hello', (err) => {
  if (err) throw err;
  console.log('successfully deleted /tmp/hello');
});

* __dirname     //当前模块的目录名。 等同于 __filename 的 path.dirname()
* __filename    //当前模块的文件名。 这是当前模块文件的解析后的绝对路径
* exports       //module.exports 的一个简短的引用
* module        //当前模块的引用。 具体地说，module.exports 用于定义一个模块导出什么，且通过 require() 引入
* require.resolve() //使用内部的 require() 机制来查找模块的位置，但不会加载模块，只返回解析后的文件名

中文网站：http://www.expressjs.com.cn/

1. 确定已安装nodejs
2. mkdir 项目名称；cd 项目名称
3. npm init     //为应用创建一个 package.json 文件,然后根据提示操作或者一路回车
4. npm install express --save   //安装 Express 并将其保存到依赖列表中
5. 新建index.js文件进行编写

1. npm install express -g //全局安装express
2. webstorm中选择Node.js Expresss App,然后创建

1. 安装生成器：npm install express-generator -g
2. 查看express 命令的用法：express -h
3. 创建项目：express 项目名称
4. 安装依赖：npm install

* app.use('/static', express.static('public'));
* 访问：http://localhost:3000/static/images/kitten.jpg

Express 执行了所有中间件、路由之后还是没有获取到任何输出。你所需要做的就是在其所有他中间件的后面添加一个处理 404 的中间件

错误处理器中间件的定义和其他中间件一样，唯一的区别是 4 个而不是 3 个参数，即 (err, req, res, next)

无需通过 res.render() 渲染 HTML。你可以通过 res.sendFile() 直接对外输出 HTML 文件。如果你需要对外提供的资源文件很多，可以使用 express.static() 中间件

app.METHOD(PATH, HANDLER)
其中，
app 是一个 express 实例；
METHOD 是某个 HTTP 请求方式中的一个；
PATH 是服务器端的路径；
HANDLER 是当路由匹配到时需要执行的函数

//来自 “/secret” 的请求，不管使用 GET、POST、PUT等方法请求，句柄都会得到执行
app.all('/secret', function (req, res, next) {
  console.log('Accessing the secret section ...');
  next(); // pass control to the next handler
});

app.get('/example/b', function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});
//混合方式
app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from D!');
});

app.route('/book')
  .get(function(req, res) {
    res.send('Get a random book');
  })
  .post(function(req, res) {
    res.send('Add a book');
  })
  .put(function(req, res) {
    res.send('Update the book');
  });

//brid.js
var express = require('express');
var router = express.Router();

// 该路由使用的中间件  可选
router.use(function timeLog(req, res, next) {
  console.log('Time: ', Date.now());
  next();
});
 
// 定义 about 页面的路由
router.get('/about', function(req, res) {
  res.send('About birds');
});

module.exports = router;

//加载使用
var birds = require('./birds');
...
app.use('/birds', birds);

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next('route');
  // 否则将控制权交给栈中下一个中间件
  else next(); //
}, function (req, res, next) {
  // 渲染常规页面
  res.render('regular');
});

// 处理 /user/:id， 渲染一个特殊页面
app.get('/user/:id', function (req, res, next) {
  res.render('special');
});

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'dbuser',
  password : 's3kreee7'
});

connection.connect();

connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
  if (err) throw err;
  console.log('The solution is: ', rows[0].solution);
});

connection.end();

var db = require('mongoskin').db('localhost:27017/animals');

db.collection('mamals').find().toArray(function(err, result) {
  if (err) throw err;
  console.log(result);
});

var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(':memory:');

db.serialize(function() {

  db.run('CREATE TABLE lorem (info TEXT)');
  var stmt = db.prepare('INSERT INTO lorem VALUES (?)');

  for (var i = 0; i < 10; i++) {
    stmt.run('Ipsum ' + i);
  }

  stmt.finalize();

  db.each('SELECT rowid AS id, info FROM lorem', function(err, row) {
    console.log(row.id + ': ' + row.info);
  });
});

db.close();

Gulp官网 http://gulpjs.com/
Gulp中文网 http://www.gulpjs.com.cn/
Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn
Gulp插件网 http://gulpjs.com/plugins/
Awesome Gulp https://github.com/alferov/awesome-gulp
StuQ-Gulp实战和原理解析 http://i5ting.github.io/stuq-gulp/

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json
~

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

module.exports = {
    name : '.....',
    devPath : '.....',    //项目根路径，根路径下可以包含多个项目
    prodPath : '....', //生产路径根路径
    sassPath : '.....', //SASS包含文件路径
    rmHtmlWhitespace : false,//html中是否去除空格
    webpackEntry : {
        index : 'index.js'//js合并
    },
    server : {
        port : 8088
    }
};

var config = require('./config');//加载项目配置

//引入gulp，项目文件中安装的gulp的引入方式
var gulp =require('gulp');

//引入组件
var jshint = require("gulp-jshint");
var gutil = require("gulp-util");
var sass= require("gulp-sass");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

var path = require("path");
var del = require("del");

//你也许会想要在编译文件之前删除一些文件
gulp.task('clean', function(cb) {
    return del(['build/**/*'], cb);
});

//检查脚本
gulp.task('lint',function () {
    gulp.src('./src/javascript/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//编译sass
//sass 任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中
gulp.task('sass',function () {
    gulp.src("./src/scss/**/*.scss")
        .pipe(sass({outputStyle: 'compact'}))
        .pipe(gulp.dest("./build/css"));
});

//合并，压缩文件
//scipts 任务会合并js 目录下的所有js文件并输出到dist目录中，然后gulp会重命名。压缩合并的文件，也输出到dist/目录
gulp.task('scripts',function () {
    gulp.src('./src/javascript/**/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dest'))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("./build"))
});

//这时，我们创建了一个基于其他任务的default任务。
//使用.run()方法关联和运行我们上面定义的任务，使用.watch() 方法去坚挺制定目录的文件变化,当有文件变化时，会运行回调定义的其他任务。
gulp.task('default',function(){
    //将你的默认的任务代码放在这里
    gulp.run('lint','sass','scripts');
    //监听文件变化
    gulp.watch("",function () {
        gulp.run('lint','sass','scripts');
    });
});

gulp.src(globs[, options])

* globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组
* options为可选参数

gulp.src('app/src/**/*.css') //此时base的值为 app/src

* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
? 匹配文件路径中的一个字符(不会匹配路径分隔符)
[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

gulp.dest(path[,options])

* path为写入文件的路径
* options为一个可选的参数对象，通常我们不需要用到

gulp.task(name[, deps], fn)
* name 为任务名
* deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
* fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务
  // Do something
});

gulp.watch(glob[, opts], tasks)
* glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
* opts 为一个可选的配置对象，通常不需要用到
* tasks 为文件变化后要执行的任务，为一个数组

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

plugins.rename          //gulp-rename插件的使用

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js')); 
});

var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");
 
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

var gulp = require('gulp'),
    jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

var gulp = require('gulp'),
    concat = require("gulp-concat");
 
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});
~~~ 

## 图片压缩插件

{
 "name": "my-project-name",
 "version": "0.1.0",
 "devDependencies": {
      "grunt": "~0.4.1",
      "grunt-contrib-jshint": "~0.6.0",
      "grunt-contrib-nodeunit": "~0.2.0",
      "grunt-contrib-uglify": "~0.2.2"
 }
}

module.exports = function(grunt) {
 // Do grunt-related things in here
};

// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'), //package.json文件中的项目元数据（metadata）被导入到 Grunt 配置中
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    }); 
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['uglify']);
};

--help, -h ==Display help text
--base, -b ==Specify an alternate base path. By default, all file paths are relative to the Gruntfile.
==Alternative to grunt.file.setBase(...)
--no-color ==Disable colored output.
--gruntfile ==Specify an alternate Gruntfile.
==By default,grunt looks in the current or parent directories for the nearest Gruntfile.(js/coffee) file.
--debug, -d ==Enable debugging mode for tasks that support it.
--stack ==Print a stack trace when exiting with a warning or fatal error.
--force, -f ==A way to force your way past warnings.Want a suggestion? Don't use this option, fix your code.
--tasks ==Additional directory paths to scan for task and "extra" files.Alternative to grunt.loadTasks(...)
--npm ==Npm-installed grunt plugins to scan for task and "extra" files.Alternative to grunt.loadNpmTasks(...)
--no-write ==Disable writing files (dry run).
--verbose, -v ==Verbose mode. A lot more information output.
--version, -V ==Print the grunt version. Combine with --verbose for more info.
--completion ==Output shell auto-completion rules. See the grunt-cli documentation for more information.

grunt.registerTask(taskName, [description, ] taskList)

//如果运行Grunt时没有指定任何任务，它将自动执行'jshint'、'qunit'、'concat' 和 'uglify' 任务
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

grunt.registerTask('dist', ['concat:distArg', 'uglify:distArg']);

grunt.initConfig({
    concat: { =================Task
        options: {
         // 这里是任务级的Options，覆盖默认值
        },
        foo: { =================Target，并非子任务
            options: {
            // "foo" target options may go here, overriding task-level options.
            },
        },
        bar: {
        // No options specified; this target will use task-level options.
        },
    },
});

npm install grunt --save-dev //安装最新版的Grunt
npm install grunt-contrib-cssmin --save-dev //安装我们所需要的插件

module.exports = function(grunt) {
    // 配置任务参数
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            combine: {
                files: {
                    'css/release/compress.css': ['css/*.css'] // 指定合并的CSS文件 ['css/base.css', 'css/global.css']
                }
            },
            minify: {
                options: {
                    keepSpecialComments: 0, /* 删除所有注释 */
                    banner: '/* minified css file */'
                },
                files: {
                    'css/release/master.min.css': ['css/master.css']
                }
            }
        }
    });
    // 插件加载（加载 "cssmin" 模块）
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 自定义任务：通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
    grunt.registerTask('default', ['cssmin']);
};

Running "cssmin:combine" (cssmin) task
File css/release/compress.css created.
Running "cssmin:minify" (cssmin) task
File css/release/master.min.css created.
Done, without errors.

grunt.initConfig({
    jsdoc : {
        dist : {
            src: ['src/*.js', 'test/*.js'],
            options: {
                destination: 'doc'
            }
        }
    }
});

src: 要自动生成API文档的源文件路径数组
jsdoc: jsdoc的bin文件夹目录
options: jsdoc单独使用的配置项
destination： 必填，指定文档输出路径
configure： jsdoc配置文件路径
template： 文档模板路径
private： 是否在文档中输出private成员，默认为true

http://webpack.org/
https://github.com/webpack-china/webpack.js.org
http://www.css88.com/doc/webpack2/

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* 需要引入 lodash，下一行才能正常工作 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

npm install --save lodash

<html>
  <head>
    <title>webpack 2 demo</title> 
  </head>
  <body> 
       <script src="dist/bundle.js"></script>
  </body>
</html>

webpack
查看浏览器index.html页面内容：Hello webpack

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: 'css-loader'
        }]
    }
}

module.exports = {
    module: {
         rules: [{
             test: /\.css$/,
-            use: 'css-loader'
+            use: ExtractTextPlugin.extract({
+                use: 'css-loader'
+            })
         }]
     },
+    plugins: [
+        new ExtractTextPlugin('styles.css'),
+    ]
}

var path = require('path');

module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js',
            path: path.resolve(__dirname, 'dist')
        }
    }
}

var webpack = require('webpack');
var path = require('path');

module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor' // 指定公共 bundle 的名字。
            })
        ]
    }
}

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest'] // 指定公共 bundle 的名字
    })
]

module.exports = function() {
    return {
        entry: { 
            'vendor': './src/vendor.ts',
            'main': './src/main.ts'

        },
        output: {
            path: path.join(__dirname, '/../dist/assets'),
            filename: '[name].bundle.js',
            publicPath: publicPath,
            sourceMapFilename: '[name].map'
        },
        resolve: {
            extensions: ['', '.js', '.json'],
            modules: [path.join(__dirname, 'src'), 'node_modules']

        },
        module: {
            loaders: [{
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader']
            }, {
                test: /\.(jpg|png|gif)$/,
                loader: 'file-loader'
            }, {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }],
        },
        plugins: [
            new ForkCheckerPlugin(),

            new webpack.optimize.CommonsChunkPlugin({
                name: ['polyfills', 'vendor'].reverse()
            }),
            new HtmlWebpackPlugin({
                template: 'src/index.html',
                chunksSortMode: 'dependency'
            })
        ],
    };
}

const webpackMerge = require('webpack-merge');

const commonConfig = require('./base.js');

module.exports = function(env) {
    return webpackMerge(commonConfig(), {
        plugins: [
            new webpack.LoaderOptionsPlugin({
                minimize: true,
                debug: false
            }),
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify('prod')
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                beautify: false,
                mangle: {
                    screw_ie8: true,
                    keep_fnames: true
                },
                compress: {
                    screw_ie8: true
                },
                comments: false
            })
        ]
    })
}

// webpack.config.js
const path = require("path");

module.exports = { 
  plugins: [
    function() {
      this.plugin("done", function(stats) {
        require("fs").writeFileSync(
          path.join(__dirname, "build", "stats.json"),
          JSON.stringify(stats.toJson()));
      });
    }
  ]
};

devtool:'source-map'

var express = require("express");
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config");

var app = express();
var compiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(compiler, {
  publicPath: "/" // 大部分情况下和 `output.publicPath`相同
}));

app.listen(3000, function () {
  console.log("Listening on port 3000!");
});

app.use(webpackDevMiddleware(compiler, {
  lazy: true,
  filename: "bundle.js" // Same as `output.filename` in most cases.
}));

* webpack-dev-server  //默认8080
* webpack-dev-server --port 8088
* webpack-dev-server --inline //改变代码之后，自动刷新浏览器
* webpack-dev-server --hot //热重载（局部更改）

devServer:{
    port:8088,
    inline:true
}

"scripts":{
    "dev":"webpack-dev-server --port 8088 --inline --hot"
}

$ run npm dev

resolve:{
    "extensions":['','.js','.css','.json']
}

moudule:{
    loaders:[
        {
            test:/\.js$/,
            loader:'babel',
            exclude:/node_moudules/
        }
    ]
},
babel:{
    "presets":['es2015']
}

{
    "presets":["es2015"]
}

{
    "presets":[
        ["es2015"],
        ["react"]
    ]
}

https://cn.vuejs.org/
https://vuejs.org/
https://cn.vuejs.org/v2/api/

<div id="app">
    {{ message }}
</div>

var exampleData = {
    message: 'Hello World!'
}

new Vue({
    el: '#app',
    data: exampleData
})

var vm = new Vue({
  // 选项
})

<h1 v-if="age >= 25">Age: {{ age }}</h1>

<h1 v-show="age >= 25">Age: {{ age }}</h1>

<h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>

<ul>
    <li v-for="value in json">
        {{value}} {{$index}} {{$key}}
    </li>
     <li v-for="(k,v) in json">
        {{k}} {{v}} {{$index}} {{$key}}
    </li>
</ul>

<img v-bind:src="{{url}} alt=""/>"//后台不会报错误，不绑定后台会报错，界面不影响

.astyle{ color:red}
.bstyle{ background-color:bule}
<script>
    new Vue(){
        data:{
            a:"astyle",
            b:"bstyle"
        }
    }
</script>
<div id="box">
    <strong :class="[a,b]">测试文字</strong>
</div>

<div id="box">
    <strong :class="{astyle:true,bstyle:a}">测试文字</strong>
</div>

new Vue(){
    data:{
       jsonData:{
            astyle:true,
            bstyle:false
       }
    }
}
<div id="box">
    <strong :class="jsonData">测试文字</strong>
</div>

<strong :style="color:red">文字</strong>

new Vue(){
    data:{
        astyle:{color:'red'},
        bstyle:{backgroudColor:'blue'}
    }
}
<div id="box">
    <strong :style="[astyle,bstyle]]">测试文字</strong>
</div>

new Vue(){
    data:{
        jsonData:{
            color:'red',
            backgroudColor:'blue'
        }
    }
}
<div id="box">
    <strong :style="jsonData">测试文字</strong>
</div>

<script>
new Vue(){
    methods:{
        show:function(){alert(124);}
    }
}
</script>

<input type="button" value="弹框" v-on:click="show()"

<input v-model="message.trim" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<input v-on:keyup.13="submit">

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

* 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：{{msg}} 数据更新模版变化
* {{*msg}} 只绑定一次
* {{{msg}}}  HTML转义，html语法会翻译

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
});

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

在运行 vm.fullName = 'John Doe' 时， setter 会被调用

{{msg|filterA 参数|filterB 参数|...}}

* {{'welcome'|uppercase}}
* {{'welcome'|lowercase}}
* {{'welcome'|capitalize}}
* {{'welcome'|currency}}
* {{'welcome'|currency "$"}}    //传参
* {{ message | filterA('arg1', arg2) }}  //穿参

methods:{
    getFun:function(){
        this.$http.get("a.txt").then(function(res){
            console.log(res.data);
        },function(res){
            console.log(res.status);
        });
    },
    //传递参数
    get2Fun:function(){
        this.$http.get("a.php",{a:1,b:2}}).then(function(res){
            console.log(res.data);
        },function(res){
            console.log(res.status);
        });
    }
}

methods:{
    postFun:function(){
        this.$http.post("a.php",{a:1,b:2},{emulateJSON:true}).then(function(res){
            console.log(res.data);
        },function(res){
            console.log(res.status);
        });
    }
}

methods:{
    postFun:function(){
        this.$http.jsonp(
            "https://www.baidu....",
            {a:1},
            {jsonp:''cb''}//callback 名字
        )
        .then(function(res){
                console.log(res.data);
            },function(res){
                console.log(res.status);
            }
        );
    }
}

Vue.component('my-component', {
  // 选项
})

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

Vue.component('child', {
  // 声明 props
  props: ['myMessage'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.myMessage” 这样使用
  template: '<span>{{ myMessage }}</span>'
})

<child my-message="hello!"></child>   //传入属性值

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

<!-- 无效,试图在父组件模板内将一个指令绑定到子组件的属性/方法 -->
<child-component v-show="someChildProperty"></child-component>

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<div v-show="someChildProperty">Child</div>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序

* 如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文
* 如果参数字符串以“./”开头，则表示加载的是一个位于相对路径的模块文件
* 如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块或者一个位于各级node_modules目录的已安装模块
* 如果参数字符串不以“./“或”/“开头，而且是一个路径如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。
* 如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索
* 如果想得到require命令加载的确切文件名，使用require.resolve()方法

module.id 模块的识别符，通常是带有绝对路径的模块文件名。
module.filename 模块的文件名，带有绝对路径。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回一个对象，表示调用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值

// 删除指定模块的缓存
delete require.cache[moduleName];

// 删除所有模块的缓存
Object.keys(require.cache).forEach(function(key) {
  delete require.cache[key];
})

var middlewareAPI = {
  getState: store.getState,
  dispatch: (action) => dispatch(action)
};
chain = middlewares.map(middleware => middleware(middlewareAPI));

//applyMiddleware 函数陆续获得了三个参数
//第一个是 middlewares 数组，[mid1, mid2, mid3, ...]
//第二个 next 是 Redux 原生的 createStore
//最后一个是 reducer
let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null);

dispatch = compose(...chain)(store.dispatch);