「Gulp4」の記事 - Crieit

yarn 時に gifsicle で gifsicle pre-build test failed エラー

2021-11-28T17:45:22+09:00

数日前から yarn 時に gifsicle で gifsicle pre-build test failed エラーが出るようになってしまったので対処します。

あれこれ試しましたが、結論から言うと imagemin-gifsicle が依存している gifsicle の 5.0.0 だとダメなので、 resolution で 5.2.1 を指定すると良さそうです。

現象

    "devDependencies": {

        // 略

        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-svgo": "^9.0.0",

        // 略

    }

imagemin-gifsicle を使用しているプロジェクトで yarn したところ、以下のエラーで失敗するようになってしまいました。

warning Error running install script for optional dependency: "PATH\\TO\\PROJECT\\node_modules\\gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: PATH\\TO\\PROJECT\\node_modules\\gifsicle
Output:
Response code 404 (Not Found)
gifsicle pre-build test failed
compiling from source
Error: Command failed: C:\\WINDOWS\\system32\\cmd.exe /s /c \"autoreconf -ivf\"
'autoreconf' �́A�����R�}���h�܂��͊O���R�}���h�A
����\\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B


    at PATH\\TO\\PROJECT\\node_modules\\bin-build\\node_modules\\execa\\index.js:231:11
success Saved lockfile.

バージョンを上げても直後は特に問題なかったような気はするのですが、逐一キャッシュを削除したりしているわけではないので不明。

仕方ないので、色々ググりながら対応してみます。

対処 (失敗したものたち)

gisicle を足す

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "gifsicle": "6.1.0",            // 追加
        "imagemin-svgo": "^9.0.0",
        // 略
    }

変わらず。

逆にいっそ gulp-imagemin 以外全て削除

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        // 略
    }

変わらず。

コマンドプロンプトを管理者実行

gifsicle ありの状態で cmd.exe を管理者として実行→変わらず。

キャッシュ削除

> yarn cache clean
yarn cache v1.22.11
success Cleared cache.
Done in 450.56s.

変わらず。

hosts に Github 関係の名前解決を書き込む

>ping raw.githubusercontent.com

raw.githubusercontent.com [185.199.108.133]に ping を送信しています 32 バイトのデータ:
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58

185.199.108.133 の ping 統計:
    パケット数: 送信 = 2、受信 = 2、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
    最小 = 5ms、最大 = 5ms、平均 = 5ms

元々 raw.githubusercontent.com に ping はできていましたが、 hosts に次のように追記してみます。

52.74.223.119     github.com
192.30.253.119    gist.github.com
54.169.195.247    api.github.com
185.199.111.153   assets-cdn.github.com
151.101.76.133    raw.githubusercontent.com
151.101.76.133    gist.githubusercontent.com
151.101.76.133    cloud.githubusercontent.com
151.101.76.133    camo.githubusercontent.com
151.101.76.133    avatars0.githubusercontent.com
151.101.76.133    avatars1.githubusercontent.com
151.101.76.133    avatars2.githubusercontent.com
151.101.76.133    avatars3.githubusercontent.com
151.101.76.133    avatars4.githubusercontent.com
151.101.76.133    avatars5.githubusercontent.com
151.101.76.133    avatars6.githubusercontent.com
151.101.76.133    avatars7.githubusercontent.com
151.101.76.133    avatars8.githubusercontent.com

変わらず。

なお、ここまで次の issue にあった対処法。

Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c "autoreconf -ivf" · Issue #33 · imagemin/imagemin-gifsicle · GitHub

ネットワークを変更

違う場所に出かけて、ゲートウェイを変更してみました。

が、変わらず。

最小限構成で実験する

長丁場になりそうだったので最小限構成の package.json を作成して検証を続行。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  }
}

これでyarn。変わらず。

ちなみに yarn.lock の中身は次のような感じ。

gifsicle@^5.0.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.3.0.tgz#499713c6f1e89ebbc3630da3a74fdb4697913b4e"
  integrity sha512-FJTpgdj1Ow/FITB7SVza5HlzXa+/lqEY0tHQazAJbuAdvyJtkH4wIdsR2K414oaTwRXHFLLF+tYbipj+OpYg+Q==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

