在gulp中使用ES6

周國輝發布于2019-08-19 17:13 / 1497人閱讀

摘要：在版本里面增加了對的支持，因此我們可以直接在里面使用了。使用語法重寫首先，重命名為，這樣執行前會自動調用轉換文件。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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