gulp 编译es6 探究
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 探究的更多相关文章
- gulp 编译es6 react 教程 案例 配置
1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel') ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- guulp配置编译ES6
下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js gulp配置文件 var gulp = require(&quo ...
- 使用gulp 进行ES6开发
使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
随机推荐
- 贪吃蛇(c语言实现)
总结出以下几点: 1.需要多次被包含的头文件里不能定义全局变量,否则会报错“重定义” 2.char *strncpy(char *dest, const char *src, int n), 把src ...
- git忽略已提交的文件或目录
项目中的某个文件或目录已经被commit,并push到远程服务器server了. 这时发现要忽略该文件或目录,在.gitignore文件里面添加规则已经不起作用了.因为.gitignore只对从来没有 ...
- php 过滤器filter_var验证邮箱/url/ip等
验证邮箱.url或者ip,除了使用正则外,也可以使用内置的函数库过滤器filter来完成这些功能. filter_var (PHP 5 >= 5.2.0, PHP 7)filter_var — ...
- JFrame包含的容器(JRootPane)
JFrame对象创建后,此对象包含JRootPane类型的容器.JRootPane 下有GlassPane, 和 LayeredPane,LayeredPane下又有ContentPane , ...
- Jmeter --- 分布式测试
在使用Jmeter进行性能测试时,如果并发数比较大(比如最近项目需要支持1000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter提供的分布式测试的功能. 一.Jmeter分 ...
- php结合phantomjs实现网页截屏、抓取js渲染的页面
首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...
- MySQL存储过程-->通过游标遍历和异常处理迁移数据到历史表
-- 大表数据迁移,每天凌晨1点到5点执行,执行间隔时间10分钟,迁移旧数据到历史表. DELIMITER $$ USE `dbx`$$ DROP PROCEDURE IF EXISTS `pro_x ...
- Debian下Netbeans编辑器字体锯齿现象
第一步:到你netbeans安装目录下的etc目录下,找到netbeans.conf文件,打开准备编辑:第二步:在netbeans_default_options后面加上-J-Dawt.useSyst ...
- 【Centos7裁剪】
#!/bin/sh rootdir=`pwd` rm -rf ${rootdir}/centos* KERNEL_DIR=${rootdir}/kernel ROOTFS_DIR=${rootdir} ...
- Hadoop概念学习系列之谈hadoop/spark里分别是如何实现容错性?(四十二)
Hadoop使用数据复制来实现容错性(I/O高) Spark使用RDD数据存储模型来实现容错性. RDD是只读的.分区记录的集合.如果一个RDD的一个分区丢失,RDD含有如何重建这个分区的相关信息. ...