imagemin-gifsicle が依存している gifsicle のバージョンが悪いのではないか、と思い resolutions を追加することにしました。

resolutions を追加

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^6.1.0"
  }
}

すると、 yarn は通りました。

しかし、 6系は "Use native ESM" なので require を使用している現環境での使用は不可です。惜しい。

resolutions の指定を 5.3.0 にする

[email protected], gifsicle@^5.0.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-6.1.0.tgz#16194fe7d9420a539709eb065e7245eaf74de5a7"
  integrity sha512-tmnKbW2UQzoc/FTg2dq98sUaoGM1/CRQP+HtyeIMNLDlB8ijZbX7TKBCc2s5YJ8oXUZIxdqXH2rKXnCB0/Hg3w==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.1.1"

gifsicle - npmを確認したところ、11/26現在で 6.1.0 と並んで "3 days ago" となっている 5系最新の 5.3.0 があることが判明。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^5.3.0"
  }
}

しかしNG。

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

yep, this repo's 5.3.0 tag is missing, that makes the downloading process of bin-wrapper failed.

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

タグ付けをミスって生まれてしまったバージョンらしいので、これは使えないとのこと。なんて紛らわしい……。

resolutions の指定を 5.2.1 にする

{
    "name": "tmp",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
      "imagemin-gifsicle": "^7.0.0"
    },
    "resolutions": {
      "gifsicle": "5.2.1"
    }
}

package.json のチルダ(~) とキャレット(^) - Qiita

^5.2.1 とキャレットを付けると 5.2.1 <= version < 6.0.0 となってしまい、 5.3.0 に上がってしまうので 5.2.1 とキャレットを外して指定します。

[email protected], gifsicle@^5.0.0:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.2.1.tgz#efadab266a493ef0b4178e34597493349937369e"
  integrity sha512-9ewIQQCAnSmkU2DhuWafd1DdsgzAkKqIWnY+023xBLSiK9Az2TDUozWQW+SyRQgFMclbe6RQldUk/49TRO3Aqw==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

これでようやく通りました。処理も無事にできることを確認。

……思ったよりも手間取りました。

参考

gifsicle

package.json

package.json のチルダ(~) とキャレット(^) - Qiita

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる

2021-08-17T23:17:25+09:00

経緯

ある日、 package gardening をして Gulp を走らせたら

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

と怒られてしまいました。

$ gulp
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js from PATH\TO\PROJECT\DIRECTORY\gulp\tasks\imagemin.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\package.json.

今回は gulp-imagemin のスクリプトの中に起因するようなので、そちらに手を入れるのは避けたいところです。

さて、どうしたものか。

結論

結論から先にいうと、 gulp-imagemin をダウングレードすることで回避するしかなさそうです。

今回は 8.0.0 から既存の 7.1.0 にダウングレードします。

調査

"type": "module"

Node.js の ESModules

検索すると、 package.json にパラメータを追記する方法が出てきます。

{
    "engines": {
        "node": ">=16.0.0",
        "npm": ">=6.14.9"
    },
    "engineStrict": true,
    "prettier": {},
    "type": "module" // 追記
}

"type": "module" を追記する方法です。

しかし、この方法を採用する場合、既存の Gulpタスク全てを CommonJS (require) から ES Modules (import) に書き換える必要があります。

それはそれで既存スクリプトの書き換えが大変なことになってしまうので、この方法は今回は不採用。

公式リポジトリを覗く

そこで公式リポジトリを覗いてみます。

早速同じ内容の Issues が散見されます。そして回答では「リリースノートを見よ」とのこと。

Releases · sindresorhus/gulp-imagemin · GitHub

This package is now pure ESM. Please read this.

Releases · sindresorhus/gulp-imagemin · GitHub

最初からここを見ましょう、という話ではあるのですが。

Pure ESM package · GitHub

ご覧の通り、「8.0.0 からは ES Modules のパッケージになっていますよー」というアナウンス。

したがって、先の結論の通り CommonJS を使用したければダウングレードせよ、ということになります。是非もなし。

参考

