使用gulp实现最基础的js/css压缩、ES6转ES5功能

前提

请先安装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转换等其它需求。