[ ES6 ] 三. 使用 ES6 来写gulp任务

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

在gulp 3.9 版本中,我可以使用ES6(现在叫ES2015)来编写我们的gulpfile文件。

首先,确保你的gulp 和 CLI 版本是最新的3.9 :

gulp -v

应该输出:

CLI version 3.9.0
Local version 3.9.0

如果你的版本是低于3.9的,我们使用下列命令更新至最新版本:

npm install gulp && npm install gulp -g

接下来就是将gulpfile.js 重命名为gulpfile.babel.js

现在就可以用ES6来写我们的gulpfile文件了:

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));
});

这里我们利用了ES6的模块系统箭头函数字符串模板和常量定义。更多ES6新特性请参考: http://es6-features.org/

来自: https://markgoodyear.com/2015/06/using-es6-with-gulp/

脚本宝典总结

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

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

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