在gulp中使用ES6

周國(guó)輝發(fā)布于2019-08-19 17:13 / 1558人閱讀

摘要：在版本里面增加了對(duì)的支持，因此我們可以直接在里面使用了。使用語法重寫首先，重命名為，這樣執(zhí)行前會(huì)自動(dòng)調(diào)用轉(zhuǎn)換文件。

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

升級(jí)gulp版本

首先要檢測(cè)一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上:

gulp -v

版本如下：

CLI version 3.9.0
Local version 3.9.0

若版本過低，我們可以通過以下方式進(jìn)行升級(jí)，這里將同時(shí)升級(jí)CLI版本和Local版本：

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

安裝babel

我們需要安裝babel-core及babel-preset-es2015來轉(zhuǎn)換ES6代碼：

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

然后，創(chuàng)建一個(gè).babelrc文件來使用es2015 preset：

touch .babelrc

寫入如下內(nèi)容：

{
  "presets": ["es2015"]
}

接下來就是使用ES6語法重寫gulpfile了。

使用ES6語法重寫gulpfile

首先，重命名gulpfile.js為gulpfile.babel.js，這樣gulp執(zhí)行前會(huì)自動(dòng)調(diào)用babel轉(zhuǎn)換文件。

mv gulpfile.js gulpfile.babel.js

然后在gulpfile.babel.js里面用ES6語法寫些內(nèi)容，如下：

"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/`));
});

然后執(zhí)行g(shù)ulp命令：

gulp less

這里和原來一樣，以前的命令怎么用現(xiàn)在還是怎么用!

GitHub源碼：using-es6-with-gulp

參考資料：

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

es6-features.org

云服務(wù)器 GPU云服務(wù)器在php中使用組件在VBScript中使用類 webrtc在webview中使用問題在瀏覽器中使用webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78301.html

相關(guān)文章

基于 Gulp + Browserify 構(gòu)建 ES6 環(huán)境下的自動(dòng)化前端項(xiàng)目

摘要：本文特此給大家介紹下如何使用配合來構(gòu)建基于的前端項(xiàng)目。最后，在目錄下會(huì)生成最終的項(xiàng)目文件。執(zhí)行單元測(cè)試本例中使用進(jìn)行單元測(cè)試。隨著React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構(gòu)建前端自動(dòng)化項(xiàng)目也隨之變得越來越重要。鑒于目前業(yè)界普遍更流行使用webpack來構(gòu)建es6(ECMAScript 2015)前端項(xiàng)目，網(wǎng)上的相關(guān)教程也比...

yuanxin 2019-08-19 18:05 評(píng)論0 收藏0
使用gulp 進(jìn)行ES6開發(fā)

摘要：已經(jīng)轉(zhuǎn)碼成了已經(jīng)轉(zhuǎn)碼成了合并壓縮并重命名的文件使用如果我們使用了中的，通過進(jìn)行模塊化開發(fā)，那么通過轉(zhuǎn)碼后，將被轉(zhuǎn)碼成符合規(guī)范的和等，但是瀏覽器還是不認(rèn)識(shí)，這時(shí)可以使用對(duì)代碼再次進(jìn)行構(gòu)建。一說起ES6，總會(huì)順帶看到webpack、babel、browserify還有一些認(rèn)都不認(rèn)識(shí)的blabla名詞，對(duì)于gulp才會(huì)一點(diǎn)點(diǎn)的我來說，內(nèi)心簡(jiǎn)直是崩潰的，上網(wǎng)查了一些文章，探索著用gulp搭起...

lauren_liuling 2019-08-19 17:31 評(píng)論0 收藏0
gulp + gulp-better-rollup + rollup 構(gòu)建 ES6 開發(fā)環(huán)境

摘要：地址構(gòu)建基礎(chǔ)的語法轉(zhuǎn)譯環(huán)境首先，安裝工具，命令如下安裝插件，由于需要作為依賴，因此，還要安裝模塊和和之間的無縫集成插件安裝核心插件安裝完成后，配置文件和文件，將這兩個(gè)文件放在項(xiàng)目根目錄下。 gulp + gulp-better-rollup + rollup 構(gòu)建 ES6 開發(fā)環(huán)境關(guān)于 Gulp 就不過多啰嗦了。常用的 js 模塊打包工具主要有 webpack、rollup 和 br...

XBaron 2019-08-23 17:12 評(píng)論0 收藏0
[譯] 用 ES6 構(gòu)建新一代可復(fù)用 JS 模塊

摘要：我們已經(jīng)運(yùn)用了的一些閃亮的新特性，那么如何才能轉(zhuǎn)化為的代碼呢首先，我們需要通過來安裝在全局安裝會(huì)提供我們一個(gè)命令行工具。你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應(yīng)該從哪開始，或者如何開始？不止你一個(gè)人這樣！我已經(jīng)花了一年半的時(shí)間去解決這個(gè)幸福的難題。在這段時(shí)間里 JavaScript 工具鏈中有幾個(gè)令人興奮的突破。這些突破讓我們可以用ES6書寫完全的JS模塊，而不會(huì)為...

phpmatt 2019-08-19 17:35 評(píng)論0 收藏0
React 、 ES6 - 介紹（第一部分）

摘要：下一步我們將結(jié)果輸出到文件。這是我們用編寫的第一個(gè)非常簡(jiǎn)單的組建。使用將創(chuàng)建的組建導(dǎo)出以便在其它地方能夠正常導(dǎo)入使用。這是React和ECMAScript6結(jié)合使用系列文章的第一篇。本文出自從零到壹全棧部落下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定（第三部分） ES6中Reac...

pingink 2019-08-20 17:59 評(píng)論0 收藏0