wevdev

執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。

gulp4をローカルインストールすると、package.jsonの記述はこのようになります。

    "gulp": "github:gulpjs/gulp#4.0",

ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。

“package.jsonのscriptsでローカルインストールしたgulpでtaskを実行”の続きを読む

gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると
このようなエラーがでました。

$ gulp
[xx:xx:24xx Using gulpfile /xxx/gulpfile.js
/Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Function.Module.runMain (module.js:577:11)
    at startup (node.js:160:18)
    at node.js:445:3

調べてみると、gulp4とgulp-cliのバージョンが噛み合わないと出るエラーだと判明。

$ gulp -v
[XX:XX:XX] CLI version 3.9.1
[XX:XX:XX] Local version 4.0.0-alpha.2

とりあえず、gulp-cliのバージョンを上げてみました。

$ sudo npm install -g gulp-cli

$ gulp -v
[xx:xx:xx] CLI version 1.3.0
[xx:xx:xx] Local version 4.0.0-alpha.2

これで解決。
gulpのタスクも実行できるようになりました。

$ gulp
[xx:xx:xx] Using gulpfile /xx/gulpfile.js
[xx:xx:xx] Starting 'default'...

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
2. Browsersyncはshift_jisが文字化けする
3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
4. 画像までshift_jis変換すると化ける

まずは

• gulp-convert-encodingで文字コードをshift_jis変換
• gulp-cr-lf-replaceで改行コードをCR+LFに変換

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

“gulpでshift_jisとCR+LFの開発環境を構築”の続きを読む