gulp使用ES6

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了gulp使用ES6脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

更新到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/

脚本宝典总结

以上是脚本宝典为你收集整理的gulp使用ES6全部内容,希望文章能够帮你解决gulp使用ES6所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。