gulp4系での開発においてトラブったのでメモ。

問題と解決

問題

npx gulp sassを叩くと

[12:34:23] Failed to load external module @babel/register
[12:34:23] Requiring external module babel-register
[12:34:28] Using gulpfile ~\dir1\dir2\sample\gulpfile.babel.js
[12:34:28] Starting 'sass'...
[12:34:28] Plumber found unhandled error:
 Error in plugin "gulp-sass"
Message:
    src\sass\style.scss
Error: File to import not found or unreadable: modules/**/*.
        on line 3 of src/scss/style.scss
>> @import "hoge", "hogehoge", "hogehogehoge", "modules/**";
   ^

と怒られます。動かない。

解決方法

gulp-sass-globさんに*の存在を認識してもらうには他の読み込むファイル名並列してはいけないようです。

つまり、

style.scss

@charset "UTF-8";
@import "normalize";
@import "hoge", "hogehoge", "hogehogehoge", "modules/**";

ではなく

style.scss

@charset "UTF-8";
@import "normalize";
@import "hoge", "hogehoge", "hogehogehoge";
@import "modules/**"

こう！！！

これで解決。めでたしめでたし。

解説

環境

OS: Windows7
nodeJS: 8.11.2
npm: 6.1.0

モジュール

gulp: 4.0.0
gulp-sass: 4.0.1
gulp-sass-glob: 1.0.9

はしょっていますが、階層構造はこんなかんじです。

sample
  ├─ src/
  │  ├─ sass/
  │  │  ├─ modules/
  │  │  │     └─ *.scss
  │  │  └─ *.scss
  │  └─ ...
  │     
  ├─ temp/
  ├─ dist/
  │
  ├─ .node_modules/
  ├─ .babelrc
  ├─ gulp.babel.js
  ├─ package-lock.json
  └─ package.json

gulpfileはというと、こんなかんじ。

gulpfile.babel.js

import gulp from 'gulp';
import babel from 'gulp-babel';
import plumber from 'gulp-plumber';
import gulpSass from 'gulp-sass';
import sassGlob from 'gulp-sass-glob';
import autoprefixer from 'gulp-autoprefixer';

const paths = {
  styles: {
    src: 'src/sass/**/*.scss',
    test: 'temp/styles/',
    build: 'dist/styles/'
  },
  scripts: {
    src: 'src/js/**/*.js',
    test: 'temp/scripts/',
    build: 'dist/scripts/'
  }
};

function sass() {
  return gulp.src(paths.styles.src)
        .pipe(plumber())
        .pipe(sassGlob())
        .pipe(gulpSass({outputStyle: 'compressed'}))
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest('./temp/styles/'))
};
exports.sass = sass;

あとは先述のように、style.scss内で@importで読み込ませるときに並列させないように
気をつければOKでした :D

おまけ

npx gulpをコマンドプロンプトで叩くと
Failed to load external module @babel/registerと怒られるけど
そのあとにbabel-registerを読み込んでいるので無視しています。

gulpのバージョンを3.9に下げる以外にいい方法を知っている方がいればぜひコメントください。