下面是gulp的配置文件,gulp具体使用点击查看

首先全局安装下
cnpm install gulp -g

gulpfile.js  gulp配置文件

var gulp = require("gulp"),
babel = require("gulp-babel"),
handleErrors = require('./src/util/handleErrors'); // 转译Es6
gulp.task('Es6',function(){
return gulp.src('src/js/*js')
.pipe(babel({presets: ['es2015']}))
.on('error', handleErrors)//报错提醒
.pipe(gulp.dest('dist/js/'));
})
gulp.task('action', ['Es6']); //先运行 gulp.task("watchEs6",function(){ //检测有变化就进行编译
gulp.watch("src/js/*js",['Es6'])
}) gulp.task('default', ['watchEs6','action']); //运行

package.json文件

{
"scripts": {
"test": "gulp"//可通过cnpm run test 运行 复制过去请把这段注释删除,否者会报错
},

  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-notify": "^3.0.0"
  }

}

guulp配置编译ES6的更多相关文章

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

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

  2. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  3. vue 2.0 无法编译ES6语法

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

  4. 使用babel编译es6

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

  5. webpack4 系列教程(二): 编译 ES6

    今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...

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

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

  7. gulp 编译es6 探究

    1.gulp配置: var gulp = require('gulp') var fs = require("fs") var babelify = require('babeli ...

  8. webpack如何编译ES6打包

    前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...

  9. sublime text 3 快捷键大全以及配置编译环境

    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...

随机推荐

  1. extjs错误,看到红色才能让自己记住知识点

    1.Cannot call method 'getColumnCount' of undefined Hi, maybe you use colModel before rendering.Notic ...

  2. nodejs(三)Buffer module & Byte Order

    一.目录 ➤ Understanding why you need buffers in Node ➤ Creating a buffer from a string ➤ Converting a b ...

  3. js-jquery-SweetAlert2【一】使用

    概述:SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种 ...

  4. HTML5-CSS3-JavaScript(4)

    CSS3中 变形与动画相关属性 CSS3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能.CSS3的变形功能可以对HTML组件执行位移.旋转. ...

  5. [py][mx]django添加后台课程机构页数据-图片上传设置

    分析下课程页前台部分 机构类别-目前机构库中没有这个字段,需要追加下 所在地区 xadmin可以手动添加 课程机构 涉及到机构封面图, 即图片上传media设置, 也需要在xadmin里手动添加几条 ...

  6. session超时时间设置

    在Tomcat的web.xml文件中修改如下标签 <session-config> <session-timeout>10</session-timeout> &l ...

  7. Linux环境下解压rar文件

    可以用unrar命令解压rar后缀的文件 unrar e test.rar 解压文件到当前目录 unrar x test.rar /path/to/extract unrar l test.rar 查 ...

  8. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  9. Java序列化总结

    什么是序列化? 序列化是将对象的状态信息转化为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后可以通过存储区中读取或反序列化对象的状态重新创建对象. 为什么要序 ...

  10. 机器学习理论基础学习16---高斯网络(GN)

    一.高斯网络(高斯图模型)总体介绍 概率图模型分为三种:贝叶斯网络,马尔科夫随机场以及高斯网络:而高斯网络又可以根据有向无向细分为高斯贝叶斯网络和高斯马尔科夫随机场 二.高斯贝叶斯网络 1.高斯贝叶斯 ...