gulpもes2015で書くことができます。gulp 3.9.0以降でできるようです。

そんなにゴリゴリ記法を使うわけではないですが、最近babelを導入したついでにgulpもes2015で書いています。

Sassのコンパイルタスクを作ってみます。

1. gulp/sassのインストール
2. es2015で書いてみる
3. babel-preset-es2015
4. gulpfile.babel.js

gulp/sassのインストール

以下のコマンドを打ちます。

npm i gulp gulp-sass -D

es2015で書いてみる

es2015を使うとこんな感じで書けると思います。

import gulp from 'gulp'
import sass from 'gulp-sass'
const config = {
  dirs: {
    src: './src',
    dest: './dist'
  }
}
gulp.task('sass', () => {
  return gulp.src(`${config.dirs.src}/sass/!(_)*.{scss,sass}`)
    .pipe(sass())
    .pipe(gulp.dest(`${config.dirs.src}/css/`))
})

変数埋め込めるのとか地味に便利。いちいち＋で繋ぐ必要ない。

そして、パスの通りディレクトリを作り、Scssファイルにコードを書いて、以下コマンドを打ってみます。

gulp sass

するとエラーが出て止まってしまいます。どうもimportのところでこけてるみたいです。

importをやめたらとりあえずいけます。

const gulp = require('gulp')
const sass = require('gulp-sass')
const config = {
  dirs: {
    src: './src',
    dest: './dist'
  }
}
gulp.task('sass', () => {
  return gulp.src(`${config.dirs.src}/sass/!(_)*.{scss,sass}`)
    .pipe(sass())
    .pipe(gulp.dest(`${config.dirs.src}/css/`))
})

babel-preset-es2015

一応es2015の記法使えるんですが、中途半端な感じなのでbabel-preset-es2015をインストールします。

npm i babel-preset-es2015 -D

そしてプロジェクトファイル直下に.babelrcを作ります。

.babelrc

{
  "presets": ["es2015"]
}

これでもまだimportでこけます。

gulpfile.babel.js

最後にgulpfile.jsの名前をgulpfile.babel.jsに変更します。

そして再度以下コマンドを打ちます。

gulp sass

するとコンパイルできました！

babel取り入れたものを作ってるので参考までに

web-starter-kit