感觉和webpack的步骤差不多
首先安装gulp:参考上一篇
安装完之后
在当前目录下打开cmd
执行:npm init
创建package.json文件
执行:
cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm)
这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel
执行:
cnpm install gulp-babel --save-dev
编译ES6还需要@babel/core @babel/preset-env
执行:
cnpm install @babel/core --save-dev cnpm install @babel/preset-env --save-dev
在当前目录下新建gulpfile.js的文件,文件内容如下↓
//1.这个gulp对象就可以配合插件来进行构建工作. const gulp = require('gulp'); //2.引入gulp-uglify模块.返回的是1个函数. const uglify = require('gulp-uglify'); //3.引入babel const babel = require('gulp-babel'); gulp.task('babeljs', async function() { gulp.src("src/**/*.js") .pipe(babel({ presets: ['@babel/env'] }))//es6转es5 .pipe(uglify()) .pipe(gulp.dest('dist')) });
这时候我们就可以开始打包压缩并编译es6语法的js了
执行:gulp babejs
ok!编译完成,对比一下编译前后的代码,例子↓
前:
后:
我们可以看到代码已经压缩,同时也混淆编译成es5了
good
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。