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就可以了