gulp-sass を Node.js v16 環境に合わせて調整する

2021-07-05T20:32:23+09:00

Node.js の 16系を試そうとしたら gulp-sass, node-sass 周りでエラーが発生したので対処をまとめておきます。

経緯

まず前提として

Dart Sass で / を使った徐算が非推奨となった (代わりに math.div を使えとのこと)
- 参考: Dart Sass で DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. の警告が表示される - Ewig Leere(Lab2)
上述現象を回避するため、 sass のバージョンを 1.32.12 で固定していた

という事情があります。

現象

この状態で Node.js のバージョンを 16系に切り替えて yarn 。

error /home/node/app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /home/node/app/node_modules/node-sass
Output:
Building: /usr/local/bin/node /home/node/app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=

# 略

In file included from /home/node/.node-gyp/16.3.0/include/node/v8.h:30,
                 from /home/node/.node-gyp/16.3.0/include/node/node.h:63,
                 from ../../nan/nan.h:56,
                 from ../src/binding.cpp:1:
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h: In function 'void v8::internal::PerformCastCheck(T*)':
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: 'remove_cv_t' is not a member of 'std'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~~~
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: note: suggested alternative: 'remove_cv'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~
                                      remove_cv
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: error: 'remove_cv_t' is not a member of 'std'
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:38: note: suggested alternative: 'remove_cv'
             !std::is_same>::value>::Perform(data);
                                      ^~~~~~~
                                      remove_cv
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:50: error: template argument 2 is invalid
             !std::is_same>::value>::Perform(data);
                                                  ^
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:63: error: '::Perform' has not been declared
             !std::is_same>::value>::Perform(data);
                                                               ^~~
/home/node/.node-gyp/16.3.0/include/node/v8-internal.h:452:63: note: suggested alternative: 'herror'
             !std::is_same>::value>::Perform(data);
                                                               ^~~
                                                               herror
../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)':
../src/binding.cpp:284:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
                                                                                                  ^~~~~~~~
../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)':
../src/binding.cpp:320:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
     int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
                                                                                                  ^~~~~~~~
In file included from ../../nan/nan.h:56,
                 from ../src/binding.cpp:1:
../src/binding.cpp: At global scope:
/home/node/.node-gyp/16.3.0/include/node/node.h:806:43: warning: cast between incompatible function types from 'void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)' {aka 'void (*)(v8::Local)'} to 'node::addon_register_func' {aka 'void (*)(v8::Local, v8::Local, void*)'} [-Wcast-function-type]
       (node::addon_register_func) (regfunc),                          \
                                           ^
/home/node/.node-gyp/16.3.0/include/node/node.h:840:3: note: in expansion of macro 'NODE_MODULE_X'
   NODE_MODULE_X(modname, regfunc, NULL, 0)  // NOLINT (readability/null_usage)
   ^~~~~~~~~
../src/binding.cpp:358:1: note: in expansion of macro 'NODE_MODULE'
 NODE_MODULE(binding, RegisterModule);
 ^~~~~~~~~
make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
make: Leaving directory '/home/node/app/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/node/app/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Linux 5.10.25-linuxkit
gyp ERR! command "/usr/local/bin/node" "/home/node/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/node/app/node_modules/node-sass
gyp ERR! node -v v16.3.0

……滅茶苦茶怒られました (Docker内のLinux環境)。

ちなみに Windows環境だと yarn 時にはエラーにはなりませんが、 Gulpタスクを走らせた際に同様のエラーメッセージが表示されます。

対処1 (sass, gulp-sass のバージョンを上げる)

そこでまずは sass のバージョンを上げます。

