前提

请先安装 node 和 babel，并准备一个普通的 web 项目

全局安装 gulp3.9.0

4.x 不兼容 3.x，平时使用建议直接安装 3.9

npm install -g gulp@3.9.0

检查版本

gulp -v

在项目目录下安装 gulp

npm install gulp@3.9.0 --save-dev

安装插件

压缩 js

npm install gulp-uglify --save-dev

压缩 css

npm install gulp-clean-css --save-dev

重命名

npm install gulp-rename --save-dev

es6 to es5

注意此处要根据情况替换，根据 gulp-babel 文档，如果你的 babel –version 是 6.x，请如下所示安装 gulp-babel@7

npm install gulp-babel@7 babel-core babel-preset-es2015 --save-dev

如果 babel 版本是 7.x，请运行：

npm install gulp-babel @babel/core @babel-preset-es2015 --save-dev

在根目录创建.babelrc 文件

{"presets": ["es2015"]
}

在根目录创建 gulpfile.js，根据注释配置路径

// 配置
var gulp = require('gulp');
var uglify = require('gulp-uglify'); //js
var cleanCSS = require('gulp-clean-css'); //css
var rename = require("gulp-rename"); // 重命名
var babel = require("gulp-babel"); //ES6 转 ES5

gulp.task('default', ['auto']);

gulp.task('jscompress', function() {return gulp.src('dist/*.js') // 转 es5 之后的 js 目录
        .pipe(rename({suffix: '.min'})) // 重命名配置
        .pipe(uglify())
        .pipe(gulp.dest('dist/js')); // 输出的文件夹
});

gulp.task('csscompress', function() {return  gulp.src('css/*.css') //css 文件地址
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});

// ES6 转化为 ES5
gulp.task("es62es5", function () {return gulp.src("js/*.js") //es6 文件地址
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

// 在命令行使用 gulp auto 启动监听
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行
    gulp.watch('dist/*.js', ['es62es5']);
    gulp.watch('js/*.js', ['jscompress']);
    gulp.watch('css/*.css', ['csscompress']);
});

命令行执行

gulp csscompress // 仅压缩 css
gulp jscompress // 仅压缩 js
gulp es62es5 // 仅将 es6 转为 es5
gulp // 实时监听修改，并执行上面三个命令 

答疑

全局安装和本地安装的区别

本地安装会生成一个依赖文件夹和 package 文件，项目如果在服务器上最好还是本地安装，下载项目的人可以一键 npm install

仅在本地调试的话可以只全局安装。

一开始我的项目是在 c 盘，执行本地安装命令后没有生成 node_modules 文件夹，但模块却可以 require 到。经查阅后总结如下：

• require 命令的规则是自内而外，如果在当前目录下没有找到需要的依赖包会到父级目录下继续找，直到找到当前盘符根目录，还未找到则报错
• 而 npm 全局安装的模块默认是安装在 C:UsersAdministratorAppDataRoamingnpm，c 盘项目即使没有本地安装依赖仍然可以 require 到模块

这样就可以解释为什么我的 C 盘项目没安装上本地依赖却可以 require 到模块，以及我猜测项目之所以生成不了 node_modules 文件是因为 npm 的一些规则，建议将项目放在其他盘符中，规避这个问题。

–save-dev 和 –save 的区别

–save-dev 安装的是开发阶段要使用的本地依赖

–save 安装的是发布版本也能用的本地依赖

此处我们使用的是压缩代码的 gulp，项目发布用不到，所以使用 –save-dev

gulp-babel 所需要的各个依赖分别是什么意思

逐一解释：

• babel-core

  如果需要调用 Babel 的 API 则必装

• babel-preset-es2015

  转换使用的预设规则，将 es6 转为 es5，很多人喜欢用 babel-preset-env，关于两者的区别请自行查阅，记住修改规则的同时也要修改.babelrc 的配置

相关文档

超详细的 Node 中 require 第三方包规则

npm –save-dev –save 的区别

npm 官网文档

babel 官网文档

gulp 中文文档

总结

这只是最基础的压缩配置，可以无脑配，但建议配置使用完毕后再看看文档深入了解，毕竟实际使用中还有 less 转换等其它需求。