前提请先安装node和babel，准备一个普通的web项目全局安装gulp3.9.04.x。它与3.x不兼容。建议直接使用安装3.9npminstall-ggulp@3.9.0查看版本gulp-v在项目目录下安装gulpnpminstallgulp@3.9.0--save-devinstallplugincompressionjsnpminstallgulp-uglify--save-devcompressioncssnpminstallgulp-clean-css--save-devrenamenpminstallgulp-rename--save-deves6toes5注意这里要根据情况更换。根据gulp-babel文档，如果你的babel--version是6.x，请安装gulp-babel@7npminstallgulp-babel@7babel-corebabel-preset-es2015--save-dev如果是babel版本是7.x，运行：npminstallgulp-babel@babel/core@babel-preset-es2015--save-dev在根目录创建一个.babelrc文件{"presets":["es2015"]}创建一个gulpfile根目录下的.js，根据注释配置路径//configurevargulp=require('gulp');varuglify=require('gulp-uglify');//jsvarcleanCSS=require('gulp-clean-css');//cssvarrename=require("gulp-rename");//重命名varbabel=require("gulp-babel");//ES6转ES5gulp.task('default',['auto']);gulp.task('jscompress',function(){returngulp.src('dist/*.js')//之后的JS目录转换为es5.pipe(rename({suffix:'.min'}))//rename配置.pipe(uglify()).pipe(gulp.dest('dist/js'));//输出文件夹});gulp.task('csscompress',function(){returngulp.src('css/*.css')//css文件地址.pipe(rename({suffix:'.min'})).pipe(cleanCSS()).pipe(gulp.dest('dist/css'));});//ES6转ES5gulp.task("es62es5",function(){returngulp.src("js/*.js")//es6文件address.pipe(babel()).pipe(gulp.dest("dist"));});//在命令行使用gulpauto开始监听gulp.task('auto',function(){//监听文件修改，当文件被修改时，执行gulp.watch('dist/*.js',['es62es5']);gulp.watch('js/*.js',['jscompress']);gulp.watch('css/*.css',['csscompress']);});命令行执行gulpcsscompress//只压缩cssgulpjscompress//只压缩jsgulpes62es5//只将es6转es5gulp//实时监控修改，执行以上三个命令，回答关于全局安装和本地安装区别的问题安装会生成依赖文件夹和包文件。如果项目安装在服务器本地，最好在本地安装。下载项目的人可以使用一键npminstall在本地进行调试。如果只是为了本地调试，只能全局安装。一开始，我的项目在c盘。执行本地安装命令后，并没有生成node_modules文件夹，但是可以require模块。经过查阅，总结如下：require命令的规则是从里到外。如果在当前目录下没有找到需要的依赖包，则会继续在父目录中查找，直到找到当前盘符的根目录。如果没有找到，会报错，npm全局安装的模块默认安装在C:UsersAdministratorAppDataRoamingnpm。即使c盘项目没有本地安装依赖项，它仍然可以需要模块。这就可以解释为什么我的C盘项目没有安装本地依赖却可以requiremodules，我猜测项目不能生成node_modules文件的原因是因为npm的一些规则。建议将项目放在另一个盘符中，以避免出现此问题。--save-dev和--save的区别--save-dev安装开发阶段要用到的本地依赖--save安装在release版本中也可以使用的本地依赖这里我们使用gulp进行压缩不需要代码，项目发布，那么使用--save-devgulp-babel所需的每个依赖项的含义是什么？规则，es6转es5，很多人喜欢用babel-preset-env，请参考两者的区别，记得修改规则还要修改.babelrc相关文档的配置超详细需要第三方在Node包中rulesnpm--save-dev--savenpm官网文档的区别babel官网文档gulp中文文档汇总这只是最基本的压缩配置，不用脑子也可以配置，但是建议看完文档之后配置和使用进行深入了解，毕竟在实际使用中，还有转换少等其他需求。