ちなみに、 1.35.0以降では quietDeps: true のフラグを追加することで、冒頭の警告を非表示にできるようになったとのことなので、そもそもの問題は回避できるはずです。

    "devDependencies": {
        // 略
        "gulp-sass": "^4.1.0",
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "fibers": "^5.0.0",
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

これで yarn してみましたが、ダメ。

ふと gulp-sass を見てみると、いつの間にか 5.0.0 がリリースされているではありませんか。

    "devDependencies": {
        // 略
        "gulp-sass": "^5.0.0",        // 4.1.0 からアップデート
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "fibers": "^5.0.0",
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

そこで、 gulp-sass も上げます。これで yarn すると正常に完了。

安心して Gulpタスクを走らせると……

../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.

…別のエラーで怒られました。

対処2 (fibers を削除)

node.js - (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134 - Stack Overflow

検索すると上述のエラーは fibers が Node.js 16系に対応していないために発生している模様。

そのため、 fibers を削除します。

    "devDependencies": {
        // 略
        "gulp-sass": "^5.0.0",        // 4.1.0 からアップデート
        "sass": "1.35.1",             // 1.32.12 からアップデート
        "gulp-autoprefixer": "^7.0.1",
        // 略
    }

併せてタスクも書き換えます。

const sass          = require('gulp-sass');
sass.compiler       = require('sass');
//const Fiber         = require('fibers');

// 略

            .pipe(sass({
//                fiber: Fiber,
                outputStyle: 'compressed',
                quietDeps: true            // 警告回避のために追加
            }).on('error', sass.logError))

// 略

fibers 関係を削除。

これで yarn し直してタスクを再実行。

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

……別のエラーが発生しました。どうやら gulp-sass の Scssトランスパイラの指定方法が変わったようです。

対処3 (gulp-sass のScssトランスパイラ指定方法を変更)

const sass          = require('gulp-sass')(require('sass'));
//const Fiber         = require('fibers');

// 略

            .pipe(sass({
//                fiber: Fiber,
                outputStyle: 'compressed',
                quietDeps: true            // 警告回避のために追加
            }).on('error', sass.logError))

// 略

これでようやくタスクが正常に走るようになりました。

参考

Gulpタスクを動的に切り替える

2021-01-28T00:04:36+09:00

Gulpタスクも動的に切り替えたい、と考えました。ついでに require も動的にできないか、と。

検証

軽い気持ちで検証したら、これはすんなりできてしまったので結果のコードだけ載せておきます。

gulp/tasks/test.js

//testタスク
const test = (done) => {
    console.log('hoge');
    done();
};

module.exports = test;

コンソールに何かしらの文字列を出力する適当なタスクを作成します。

gulpfile.js

const { series, parallel } = require('gulp');
const task1                = require('./gulp/tasks/task1');
const task2                = require('./gulp/tasks/task2');

// dynamic import test
const taskFlag = false;
let testTask;
if (taskFlag) {
    testTask = require('./gulp/tasks/test');
    // test
    exports.test = testTask;
}

// build
const taskBuild = taskFlag ? parallel(task1, task2, testTask) : parallel(task1, task2);

// default
exports.default = series(taskBuild);

gulpfile.js にこのように書いてみました。

taskFlag により以下を切り替えます
- gulp/tasks/test.js を require するかどうか
- exports.test として exports するか
- 通常のタスク(他の task1, task2 のようなタスクと parallel で実行)の配列に加えるか否か

これで実行してみたところ、taskFlag が true の場合も false の場合もエラーにならずに、普通に処理できました。

require とか exports は普通に if文の中に入れられるのですね。

Webpack (webpack-stream) でエントリーポイントを動的に変更する

2021-01-27T00:00:53+09:00

Scss に続いて JS でも動的に読み込むファイルを切り替えたいと考えました。

今回の方法

ディレクトリ構造

サンプルとして、以下のようなディレクトリ構造にしたとします。

    /
   ├ dist/
   │   └ js/
   │      ├ app.min.js    // app.js からビルド
   │      └ parts.min.js  // parts/ ディレクトリ下のjsをバンドル
   └ src/
       └ js/
          ├ app.js
          │
          └ parts/
              ├ parts1.js // 単独
              ├ parts2.js // parts3.js に依存
              └ parts3.js

src/js/app.js: (存在すれば)常に出力、通常の処理
- dist/js/app.min.js にビルド
src/js/parts/ディレクトリ下: フラグによって動的に読み込むファイルを切り替える
- dist/js/parts.min.js にバンドル

状況的にはこのようにしたいと考えています。

webpack.config.js

以上を踏まえて webpack.config.js 。

const webpackTerser = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path          = require('path');
const glob          = require('glob');

const devFlag = true;

// dynamic import test
const partsPath = 'src/js/parts';
const flag = {
    parts1: true,
    parts2: true
};

const entry = () => {
    const entries = glob
        .sync(
            '**/*.js',
            {
                cwd: 'src/js',
                //ignore
                ignore: [
                    'parts/**/*.js',
                    '**/_*.js'
                ]
            }
        )
        .map(function (key) {
            return [key, path.resolve('src/js', key)];
        });
        //  `{ 'app.js': 'PATH/TO/PROJECT/src/js/app.js' }` のようなオブジェクトを entriesObj とする
        let entriesObj = Object.fromEntries(entries);
        // 以下、 parts に関する処理
        partsCount = 0;
        // flag の中で true になっている個数をカウント
        Object.keys(flag).forEach(function (index) {
            if (flag[index]) {
                partsCount++;
            }
        });
        if (partsCount > 0) {
            // flag の中で true になっている個数が少なくとも1つある場合は、 `parts.js` キーを entriesObj に追加
            entriesObj[`parts.js`] = [];
            // entriesObj の `parts.js` キー に配列で複数のファイル (parts1.js, parts2.js) を指定
            Object.keys(flag).forEach(function (index) {
                if (flag[index]) {
                    entriesObj[`parts.js`].push(path.resolve(partsPath, `${index}.js`));
                }
            });
        }
    return entriesObj;
};
const configs = {
    mode: development,
    entry: entry(),
    output: {
        filename: '[name]',
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                'dist/js/**/*.js'
            ],
        }),
    ],
    optimization: {
            minimizer: [
            new webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: false,
                    },
                },
            }),
        ],
    },
};

