在gulp中使用ES6

周国辉发布于2019-08-19 17:13 / 1492人阅读

摘要：在版本里面增加了对的支持，因此我们可以直接在里面使用了。使用语法重写首先，重命名为，这样执行前会自动调用转换文件。

gulp在3.9版本里面增加了对babel的支持，因此我们可以直接在gulpfile里面使用ES6(ES2015)了。

升级gulp版本

首先要检测一下我们的gulp版本，确保CLI版本及Local版本都在3.9之上:

gulp -v

版本如下：

CLI version 3.9.0
Local version 3.9.0

若版本过低，我们可以通过以下方式进行升级，这里将同时升级CLI版本和Local版本：

npm install gulp -g && npm install gulp --save-dev

安装babel

我们需要安装babel-core及babel-preset-es2015来转换ES6代码：

npm install babel-core babel-preset-es2015 --save-dev

然后，创建一个.babelrc文件来使用es2015 preset：

touch .babelrc

写入如下内容：

{
  "presets": ["es2015"]
}

接下来就是使用ES6语法重写gulpfile了。

使用ES6语法重写gulpfile

首先，重命名gulpfile.js为gulpfile.babel.js，这样gulp执行前会自动调用babel转换文件。

mv gulpfile.js gulpfile.babel.js

然后在gulpfile.babel.js里面用ES6语法写些内容，如下：

"use strict";

import gulp from "gulp";
import less from "gulp-less";

const paths = {
  less: "less/",
  dest: "build/"
};

gulp.task("less", () => {
  gulp.src(`${paths.less}**/*.less`)
    .pipe(less())
    .pipe(gulp.dest(`${paths.dest}css/`));
});

然后执行gulp命令：

gulp less

这里和原来一样，以前的命令怎么用现在还是怎么用!

GitHub源码：using-es6-with-gulp

参考资料：

https://github.com/yeoman/generator-gulp-webapp/issues/356

es6-features.org

云服务器 GPU云服务器在php中使用组件在VBScript中使用类 webrtc在webview中使用问题在浏览器中使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78301.html

基于 Gulp + Browserify 构建 ES6 环境下的自动化前端项目

摘要：本文特此给大家介绍下如何使用配合来构建基于的前端项目。最后，在目录下会生成最终的项目文件。执行单元测试本例中使用进行单元测试。随着React、Angular2、Redux等前沿的前端框架越来越流行，使用webpack、gulp等工具构建前端自动化项目也随之变得越来越重要。鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目，网上的相关教程也比...

yuanxin 2019-08-19 18:05 评论0 收藏0
使用gulp 进行ES6开发

摘要：已经转码成了已经转码成了合并压缩并重命名的文件使用如果我们使用了中的，通过进行模块化开发，那么通过转码后，将被转码成符合规范的和等，但是浏览器还是不认识，这时可以使用对代码再次进行构建。一说起ES6，总会顺带看到webpack、babel、browserify还有一些认都不认识的blabla名词，对于gulp才会一点点的我来说，内心简直是崩溃的，上网查了一些文章，探索着用gulp搭起...

lauren_liuling 2019-08-19 17:31 评论0 收藏0
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

摘要：地址构建基础的语法转译环境首先，安装工具，命令如下安装插件，由于需要作为依赖，因此，还要安装模块和和之间的无缝集成插件安装核心插件安装完成后，配置文件和文件，将这两个文件放在项目根目录下。 gulp + gulp-better-rollup + rollup 构建 ES6 开发环境关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 br...

XBaron 2019-08-23 17:12 评论0 收藏0
[译] 用 ES6 构建新一代可复用 JS 模块

摘要：我们已经运用了的一些闪亮的新特性，那么如何才能转化为的代码呢首先，我们需要通过来安装在全局安装会提供我们一个命令行工具。你是不是也在为可以使用ES6的新特性而兴奋，却不太确定应该从哪开始，或者如何开始？不止你一个人这样！我已经花了一年半的时间去解决这个幸福的难题。在这段时间里 JavaScript 工具链中有几个令人兴奋的突破。这些突破让我们可以用ES6书写完全的JS模块，而不会为...

phpmatt 2019-08-19 17:35 评论0 收藏0
React 、 ES6 - 介绍（第一部分）

摘要：下一步我们将结果输出到文件。这是我们用编写的第一个非常简单的组建。使用将创建的组建导出以便在其它地方能够正常导入使用。这是React和ECMAScript6结合使用系列文章的第一篇。本文出自从零到壹全栈部落下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑定（第三部分） ES6中Reac...

pingink 2019-08-20 17:59 评论0 收藏0