1.全局安装gulp
输入npm install gulp -g
命令,然后用 gulp -v
查看是否安装完成;
2.新建package.json文件
进入你的本地项目(我的是F:\shijiebei\apps\Apps.Web),输入npm init
命令,其中 name, version, description必填,其他无所谓,填完后保存,在testgulp项目下就会生成package.json文件;
3.项目内安装gulp
用npm install gulp --save-dev
或 npm install --save-dev gulp
命令(卸载的话将前面的命令中install换成uninstall即可);安装完后,在package.json里能看到具体版本信息。
4.项目内安装gulp插件
5.在项目根路径创建文件 .babelrc
{
"presets": ["es2015"]
}
6.全局安装babel-cli,
npm install --global babel-cli
7.在项目里安装babel-core,
npm install babel-core --save-dev
8.在项目根路径创建文件 gulpfile.js文件
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("Webapp/Scripts/*.js")// ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("Webapp/dist")); //转换成 ES5 存放的路径
});
9.运执行 gulp
gulp default
10.因为是git版本控制工具,所以在.gitignore文件里面添加要忽略的文件
# 忽略前台的gulp文件
/apps/Apps.Web/node_modules
/apps/Apps.Web/.babelrc
/apps/Apps.Web/gulpfile.js
/apps/Apps.Web/package.json
/apps/Apps.Web/package-lock.json