1.gulp配置:

var gulp = require('gulp')
var fs = require("fs")
var babelify = require('babelify')
var browserify = require('browserify')
var rename=require('gulp-rename')
var uglifyjs = require('gulp-uglifyjs') gulp.task('es2015', () => {
browserify("./src/main.js")
.transform(["babelify", {
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0'],
plugins: ['transform-decorators-legacy']
}])
.bundle()
.pipe(fs.createWriteStream("bundle.js"));
})
gulp.task('uglifyjs',()=>{
gulp.src('./bundle.js')
.pipe(uglifyjs())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('./dist'))
})
gulp.task('default', () => {
gulp.watch('./src/**/*.js', () => {
gulp.run('es2015')
})
})

     这里编译es6的要点工具是babel和browserify,browserify是一个打包module模块的工具,能够将import之类的module打包进来到文件中。另外browserify还配置了babel模块来编译es6,这样就可以高度实现对es6的编译和打包。

gulp 编译es6 探究的更多相关文章

  1. gulp 编译es6 react 教程 案例 配置

    1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel') ...

  2. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  3. gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn

    感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...

  4. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  5. guulp配置编译ES6

    下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js  gulp配置文件 var gulp = require(&quo ...

  6. 使用gulp 进行ES6开发

    使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...

  7. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  8. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  9. 使用gulp编译sass

    之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...

随机推荐

  1. Office 2010 打开文件后所有的格式成了时间的解决方法

    最新不知道什么原因,每一个 Excel 文件打开后,时需的数据都成了时间格式. 而且改都改不了,改了后第二次打开又成了这个样子. 最后找到解决方法. 如下动画,将 [$F400] 数据格式删除就可以. ...

  2. java 中 heap(堆)和stack(栈)的区别

    总结在Java里面Heap和Stack分别存储数据的不同. 区别项 Heap(堆) Stack(栈) JVM中的功能 内存数据区 内存指令区 存储数据 对象实例(注1) 基本数据类型, 指令代码,常量 ...

  3. NET设计模式 第二部分 结构性模式(11):外观模式(Façade Pattern)

    外观模式(Façade Pattern) ——.NET设计模式系列之十二 Terrylee,2006年3月 概述 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着 ...

  4. iis上的aps.net1.1程序池如何添加

    http://www.jb51.net/article/84668.htm iis上的aps.net1.1 的程序池是默认有的,如果不小心将其删掉,或者改成其他版本,将没办法在iis工具上还原或新建一 ...

  5. 在Centos7上安装配置ss-libev Proxifier

    http://note.youdao.com/noteshare?id=6f768652c33a64d6b8935eb08b10a213 servier:ss-libev client:ss+Prox ...

  6. 解决新版本Vivado打开老工程IP锁住的问题

    解决新版本Vivado打开老工程IP锁住的问题 1.生成IP核的状态报告 Tools -> Report -> Report IP Status 2.点击Upgrade Selected ...

  7. 关于SQL Server 无法生成 FRunCM 线程(不完全)

    在五一的前一天,准备启动数据库完成我剩下的项目代码时,数据库配置管理器出现了一个让人蛋疼的问题sqlserv配置管理器出现请求失败或服务器未及时响应关于这个问题的处理方法,经过我两个小时的百度,网上对 ...

  8. 源代码安装Apache、Mysql、PHP

    源代码软件的优点:     获得最新版,能及时修复bug:     能自行修改和定制: 源代码打包形式:     .tar.gz和.tar.bz2格式居多: 完整性校验:     md5sum校验工具 ...

  9. ubuntu 16.04 安装VS CODE时 此软件来自第三方且可能包含非自由组件

    先安装gdebi: sudo apt-get install gdebi 然后执行: sudo apt install ./vscode.deb

  10. 胖子哥的大数据之路(7)- 传统企业切入核心or外围

    一.引言 昨天和一个做互联网大数据(零售行业)的朋友交流,关于大数据传统企业实施的切入点产生了争执,主要围绕两个问题进行了深入的探讨: 问题1:对于一个传统企业而言什么是核心业务,什么是外围业务? 问 ...