開發十年，就只剩下這套架構體系了！ >>>   

1.在對應的目錄安裝:

如果沒有安裝gulp,先安裝gulp

//全域性安裝gulp
npm install -g gulp
//專案中安裝gulp
npm install --save-dev gulp
 如果已經安裝gulp,可無視上面直接安裝下面.

npm install gulp-babel --save-dev
npm install @babel/core@^7.0.0 --save-dev
npm install babel-preset-env --save-dev
 2.在專案目錄新建檔案

.babelrc 

{
  "presets": ["env"]
}
 3.如果沒有gulpfile.js,新建這個檔案,複製下面的程式碼:

// 獲取 gulp
var 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-css
npm install gulp-htmlmin
npm install gulp-uglify
npm install pump
npm install gulp-babel

要先安裝node.js,安裝完之後在demo的目錄裡輸入npm init 看不到沒關係,