タグ: gulp

package.jsonのscriptsでローカルインストールしたgulpでtaskを実行

執筆当時の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でTypeErrorがでるときはgulp-cliが原因

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でshift_jisとCR+LFの開発環境を構築

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変換すると化ける

まずは

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

サンプルをGitHubで確認

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

gulpをグローバルインストール

gulpは、node.jsで動くタスクランナーです。

タスクランナーとは、ざっくりいうと
scssのビルドや画像の圧縮、ソースの圧縮などの定形タスクを
まとめて実行してくれる仕組みのことです。

タスクランナーは、Javascriptで動きJSONで記述できるGRUNTで知名度があがりましたが
およそ2014年以降は、逐次処理のGRUNTよりも、並行処理できるgulpのほうが、やや人気が高いです。

参考：
5分で導入できる！ タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB

“gulpをグローバルインストール” の続きを読む