gulp配置es6转es5

一、新建项目

项目结构如下：

/app
-- /js
-- /css
/dist
-- /js
-- /css
-- index.html
gulpfile.js

我们的代码在 /app 目录下开发，转码、合并、压缩完之后保存在 /dist 下。

二、配置环境

（1） 初始化 npm

首先进入根目录，初始化项目

npm init

（2） 安装 gulp及其依赖

//安装gulp
npm install gulp --save-dev

//安装ES6转码器，ES6代码转为ES5代码
npm install gulp-babel babel-preset-es2015 babel-core --save-dev

//其他工具
npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

gulp-rename
重命名文件
gulp-concat
合并文件
gulp-uglify
压缩js文件
gulp-cssnano
压缩css文件
browserify
让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码
vinyl-source-stream
将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流

至此环境已经搭建好了。接下来我们需要配置gulp，让我们的工作更有效率。

三、配置 gulp

在根目录创建gulpfile.js进行配置

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// 编译并压缩js
gulp.task('convertJS', function(){
  return gulp.src('app/js/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

// 合并并压缩css
gulp.task('convertCSS', function(){
  return gulp.src('app/css/*.css')
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(rename(function(path){
      path.basename += '.min';
    }))
    .pipe(gulp.dest('dist/css'));
})

// 监视文件变化，自动执行任务
gulp.task('watch', function(){
  gulp.watch('app/css/*.css', ['convertCSS']);
  gulp.watch('app/js/*.js', ['convertJS', 'browserify']);
})

// browserify
gulp.task("browserify", function () {
    var b = browserify({
        entries: "dist/js/app.js"
    });

    return b.bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist/js"));
});

gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

通过 watch，我们可以在保存完代码之后，让gulp自动帮我们将代码构建一遍，而不用自己再敲一遍命令。

开始 gulp

gulp start

使用时直接引入bundle.js就可以了