module.exports = configs;

エントリーポイントには glob.sync から始まる処理で指定
- src/js下の .js ファイルを { 'app.js': 'PATH/TO/PROJECT/src/js/app.js' } のようにキーはファイル名、値がファイルへのフルパス、となるようなオブジェクトを作っています
  - ignore で src/js/parts/下は最初は除外しています
  - 本題からは逸れますが _*.js で _ 始まりのファイルも ignore 指定しています
オブジェクト flag のキーと src/js/parts/下のファイル名を一致させている、という条件下でフラグの true or false によりエントリーポイントを変化させています
- 今回の出力は dist/js/parts.min.js でひとまとめにする前提にしています。 app.min.js の中には混ぜません
- そのため、エントリーポイントを { 'app.js': [ 'PATH/TO/PROJECT/src/js/app.js', 'PATH/TO/PROJECT/src/js/parts/parts1.js', ... ] } とするのではなく、 { 'app.js': 'PATH/TO/PROJECT/src/js/app.js', 'parts.js': [ 'PATH/TO/PROJECT/src/js/parts1.js', 'PATH/TO/PROJECT/src/js/parts/parts2.js', ... ] } となるように処理を加えました

Gulpタスク (JavaScriptに関する部分)

const { dest }      = require('gulp');
const plumber       = require('gulp-plumber');
const notify        = require('gulp-notify');
const rename        = require('gulp-rename');
const webpackStream = require('webpack-stream');
const webpackConfig = require('webpack.config');

const jsBuild = () => {
    return webpackStream(webpackConfig)
        .pipe(plumber({
            errorHandler: notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'jsLibBuild'
            })
        }))
        .pipe(rename((path) => {
            path.basename += '.min'
            path.extname = '.js'
        }))
        .pipe(dest('dist/js'));
};

module.exports = jsBuild;

これでひとまず意図した出力が得られました。

参考

gulp-sass から Scss を疑似的な動的読み込みを行う

2021-01-26T23:55:22+09:00

経緯

Scss で @import, @use, @forward のような他のファイルを読み込む機能は、 @ディレクティブ内では使用できないません。そのため、例えば以下のようなことができません。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}

あるフラグ変数(ここでは $flag ですが、実際はファイル中ではなく Gulp タスク内で管理)が true のときのみ parts1.scss を読み込む。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}
@else {
    @use "parts2.scss";
}

