讓咱們開始用es6來寫代碼--gulp構建es6

想構建一個前端自動化環境，來處理image，css，js（es6，jsx）的處理和保存刷新，讓jser專一寫代碼

我當初選擇gulp，可是接觸到了es6和react後又在gulp加入了gulp-babel, babel-preset-es2015和gulp-react。一路不少坑，這裏總結一下。

A):首先是gulp來處理es6
先裝nodejs，以後經過npm裝gulp, gulp-babel, babel-preset-es2015, gulp-webpack（ADM模塊調用時會用到）

npm install -g gulp
npm init
npm install --save-dev gulp gulp-babel babel-preset-es2015 gulp-webpack

B):而後寫gulpfile.js

var gulp=require("gulp"),
  babel = require("gulp-babel"),
  es2015 = require("babel-preset-es2015"),
  webpack = require("gulp-webpack");

gulp.task("default",function(){
  gulp.src("./js/es6/*.es6")
    .pipe(babel({presets:[es2015]}))
    .pipe(gulp.dest("./js"))//es6轉js必須在webpack以前，不然webpack找不到要包裝的js會報錯
    .pipe(webpack({//babel編譯import會轉成require，webpack再包裝如下代碼讓代碼裏支持require
      output:{
        filename:"all.js",
      },
      stats:{
        colors:true
      }
    }))
    .pipe(gulp.dest("./js"));//包裝好的js目錄

});

到這裏構建工具就完成了待下面的es6編寫完成執行gulp便可。

C):寫es6嘍
animal.es6

class Animal{
  constructor(){
    console.log("==constructor animal==");
  }
  sayHello(){
    console.log("==sayHello animal==");
  }
}

export default Animal;//這個必須，不然require到的模塊將會是空Object，webpack裏導出模塊實際上是(module.exports = Animal)

dog.es6

import Animal from "./animal"//導入模塊，實際上是var Animal = require("./animal");與export想對應出現
class Dog extends Animal{
  constructor(){
    super();//執行一次父類的構造，不然會報錯
    console.log("==constructor dog==");
  }
}

var dog = new Dog();
dog.sayHello();

index.html

<script src="all.js"></script>

在chrome的console下會看到輸出結果

總結：gulp+webpack+es6，這裏咱們只用到了webpack的AMD的一個功能，gulp和webpack都有壓縮合並的功能，有興趣的看下面的網站進一步學習：
gulp學習:http://www.gulpjs.com.cn/docs/getting-st...
webpack學習：http://webpack.github.io/docs/
webpack配置：http://www.tuicool.com/articles/uQfmqie
babel學習：http://babeljs.io/docs/setup/

以後會在此基礎上介紹讓React的jsx用上es6。。。。。盡請期待。。。。。