gulp使用ES6

rayliao

更新到gulp 3.9版本后,我们现在可以在gulpfile里使用ES6(或者叫ES2015)了。

首先需要确定gulp本地版本和命令行的gulp版本为3.9,打开命令行,输入以下命令检查你的版本:

gulp -v

然后应该返回:

CLI version 3.9.0
Local version 3.9.0

如果你的版本号低于3.9,在package.json文件里面更新你的gulp,然后运行下面的更新命令:

npm install gulp && npm install gulp -g

创建ES6 gulpfile

使用ES6,你需要安装Babel(确保你有Babel 6),在你项目作为依赖,且需要es2015的插件作为前置。

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

安装好了之后,需要创建一个.babelrc配置文件,用于es2015的设置,添加下面的代码到文件中:

{
    "presets": ["es2015"]
}

然后需要让gulp使用Babel,我们需要把gulpfile.js重命名为gulpfile.babel.js:

mv "gulpfile.js" "gulpfile.babel.js"

现在可以通过Babel使用ES6啦,一个典型的使用es6新特性的gulp任务例子:

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';

const dirs = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dirs.src}/app.scss`,
  dest: `${dirs.dest}/styles/`
};

gulp.task('styles', () => {
  return gulp.src(paths.src)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.dest));
});

以上。
ps: 不会翻译的说。

原文:https://markgoodyear.com/2015/06/using-es6-with-gulp/

阅读 3.3k

以梦为码
以梦为码

前端渣滓

3.1k 声望
0 粉丝
0 条评论
推荐阅读
Github ssh的连接问题
{代码...} 解决办法:在.ssh/config的host配置加上 {代码...}

rayliao阅读 3k评论 2

深入理解JavaScript——原型
这篇文章将尝试回答这些问题:原型是什么为什么要有原型prototype 和 __proto__ 有什么区别原型链又是什么原型是如何实现继承的原型和原型链的关系如何概述首先,JavaScript 是基于原型继承(Prototypal inherita...

山头人汉波6阅读 1.8k

停止像这样使用 "async/await",改用原版
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智3阅读 1.4k评论 7

🌞 深入剖析 JavaScript 闭包
一个函数和对其周围状态的引用捆绑在一起,这样的组合就是闭包.通俗的说: 一个内层函数可以访问外层函数的作用域 就叫 闭包。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。闭包的形...

程序员海军3阅读 957评论 1

深入理解JavaScript——拷贝的秘密
前文JavaScript由什么组成中讲述了JavaScript 的数据类型分为基本类型和引用类型,而区分两则的依据是基本类型是”轻量“的,它存在栈内存中,而引用类型比较重,它存在堆内存中。所以当基本类型拷贝时,能直接拷贝...

山头人汉波6阅读 632

深入理解JavaScript——闭包
网络中有各种各样说闭包的文章,有些浅尝辄止,有些 CV 党,又有些只讲一部分。于我而言,要想了解闭包,需要掌握词法环境(或者是 ES 中的变量对象) 、执行上下文与调用栈、 (词法)作用域等等

山头人汉波4阅读 1.1k

深入理解JavaScript——循环都来这儿
JavaScript 中有各种循环,如 for ,for(reverse),for...in,for...of,forEach,map 等,这些循环各有什么特点呢?

山头人汉波3阅读 306

前端渣滓

3.1k 声望
48 粉丝
宣传栏