あるいは、フラグ変数の値によって読み込む Scss ファイルを切り替える。

この部分について、どうにかできないか(本当にやりたいのは最初の例ですが、代替案として2つ目の例でブランクの parts2.scss をダミーとして用意する方法を考える)、と。

対処

css - Sass dynamic import based on environment - Stack Overflow

色々検索した結果、 gulp-sass の includePaths オプションを使えばそれらしいことができそうだ、ということが分かりました。

今回はたまたま自分も gulp-sass を使用している前提で、しかも Scss 本体の変数ではなく Gulp タスク内で管理しているフラグによって、というのが希望だったのでこの形はぴったりでした (この方法でなければ、上記スレの上の方にあるように、フラグをいったん Scss ファイルに変数として出力し、それを読み込むことで伝播させようと考えていました)。

const { src, dest } = require('gulp');
const plumber       = require('gulp-plumber');
const notify        = require('gulp-notify');
const sass          =  require('gulp-sass');
sass.compiler = require('sass');
const Fiber = require('fibers');
const autoprefixer  = require('gulp-autoprefixer');

// dynamic import test
const flag = true;

// scssコンパイルタスク
const scss = () => {
    let opt = {
        fiber: Fiber,
        outputStyle: 'compressed'
    };
    // dynamic import test
    if (flag) {
        opt.includePaths = [
            `src/scss/parts/enable`
        ]
    }
    else {
        opt.includePaths = [
            `src/scss/parts/disable`
        ]
    }
    return src('src/scss/**/*.scss')
        .pipe(plumber({
            errorHandler: notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'scss'
            })
        }))
        .pipe(sass(opt).on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(dest('dist/css'));
};

module.exports = scss;

Scss のコンパイルタスクはこのような感じで。

src/
　└ scss/
      ├ .scssファイル やディレクトリ
      ├ import/
      │   └ _index.scss
      │
      └ parts/
          ├ disable/
          │    └ parts_hoge.scss
          └ enable/
               └ parts_hoge.scss

このようなディレクトリ構造で、 src/scss/import/_index.scss から src/scss/parts の中のenable または disable のどちらかの parts_hoge.scss を読み込む、とした場合。

// dynamic import test
@use "parts_hoge";

src/scss/import/_index.scss の記述はこれだけですが、 Scss のコンパイルタスクに記述されている変数 flag によって読み込む元のディレクトリの候補が src/scss/parts/enable または src/scss/parts/disable のどちらかに切り替わる、ということです。

あとは src/scss/parts/disable/parts_hoge.scss は中身のないブランクのファイルにしておけば、 flag が true の場合のみ css が当たる、ということになります。

出力される css の切り分けはできたので、とりあえずはこの方法でしょうかね。

参考

続・ Gulp 4 + Webpack 5 を試す (resolutions 使用)

2020-11-24T23:34:09+09:00

以前、Gulp 4 + Webpack 5 を試す ( 未完 / terser-webpack-plugin で TypeError: Cannot read property ‘javascript’ of undefined エラーになる)の記事で Gulp 4 + Webpack 5 の実験をしましたが、その続きです。

経緯

BackstopJS を試す (Error: Failed to launch the browser process! エラー発生→ puppeteer のバージョンを指定して解決)で package.json に resolutions を記述して Yarn で内部依存パッケージのバージョンを強制的に変更する手法を取りましたが、同様の手法が使えるのではないか、と思った次第です。

検証

package.json

```json:package.json
// 略
"devDependencies": {
// 略
"webpack": "^5.6.0",
"webpack-stream": "^6.1.1",
"terser-webpack-plugin": "^5.0.3",
// 略
},
"resolutions": {
"webpack": "^5.6.0"
},
// 略


上述のように `resolutions` で Webpack のバージョンを指定。

### gulp/tasks/js.js

`gulp/tasks/js.js` は前回のまま。

### webpack.config.js

`webpack.config.js` は source map のための設定を追加した以外はそのままです。

```javascript:webpack.config.js
const _         = require('./gulp/plugin');
const dir       = require('./gulp/dir');

