資訊專欄INFORMATION COLUMN
摘要：已經(jīng)轉(zhuǎn)碼成了已經(jīng)轉(zhuǎn)碼成了合并壓縮并重命名的文件使用如果我們使用了中的，通過進(jìn)行模塊化開發(fā)，那么通過轉(zhuǎn)碼后，將被轉(zhuǎn)碼成符合規(guī)范的和等，但是瀏覽器還是不認(rèn)識，這時可以使用對代碼再次進(jìn)行構(gòu)建。
開始一說起ES6，總會順帶看到webpack、babel、browserify還有一些認(rèn)都不認(rèn)識的blabla名詞，對于gulp才會一點點的我來說，內(nèi)心簡直是崩潰的，上網(wǎng)查了一些文章，探索著用gulp搭起一個ES6的開發(fā)模式，總之先一邊學(xué)ES6一邊寫吧。。然后再讓這個流程更加。。高級。
ES6有很多新特性讓人忍不住想去嘗試，然而各種瀏覽器的支持程度還不足以讓我們直接在瀏覽器上執(zhí)行ES6的代碼，好在babel可以幫助我們將ES6代碼轉(zhuǎn)碼成ES5，再利用bowserify的幫助，我們就可以盡情體驗ES6帶來的愉悅了。P.S. 構(gòu)建工具使用的是gulp。
目的制定一個流程之前還是先得想好我們想讓這個流程是一個什么樣子。
首先，開發(fā)代碼和部署代碼是分開的，比如我們在/app目錄下開發(fā)，然后通過gulp構(gòu)建之后，代碼將存放在 /dist 目錄下。也就是說打開 /dist 目錄下的文件，是可以直接在瀏覽器上運行的。
那么我們可以約定這個流程如下：
1. 開發(fā)在app目錄下開發(fā)，這時 /js 目錄下是ES6的代碼。
/app -- /js ---- app.js ---- util.js -- /css ---- base.css ---- app.css /dist -- /js -- /css -- index.html gulpfile.js package.json2. 構(gòu)建
使用gulp將js轉(zhuǎn)碼成ES5并壓縮，將css合并并壓縮。
/app -- /js ---- app.js ---- util.js -- /css ---- base.css ---- app.css /dist -- /js ---- app.js // 已經(jīng)轉(zhuǎn)碼成了ES5 ---- util.js // 已經(jīng)轉(zhuǎn)碼成了ES5 -- /css ---- all.min.css // base.css + app.css 合并、壓縮并重命名的文件 -- index.html gulpfile.js package.json3. 使用 bowserify
如果我們使用了ES6中的 module，通過 import、export 進(jìn)行模塊化開發(fā)，那么通過babel轉(zhuǎn)碼后， import 、 export 將被轉(zhuǎn)碼成符合CMD規(guī)范的 require 和 exports 等，但是瀏覽器還是不認(rèn)識，這時可以使用 bowserify 對代碼再次進(jìn)行構(gòu)建。產(chǎn)生文件為 bundle.js
/app -- /js ---- app.js ---- util.js -- /css ---- base.css ---- app.css /dist -- /js ---- app.js // 已經(jīng)轉(zhuǎn)碼成了ES5 ---- util.js // 已經(jīng)轉(zhuǎn)碼成了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
確定好流程后，就開始搭建開發(fā)環(huán)境吧。
一、新建項目項目結(jié)構(gòu)如下：
/app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js
我們的代碼在 /app 目錄下開發(fā)，轉(zhuǎn)碼、合并、壓縮完之后保存在 /dist 下。
二、配置環(huán)境 1） 初始化 npm首先進(jìn)入根目錄，初始化項目
$ npm init2） 安裝 gulp
$ npm install gulp --save-dev3） 安裝 gulp-babel
Babel是一個廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
命令：
npm install --save-dev gulp-babel babel-preset-es2015
其中babel -preset-es2015 是ES2015轉(zhuǎn)碼規(guī)則，如果代碼中含有es7的內(nèi)容，可以繼續(xù)安裝ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則
（摘自阮一峰老師的ECMAScript 6入門）
# ES2015轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-es2015 # react轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-react # ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有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-34） 安裝其他gulp工具
以下是根據(jù)流程所需要安裝的全部工具
$ 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()的輸出轉(zhuǎn)換為Gulp可用的vinyl（一種虛擬文件格式）流
至此環(huán)境已經(jīng)搭建好了。接下來我們需要配置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"));
})
// 監(jiān)視文件變化，自動執(zhí)行任務(wù)
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自動幫我們將代碼構(gòu)建一遍，而不用自己再敲一遍命令。
開始 gulp
$ gulp start
現(xiàn)在就開始ES6開發(fā)之旅吧
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78600.html
摘要：話不多說，今天的主題是使用打造傳統(tǒng)項目的前端工作流。是一個廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。 概述 最近前端一直是一個火熱的話題，前端技術(shù)棧也是伴隨著nodejs的出現(xiàn)而更替的飛快，導(dǎo)致大部分前端開發(fā)者曾一度迷茫在這各種技術(shù)選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，F(xiàn)is3等...
摘要：本文特此給大家介紹下如何使用配合來構(gòu)建基于的前端項目。最后，在目錄下會生成最終的項目文件。執(zhí)行單元測試本例中使用進(jìn)行單元測試。 隨著React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構(gòu)建前端自動化項目也隨之變得越來越重要。鑒于目前業(yè)界普遍更流行使用webpack來構(gòu)建es6(ECMAScript 2015)前端項目，網(wǎng)上的相關(guān)教程也比...
摘要：年前摸索著寫了一個使用進(jìn)行開發(fā)，今天再摸索著學(xué)習(xí)一下吧。。一些題外話使用的初衷其實是想用。這里使用了一個叫的加載器，在使用進(jìn)行開發(fā)里面有介紹過，我們都是使用對風(fēng)格的代碼進(jìn)行轉(zhuǎn)換，所以在里面同樣使用了轉(zhuǎn)碼規(guī)則。 年前摸索著寫了一個 使用gulp 進(jìn)行ES6開發(fā) ，今天再摸索著學(xué)習(xí)一下webpack吧。。 一些題外話 使用 webpack 的初衷其實是想用 React。學(xué)習(xí) React 的...
摘要：地址構(gòu)建基礎(chǔ)的語法轉(zhuǎn)譯環(huán)境首先，安裝工具，命令如下安裝插件，由于需要作為依賴，因此，還要安裝模塊和和之間的無縫集成插件安裝核心插件安裝完成后，配置文件和文件，將這兩個文件放在項目根目錄下。 gulp + gulp-better-rollup + rollup 構(gòu)建 ES6 開發(fā)環(huán)境 關(guān)于 Gulp 就不過多啰嗦了。常用的 js 模塊打包工具主要有 webpack、rollup 和 br...
摘要：下一步我們將結(jié)果輸出到文件。這是我們用編寫的第一個非常簡單的組建。使用將創(chuàng)建的組建導(dǎo)出以便在其它地方能夠正常導(dǎo)入使用。 這是React和ECMAScript6結(jié)合使用系列文章的第一篇。 本文出自從零到壹全棧部落 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定（第三部分） ES6中Reac...
閱讀 3614·2021-11-23 09:51
閱讀 1487·2021-11-04 16:08
閱讀 3558·2021-09-02 09:54
閱讀 3624·2019-08-30 15:55
閱讀 2604·2019-08-30 15:54
閱讀 965·2019-08-29 16:30
閱讀 2053·2019-08-29 16:15
閱讀 2325·2019-08-29 14:05
