写gulp遇到的ES6问题详解

前言

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。最近复习一下gulp一些基本的写法，在写了一些简单的uglify,rename,concat,clean的处理之后，发现都还记得这些基本语法。然后无意间就想在demo中写下export function会变成怎样，结果发现gulp并不支持直接的es6语法，而且提示的错误也让人模棱两可。

events.js:182
 throw er; // Unhandled 'error' event
 ^
GulpUglifyError: unable to minify JavaScript

这着实让我头疼了一会，百度后才明白这是解析es6语法错误。

于是按照网上说的安装了gulp-babel,然后配置一个.babelrc的文件，再根据报错提示安装了@babel/core，结果发现编译是不报错了，但是编辑结果后的文件还是出不来。

gulp.task('miniJS', function(){
		 gulp.src(['demo.js', 'demo2.js'])
		 	.pipe(concat('demoFile.js'))
			.pipe(babel())
			.pipe(gulp.dest('./finalFile/'))
})

后来索性直接去了gulp-babel官网看，才明白3个月之前gulp-babel进行了更新，而我更新的是最新的gulp-babel包,而我搜索到的解决方法都是很早之前的，自然无法匹配。

官网提示方法：

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

所以gulp-babel版本为8.0.0的只要安装如图的包就好了：

"@babel/core": "^7.1.6",
 "gulp-babel": "^8.0.0",
"@babel/preset-env": "^7.1.6",

这个 @babel/preset-env  包就算没有安装也并不会报错确实是坑，安装好需要的包后根据官网给的样例：

.pipe(babel({
   presets: ['@babel/env']
  }))

同时需要去除掉创建的.babelrc文件，好像两者会有冲突，.babelrc文件存在的同时导致不会输出编译后的文件。这样一来export关键字就有用武之地了，但是在es6中

function demoFunc(){
 //something
}
export demoFunc;

这段代码是生效的，但是babel()好像认定是个解析不出的代码，不会解析输出文件，不知道是什么问题，我也处于懵逼中。

换成如下的方式是可以的：

export function demo(){
	console.log('this is the first gulp demo');
}
 export var num = {};

这样一来uglify就可以对es6进行解析了：

.pipe(babel({
	presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('file'))

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JS中使用gulp实现压缩文件及浏览器热加载功能

    JS中使用gulp实现压缩文件及浏览器热加载功能

    gulp类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安

  • gulp安装以及打包合并的方法教程

    gulp安装以及打包合并的方法教程

    前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 安装.打包合并 1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=h

  • 简单谈谈gulp-changed插件

    前言 gulp-changed插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道.这样做的好处时,只处理修改后的文件,减少后续程序的执行时间. 根据官方给出的例子: const SRC = 'src/*.js'; const DEST = 'dist'; gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST)) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ )

  • nodejs实现简单的gulp打包

    最近换了家新公司,由于是创业公司,项目基本从零开始搭建.工作几年,也没想过写点什么技术性的东西,今天突然心血来潮,哦当然,我这个人总是特别容易心血来潮,不定想干点啥,不说废话了,毕竟上班呢,开小差也不太好.忙了一个月,项目初见雏形,也基本可以1.0上线了,趁着等文案的时间,简单写点gulp打包的东西,等明儿有空再来一篇详细的,再有空再来个webpack的,哎呀,这个有空也不知道是啥时候,莫怪,好像又废话了几句.stop,stop. 从头儿来吧,首先创建一个package.json文件,就npm

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

  • 写gulp遇到的ES6问题详解

    前言 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.最近复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之后,发现都还记得这些基本语法.然后无意间就想在demo中写下export function会变成怎样,结果发现gulp并不支持直接的es6语法,而且提示的错误也让人模棱两可. events.js:182 throw er; // Unhandled 'error' event ^ GulpUg

  • Spring Cloud 覆写远端的配置属性实例详解

    Spring Cloud 覆写远端的配置属性实例详解

    应用的配置源通常都是远端的Config Server服务器,默认情况下,本地的配置优先级低于远端配置仓库.如果想实现本地应用的系统变量和config文件覆盖远端仓库中的属性值,可以通过如下设置: spring: cloud: config: allowOverride: true overrideNone: true overrideSystemProperties: false overrideNone:当allowOverride为true时,overrideNone设置为true,外部的配

  • 使用jquery-easyui的布局layout写后台管理页面的代码详解

    使用jquery-easyui的布局layout写后台管理页面的代码详解

    先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/themes/default/easyui.css" rel="external nofollow" rel="external nofollow"

  • Java实现手写线程池实例并测试详解

    前言 在之前的文章中介绍过线程池的核心原理,在一次面试中面试官让手写线程池,这块知识忘记的差不多了,因此本篇文章做一个回顾. 希望能够加深自己的印象以及帮助到其他的小伙伴儿们 在线程池核心原理篇介绍过线程池的核心原理,今天来模拟线程池和工作队列的流程,以及编写代码和测试类进行测试.下面附下之前线程池的核心流程: 在线程池核心原理的源码中,涉及到了一系列的流程,包括线程池队列数量是否已满,运用什么样的拒绝策略等.在我们手写线程池的代码中,不需要考虑那么多因素,只需要模拟简单的情景和过程,因此整体来

  • Es6 写的文件import 起来解决方案详解

    Es6 写的文件import 起来解决方案详解

    这段时间,学习了一点关于es6新规范的知识,然后心血来潮,想尝试一下用ES6编写的代码在浏览器中跑起来. 说干就干,先说下我的实现步骤(没想到有坑!) 把ES6代码转译成ES5; html文件引入转译后的ES5; 然后在浏览器环境中运行; 在node环境中运行; 然后下面是我的一些目录结构,大致预览一下. src,es6开发目录 dist,es5生产目录 test,一个测试目录 然后,看一下我的ES6开发的一些js是什么样子. file        file2      app   test

  • Laravel利用gulp如何构建前端资源详解

    Laravel利用gulp如何构建前端资源详解

    什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 高效:通过利用Node.js强大的流,不需要

  • Java中避免写嵌套if样式的代码详解

    前言 Optional的代码相对更加简洁,当代码量较大时,我们很容易忘记进行null判定,但是使用Optional类则会避免这类问题. 下面这是一个嵌套的 if 判断,业务逻辑是从 httpRequst 中获取 X-Auth-Token 的值.逻辑是如果 header中有值则从 header 中取值否则从 cookie 中取值,取到值后调用一个 http 远程接口 获取用户信息,获取不到则报"获取用户信息失败",如果 token 都不存在则直接返回 httpRespons 为 401-

  • C++利用链表写一个简单的栈实例详解

    C++中其实有stack的模板类.功能更为强大. 自己写一个栈能让我们对栈这种数据结构更加熟悉.这个栈有一个不足之处就是里面存放的元素类型只能为int. #include <iostream> using namespace std; class Stack { private: struct Node { int data; Node *next; }; Node *head; Node *p; int length; public: Stack() { head = NULL; lengt

  • Gulp实现静态网页模块化的方法详解

    前言 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决了.再然后,产品经理看了几遍后突然说顶部的某块需要改改设计...突然感觉好尴尬~~(心里是万马奔腾~),然后呢?然后就期待下一次的万马奔腾!!! 虽然类似问题的解决方案很多,但是纯前端,不用各种框架的情况下,一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成.虽然在体验上也许会

随机推荐