const mode = () => {
    return process.env.DEV_MODE === 'dev' ? 'development' : 'production';
};
const modeFlag = () => {
    return process.env.DEV_MODE === 'dev' ? false : true;
};
const entry = () => {
    const entries = _.glob
        .sync(
            '**/*.js',
            {
                ignore: [
                    '_plugins/**'
                ],
                cwd: dir.src.js
            }
        )
        .map(function (key) {
            return [key, _.path.resolve(dir.src.js, key)];
        });
    return Object.fromEntries(entries)
};
const configs = {
    mode: mode(),
    entry: entry(),
    output: {
        filename: '[name]'
    },
    optimization: {
            minimizer: [
            new _.webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: modeFlag(),
                    },
                },
            }),
        ],
    }
};
if (process.env.DEV_MODE === 'dev') {      // 追加
    configs.devtool = 'inline-source-map';
}

module.exports = configs;

これで yarn restart などすると

$ gulp

# 略

[hh:ii:ss] asset app.js 226 KiB [emitted] [minimized] (name: app.js) 1 related asset

webpack 5.6.0 compiled successfully
[hh:ii:ss] Finished 'jsBuild' after 20 s

動きました！

後々は resolutions なしでも動くようにしたいですが、ひとまず動く形になったのでメモしておきます。

参考

Yarn の reasolutions

yarn: resolutions で依存の依存のバージョンを指定する - nju33

Gulp 4 + Webpack 5 を試す ( 未完 / terser-webpack-plugin で TypeError: Cannot read property 'javascript' of undefined エラーになる)

2020-11-24T23:28:18+09:00

以前、browserify + babelify + Gulp で IE11対応を試すの記事で browserify + babelify を試しましたが、今回は Webpack に挑んでみます。

ただし、プレーンな Gulp 環境ではなく、 Ususama で。

コード

package.json

// 略
    "devDependencies": {
// 略
        "glob": "7.1.6",
        "webpack": "^5.1.3",
        "webpack-stream": "^6.1.0",
        "terser-webpack-plugin": "^5.0.0",
// 略
    }
// 略

gulp-uglify-es と gulp-concat を除き、代わりに webpack 本体と Gulp で Webpack を使用するために必要な webpack-stream 、そして minifier の terser の Webpack 用プラグインである terser-webpack-plugin を追加。

gulp/tasks/js.js

const gulp          = require('gulp');
const plumber       = require('gulp-plumber');
const notify        = require('gulp-notify');
const webpack       = require('webpack');
const webpackStream = require('webpack-stream');
const rename        = require('gulp-rename');
const dir           = {
    dist: {
        js: './dist/js'
    }
};

const webpackConfig = require('../../weppack.config');

const jsBuild = () => {
    return _.webpackStream(webpackConfig)
        .pipe(_.plumber({
            errorHandler: _.notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'jsLibBuild'
            })
        }))
        .pipe(_.rename((path) => {
            path.basename += '.min'
            path.extname = '.js'
        }))
        .pipe(_.gulp.dest(dir.dist.js));
};

module.exports = jsBuild;

webpack.config.js

const webpack       = require('webpack');
const webpackTerser = require('terser-webpack-plugin');
const path          = require('path');
const glob          = require('glob');
const dotenv        = require('dotenv').config();
const dir           = {
    src: {
        js: './src/js'
    }
};

const mode = () => {
    return process.env.DEV_MODE === 'dev' ? 'development' : 'production';
};
const modeFlag = () => {
    return process.env.DEV_MODE === 'dev' ? false : true;
};
const entry = () => {
    const entries = _.glob
        .sync(
            '**/*.js',
            {
                ignore: [
                    '_plugins/**'
                ],
                cwd: dir.src.js
            }
        )
        .map(function (key) {
            return [key, _.path.resolve(dir.src.js, key)];
        });
    return Object.fromEntries(entries)
};
module.exports = {
    mode: mode(),
    entry: entry(),
    output: {
        filename: '[name]'
    },
    optimization: {
            minimizer: [
            new _.webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: modeFlag(),
                    },
                },
            }),
        ],
    }
};

いくつかの記事を参考にしながらタスクを組みます。

自分でカスタマイズした部分は以下。

