使用gulp 進行ES6開發

lauren_liuling 發布于2019-08-19 17:31 / 1219人閱讀

摘要：已經轉碼成了已經轉碼成了合并壓縮并重命名的文件使用如果我們使用了中的，通過進行模塊化開發，那么通過轉碼后，將被轉碼成符合規范的和等，但是瀏覽器還是不認識，這時可以使用對代碼再次進行構建。

一說起ES6，總會順帶看到webpack、babel、browserify還有一些認都不認識的blabla名詞，對于gulp才會一點點的我來說，內心簡直是崩潰的，上網查了一些文章，探索著用gulp搭起一個ES6的開發模式，總之先一邊學ES6一邊寫吧。。然后再讓這個流程更加。。高級。

開始

ES6有很多新特性讓人忍不住想去嘗試，然而各種瀏覽器的支持程度還不足以讓我們直接在瀏覽器上執行ES6的代碼，好在babel可以幫助我們將ES6代碼轉碼成ES5，再利用bowserify的幫助，我們就可以盡情體驗ES6帶來的愉悅了。P.S. 構建工具使用的是gulp。

目的

制定一個流程之前還是先得想好我們想讓這個流程是一個什么樣子。

首先，開發代碼和部署代碼是分開的，比如我們在/app目錄下開發，然后通過gulp構建之后，代碼將存放在 /dist 目錄下。也就是說打開 /dist 目錄下的文件，是可以直接在瀏覽器上運行的。

那么我們可以約定這個流程如下：

1. 開發

在app目錄下開發，這時 /js 目錄下是ES6的代碼。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
package.json

2. 構建

使用gulp將js轉碼成ES5并壓縮，將css合并并壓縮。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已經轉碼成了ES5
---- util.js // 已經轉碼成了ES5
-- /css
---- all.min.css // base.css + app.css 合并、壓縮并重命名的文件
-- index.html
gulpfile.js
package.json

3. 使用 bowserify

如果我們使用了ES6中的 module，通過 import、export 進行模塊化開發，那么通過babel轉碼后， import 、 export 將被轉碼成符合CMD規范的 require 和 exports 等，但是瀏覽器還是不認識，這時可以使用 bowserify 對代碼再次進行構建。產生文件為 bundle.js

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已經轉碼成了ES5
---- util.js // 已經轉碼成了ES5
---- bundle.js // 實際引用的js文件
-- /css
---- all.min.css // base.css + app.css 合并、壓縮并重命名的文件
-- index.html
gulpfile.js
package.json

所以一開始 index.html 中引用的js文件和css文件就是 bundle.js 和 all.min.css

確定好流程后，就開始搭建開發環境吧。

一、新建項目

項目結構如下：

/app
-- /js
-- /css
/dist
-- /js
-- /css
-- index.html
gulpfile.js

我們的代碼在 /app 目錄下開發，轉碼、合并、壓縮完之后保存在 /dist 下。

二、配置環境 1）初始化 npm

首先進入根目錄，初始化項目

$ npm init

2）安裝 gulp

$ npm install gulp --save-dev

3）安裝 gulp-babel

Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。

命令：

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

其中babel -preset-es2015 是ES2015轉碼規則，如果代碼中含有es7的內容，可以繼續安裝ES7不同階段語法提案的轉碼規則

（摘自阮一峰老師的ECMAScript 6入門）

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

4）安裝其他gulp工具

以下是根據流程所需要安裝的全部工具

$ npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

gulp-rename
重命名文件

gulp-concat
合并文件

gulp-uglify
壓縮js文件

gulp-cssnano
壓縮css文件

browserify
讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼

vinyl-source-stream
將Browserify的bundle()的輸出轉換為Gulp可用的vinyl（一種虛擬文件格式）流

至此環境已經搭建好了。接下來我們需要配置gulp，讓我們的工作更有效率。

三、配置 gulp

打開 gulpfile.js，編輯代碼如下

const gulp = require("gulp");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const cssnano = require("gulp-cssnano");
const concat = require("gulp-concat");
const browserify = require("browserify");
const source = require("vinyl-source-stream");

// 編譯并壓縮js
gulp.task("convertJS", function(){
  return gulp.src("app/js/*.js")
    .pipe(babel({
      presets: ["es2015"]
    }))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
})

// 合并并壓縮css
gulp.task("convertCSS", function(){
  return gulp.src("app/css/*.css")
    .pipe(concat("app.css"))
    .pipe(cssnano())
    .pipe(rename(function(path){
      path.basename += ".min";
    }))
    .pipe(gulp.dest("dist/css"));
})

// 監視文件變化，自動執行任務
gulp.task("watch", function(){
  gulp.watch("app/css/*.css", ["convertCSS"]);
  gulp.watch("app/js/*.js", ["convertJS", "browserify"]);
})

// browserify
gulp.task("browserify", function () {
    var b = browserify({
        entries: "dist/js/app.js"
    });

    return b.bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist/js"));
});

gulp.task("start", ["convertJS", "convertCSS", "browserify", "watch"]);

通過 watch，我們可以在保存完代碼之后，讓gulp自動幫我們將代碼構建一遍，而不用自己再敲一遍命令。

開始 gulp

$ gulp start

現在就開始ES6開發之旅吧

云服務器 GPU云服務器如何進行區塊鏈開發怎樣進行小程序開發如何使用云服務器進行分配如何使用云服務器進行游戲

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78600.html

gulp-work-flow 前端工作流原來可以這么簡單

摘要：話不多說，今天的主題是使用打造傳統項目的前端工作流。是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。這意味著，你可以用的方式編寫程序，又不用擔心現有環境是否支持。概述最近前端一直是一個火熱的話題，前端技術棧也是伴隨著nodejs的出現而更替的飛快，導致大部分前端開發者曾一度迷茫在這各種技術選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 評論0 收藏0
基于 Gulp + Browserify 構建 ES6 環境下的自動化前端項目

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

yuanxin 2019-08-19 18:05 評論0 收藏0
使用webpack 進行ES6開發

摘要：年前摸索著寫了一個使用進行開發，今天再摸索著學習一下吧。。一些題外話使用的初衷其實是想用。這里使用了一個叫的加載器，在使用進行開發里面有介紹過，我們都是使用對風格的代碼進行轉換，所以在里面同樣使用了轉碼規則。年前摸索著寫了一個使用gulp 進行ES6開發，今天再摸索著學習一下webpack吧。。一些題外話使用 webpack 的初衷其實是想用 React。學習 React 的...

yvonne 2019-08-19 17:37 評論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
React 、 ES6 - 介紹（第一部分）

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

pingink 2019-08-20 17:59 評論0 收藏0