Toro_Unit

タグ: gulp

  • 別に $ npm install -g gulp しなくても大丈夫って話。

    別に $ npm install -g gulp しなくても大丈夫って話。

    $ npm install -g gulp-cli

    みたいにグローバルにモジュールをインストールさせる風潮ってどうなんだよ！みたいな話をしてまして。

    僕自身もいろいろそれには非常に違和感を持っていたり、そもそも node.js のバージョンを変更したときとか、グローバルに入っているモジュールの面倒も見ないといけないことが非常に面倒くさいんですよね。grunt-cli も gulp-cli も bower も入れたくないし、可能な限りプロジェクトの node_modules で完結させたいんですよね。バージョンアップとかも面倒ですし。

    そんなわけで、いろいろ試してみたんですが、

    $ ./node_modules/.bin/gulp hoge

    とかやるのは、実際面倒くさいし、現在のディレクトリの位置次第で変わったり。

    $ $(npm bin)/gulp hoge

    とかやるのも最初の奴よりはマシですが、面倒。bashrcとかを使って、./node_modules/.bin にパスを・・・というのは流石に論外。Windows の人はどうすんねんとか言い出すとキリは無いわけで。

    というわけでいろいろ試してみたんですが、どうやら npm 2系以上からは、npm scripts にサブコマンドを渡せるようになっていたようです。だいぶ前から出来たんですね…

    つまりどういうことかというと、package.json の “scripts” のところに、以下のように書いておきます。

    {
  "scripts": {
    "gulp": "gulp"
  }
}

    そうすると、以下のコマンドで gulp を走らせることが出来ます。

    $ npm run gulp

    そして、それに加えて、gulp で定義したサブコマンドなども渡せるようです。

    $ npm run gulp build

    grunt 等の他のタスクランナーなどでも同等のことは出来るはずです。これで面倒くさいグローバルなモジュールの管理をしなくて済みますね!!! バージョンの不整合などに悩まされる心配も無さそうです。

    とりあえず、gulp をお使いの皆さんは今すぐ package.json に1行足しましょう。

    npm scripts を使うと、npm install したあとに勝手に CSS や JS をビルドしたりいろいろ便利なことが出来るので面白いですよー。

    参考： npm で依存もタスクも一元化する – Qiita

    コメント欄の議論も含めてなかなか濃いですね。

  • gulp-sass-bulk-importを使ってSassの@importをすっきり管理する。

    皆さんSass書いてますかー！gulpしてますかー！

    唐突ですがRubyのgemにsass-globbingというものがありまして、そいつを使うと、

    @import "object/component/*.scss";
@import "object/project/*.scss";
@import "object/utility/*.scss";

    みたいな感じで該当するファイルを勝手に読み込んでくれるという実に便利なgemです。Ruby版のSassで使えます。

    参考: sass-globbingでSassファイルをお手軽管理 – Qiita

    ただ。。。。
    やっぱり速度面はnode-sassの方が良いし、WindowsでRubyどうするの？とか聞かれるのがかったるいし、ruby-sassだとそれのバージョン管理もしないといけないし、bundlerの使い方とか聞かれるのも面倒くさいです。gulp-ruby-sassもなんか書き方が特殊だし。。。

    package.json、composer.json、(たまにbower.json)、Gemfileを管理するのは地獄過ぎる気がしたので、gulp-sassでやりきりたいなぁと思ってましたけど、それはそれで@import地獄になります。PHPですらautoload出来るんだから何とかしてくれよと思うわけです。

    別にrailsとかmiddleman案件だったら良いんだろうけど、あいにくこちらはレンタルサーバー案件メインのWordPressが得意な田舎のフロントエンドエンジニアと来てます。

    なので、gulp-sassでもsass-globbing的なコトが出来たら楽だなぁと思って探してたらありました。

    mathisonian/gulp-sass-bulk-import

    サンプルコード

    var gulp = require('gulp');
var bulkSass = require('gulp-sass-bulk-import');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('src/styles/**/*.scss')
        .pipe(bulkSass())
        .pipe(sass())
        .pipe(gulp.dest('dist/styles'));
});

    こんな感じで、gulp-sassの直前にpipeしてあげれば動きます。

    とりあえず半月触ってますけど、とくにバグっぽいものには出会ってません。見つけたらプルリクエスト投げましょう。

    注意事項

    基本的に名前順にファイルが読まれるので、ちゃんとモジュール化できてないCSSだと、読み込み順の関係でおかしくなったりします。まぁそれは、CSSの設計がおかしいと思うので、メロン本とか読んでSMACSSなりFLOCSSなりITCSSなりやればいいんじゃないでしょうかね。