.env で dev, demo, prod のモードを切り替えているので、その部分を process.env.DEV_MODE で振り分け
- Webpack の設定の mode と terser-webpack-plugin の drop_console のフラグが関係しています
複数の .js ファイルをエントリポイントにしたかったのでその部分はwebpackのentryファイルを複数指定、globパッケージの使い方 - Qiitaを参考に
最終的なファイル名は XXX.min.js の形にしたかったので gulp-rename を通しました

jQuery の扱い

タスク自体は上記のやり方で走ることが確認できました( DEV_MODE=dev )。

次は現時点ではまだ jQuery を使用しているので、 jQuery をどう読み込ませるかが課題ですが、以下のようにして動作することを確認しました。

app.js

import $ from 'jquery';
import 'jquery.easing/jquery.easing';

$(() => {
    /* 処理 */
});

sitesearch.js

import $ from 'jquery';
import List from 'list.js';

//サイト内検索
export default () => {
    const options = {
        valueNames: ['searchTitle', 'searchText'],
    };
    const searchList = new List('listSearch', options);
    //hits
    searchList.on('searchComplete', function (a) {
        $('#hits').text(a.matchingItems.length);
    });
};

サイト内検索で List.js を使用しているのですが、これについてはHow am I suppose to import list.js with es6 and webpack ? · Issue #559 · javve/list.jsの Issues の方法で解決しました。

ここまでは比較的順調でした。

しかし、間も無く壁に突き当たることになります……。

TypeError: Cannot read property 'javascript' of undefined エラー

DEV_MODE=dev で動作することは確認できたので、 DEV_MODE=prod に切り替えました。

すると、以下のエラーが出てしまいました。

TypeError: Cannot read property 'javascript' of undefined
    at PATH\TO\PROJECT\node_modules\terser-webpack-plugin\dist\index.js:366:38

DEV_MODE=dev に戻すと先ほどと同じように問題なく動作。上記でこのフラグが関係するのは mode と terser-webpack-plugin の drop_console の2箇所なので、そのどちらかだろうとアタリを付けます。

試しに drop_console を常に false としましたが、 DEV_MODE=prod でエラーは再現しました。

となると、 mode の方ということになります。

ここでエラー文で検索すると、以下の Issues を発見。 terser-webpack-plugin 本家のリポジトリです。

TypeError: Cannot read property 'javascript' of undefined ・ Issue #335 ・ webpack-contrib/terser-webpack-plugin

発生個所も含めてエラー文が同じです。

別の方のコメントを見ると、原因は以下の模様。

terser-webpack-plugin 5 は Webpack 4 とは互換性がない
webpack-stream の内部で使用している Webpack がバージョン 4 系

yep, we are working on it, release with fix will be today/tomorrow

TypeError: Cannot read property 'javascript' of undefined ・ Issue #335 ・ webpack-contrib/terser-webpack-plugin (2020/10/16日 22:04 JST)

わりとタイムリーなものを踏んでしまったようなので、 fixed されるのを待つ感じですかね……。

webpack-stream - npm

Webpack, 複数エントリポイントとoutput

webpackのentryファイルを複数指定、globパッケージの使い方 - Qiita

List.js import

How am I suppose to import list.js with es6 and webpack ? · Issue #559 · javve/list.js

terser-webpack-plugin

TypeError: Cannot read property 'javascript' of undefined ・ Issue #335 ・ webpack-contrib/terser-webpack-plugin

「Gulp4」の記事 - Crieit

yarn 時に gifsicle で gifsicle pre-build test failed エラー

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる

gulp-sass を Node.js v16 環境に合わせて調整する

Gulpタスク を動的に切り替える

Webpack (webpack-stream) で エントリーポイントを動的に変更する

gulp-sass から Scss を疑似的な動的読み込みを行う

続・ Gulp 4 + Webpack 5 を試す (resolutions 使用)

Gulp 4 + Webpack 5 を試す ( 未完 / terser-webpack-plugin で TypeError: Cannot read property 'javascript' of undefined エラーになる)

Gulpタスクを動的に切り替える

Webpack (webpack-stream) でエントリーポイントを動的に変更する