想构建一个前端自动化环境,来处理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。。。。。尽请期待。。。。。