1.在对应的目录安装:
如果没有安装gulp,先安装gulp
//全局安装gulpnpm install -g gulp//项目中安装gulpnpm install --save-dev gulp 如果已经安装gulp,可无视上面直接安装下面.npm install gulp-babel --save-devnpm install @babel/core@^7.0.0 --save-devnpm install babel-preset-env --save-dev 2.在项目目录新建文件.babelrc { "presets": ["env"]} 3.如果没有gulpfile.js,新建这个文件,复制下面的代码:// 获取 gulpvar gulp = require('gulp');// 获取babel模块var babel = require('gulp-babel'); /*这里的babal是任务名,可以修改为其他turn ,change 都行,执行的时候在命令行输入 gulp turn 或者 gulp change就行了*/gulp.task("babel", function () { return gulp.src("./src/*.js")// ES6 源码存放的路径 .pipe(babel()) .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径}); 4.在命令行输入 gulp babel 就能将es6转成es5啦 下面是例子:
一.例子的目录
package.json 的内容
{ "devDependencies": { "@babel/core": "^7.3.4", "@babel/preset-es2015": "^7.0.0-beta.53", "gulp": "3.9.1", "gulp-babel": "^8.0.0", "gulp-clean-css": "^4.0.0", "gulp-htmlmin": "^5.0.1", "gulp-uglify": "^3.0.2", "pump": "^3.0.0" }} .babelrc 文件的内容
{ "presets": ["env"]} gulpfile.js 的文件内容：
var gulp = require('gulp');var cleanCSS = require('gulp-clean-css');var htmlmin = require('gulp-htmlmin');var uglify = require('gulp-uglify');var pump = require('pump');var babel = require('gulp-babel');var kBuildDir = process.env.BUILD_DEST || 'build';var cwd = __dirname;gulp.task('default', ['babel','js','css','html']);gulp.task('css', () => { const regs = [`${kBuildDir}/**/*.css`, `!${kBuildDir}/**/*-min.css`]; return gulp.src(regs, { base: '.' }) .pipe(cleanCSS()) .pipe(gulp.dest(cwd));});gulp.task('babel', () => { const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`]; return gulp.src(regs2,{base:'.'}) .pipe(babel()).on('error',function(e){console.log(e);}) .pipe(gulp.dest(cwd));});gulp.task('js', () => { const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`]; return gulp.src(regs2,{base:'.'}) .pipe(uglify()).on('error',function(e){console.log(e);}) .pipe(gulp.dest(cwd));});gulp.task('html', () => { const regs = [`${kBuildDir}/**/*.html`, `!${kBuildDir}/**/*-min.html`]; return gulp.src(regs, { base: '.' }) .pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true, minifyCSS: true })) .pipe(gulp.dest(cwd));}); 在项目根目录可单个执行：gulp babel,gulp js。也可以执行执行gulp，直接执行方式会使用default命令，即会将default命令列表中的命令顺序执行。
gulpfile.js里面有个模块需要手动安装一下：
npm install gulp-clean-cssnpm install gulp-htmlminnpm install gulp-uglifynpm install pumpnpm install gulp-babel
要先安装node.js,安装完之后在demo的目录里输入npm init 看不到没关系,无脑回车就好了