资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/使用gulp 进行ES6开发

使用gulp 进行ES6开发

lauren_liuling / 1118人阅读

摘要：已经转码成了已经转码成了合并压缩并重命名的文件使用如果我们使用了中的，通过进行模块化开发，那么通过转码后，将被转码成符合规范的和等，但是浏览器还是不认识，这时可以使用对代码再次进行构建。

一说起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开发之旅吧

idc机房托管 专线服务 如何进行区块链开发 怎样进行小程序开发 如何使用云服务器进行分配 如何使用云服务器进行游戏

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

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

相关文章

  • gulp-work-flow 前端工作流原来可以这么简单

    摘要：话不多说，今天的主题是使用打造传统项目的前端工作流。是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。这意味着，你可以用的方式编写程序，又不用担心现有环境是否支持。 概述 最近前端一直是一个火热的话题，前端技术栈也是伴随着nodejs的出现而更替的飞快，导致大部分前端开发者曾一度迷茫在这各种技术选型上，比如前端自动化工具就有Grunt，Gulp，Webpack，Fis3等...

    weakish 评论0 收藏0

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

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

    yuanxin 评论0 收藏0

  • 使用webpack 进行ES6开发

    摘要：年前摸索着写了一个使用进行开发，今天再摸索着学习一下吧。。一些题外话使用的初衷其实是想用。这里使用了一个叫的加载器，在使用进行开发里面有介绍过，我们都是使用对风格的代码进行转换，所以在里面同样使用了转码规则。 年前摸索着写了一个 使用gulp 进行ES6开发 ，今天再摸索着学习一下webpack吧。。 一些题外话 使用 webpack 的初衷其实是想用 React。学习 React 的...

    yvonne 评论0 收藏0

  • gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

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

    XBaron 评论0 收藏0

  • React 、 ES6 - 介绍（第一部分）

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

    pingink 评论0 收藏0

发表评论

登陆后可评论

0条评论

lauren_liuling

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<