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. python中in,not in,比较运算符,格式化输出,编码

    一,python中的in,和not in python中in的作用是检测或查找,例如: c = ‘你好大号胡覅但是啊飞碟说’ b = ‘你好’ print(b in c ) 结果: True c = ...

  2. 我发起了一个用 .Net 编写的 源代码管理工具 开源项目 SourceKit

    发起这个 项目 的 起因 是 GitHub . Github 的 使用技能 俨然已经成了 一项新技术 , 这不是 工具 的 本意 . 我用过的 源代码 管理工具 不多,  SVN 我觉得不错 . 常用 ...

  3. 一个 CPU 核 开多少个 线程 比较合适 ?

    一个 CPU 核 开多少个 线程 比较合适 ? 这是一个 线程池 的 问题 . 我之前也 反对 过 线程池, 因为我认为 线程池 影响了 对 用户 的 实时响应性 . 我也认为, 分时 (对 CPU ...

  4. ML(5)——神经网络3(随机初始化与梯度检验)

    随机初始化 在线性回归和逻辑回归中,使用梯度下降法之前,将θ设置为0向量,有时会习惯性的将神经网络中的权重全部初始化为0,然而这在神经网络中并不适用. 以简单的三层神经网络为例,将全部权重都设置为0, ...

  5. python一些东西

    assert repr() >>> a ['d', 'c', 'c', 'f', 'a', 'a', 'b', 'c', 'd'] >>> sorted(a) [' ...

  6. composer 安装yii2 The package is not available in a stable-enough version解决办法

    错误 Potential causes: - A typo in the package name - The package is not available in a stable-enough ...

  7. java-线程(runoob.com)

    参考链接: https://www.cnblogs.com/wxd0108/p/5479442.html https://www.cnblogs.com/dolphin0520/p/3920373.h ...

  8. nginx http 正向代理

    打开\nginx-1.12.2\conf\nginx.conf, 在http{      } ,大括号内加入 http { #............................. #...... ...

  9. RAMOS_XP制作教程

    RAMOS_XP制作教程1.为了防止做系统时出现意外,用Bootice把C盘MBR修改为Grub4dos,这样子系统如果失败,可以进入PE重做. 2.进入PE格式化C盘,格式化的时候勾选启用NTFS压 ...

  10. HTTP是什么?,GET与POST区别?

    HTTP是什么? 超文本传输协议(HTTP),目的是保证客户端与服务器之间的通信. 工作方式是客户端与服务器之间的请求-应答协议. web浏览器可能是客户端,计算机上的网络应用程序也可能作为服务器端. ...