脚本宝典收集整理的这篇文章主要介绍了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: 不会翻译的说。
以上是脚本宝典为你收集整理的gulp使用ES6全部内容,希望文章能够帮你解决gulp使用ES6所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。