Toro_Unit

タグ: grunt

  • git pushしたときにFTPしたりgruntタスクを実行する。

    FTPしか使えないレンタルサーバーでの案件でGitを入れようとするとき、ソースの管理って結構大変だったりします。なので、git pushしたときに自動でFTPすると、非常に便利でした。

    このgrunt-githooksと、grunt-ftpushを使ってこんなGruntfileを作ります。

    module.exports = (grunt) ->


  grunt.loadNpmTasks "grunt-ftpush"
  grunt.loadNpmTasks "grunt-githooks"


  grunt.initConfig

    ftpush: {
      build: {
        auth: {
          host: 'example.com',
          port: 21,
          authKey: 'pass'
        },
        src: '',
        dest: '/path/to/dir',
        exclusions: ['.*','node_modules/*','.sass-cache/']
        keep: [],
        simple: true,
        useList: false
      }
    }

    githooks: {
      options: {
        dest: '.git/hooks',
        hashbang: '#!/bin/bash',
        template: './node_modules/grunt-githooks/templates/shell.hb',
        startMarker: '## GRUNT-GRUNTHOOKS START',
        endMarker: '## GRUNT-GRUNTHOOKS END'
      },
      setup: {
        'pre-push': 'deploy'
      }
    }

  grunt.registerTask 'deploy', ["ftpush"]

    これを設定したら、以下のコマンドを実行します。

    $ grunt githooks

    これで.git/hooks/pre-pushが作成され、pushしたときにgrunt deployが実行されるようになります。grunt deployにこのコードだとFTPしか設定してありませんが、サーバーにアップロードする前にCSSやJSのコンパイル・結合・圧縮などを実行するとより、使い勝手がいいと思います。

    例：https://github.com/torounit/torounit2015/blob/master/Gruntfile.coffee

    サーバーによってはftpushではなく、grunt-rsync等を使ったほうが良い場合も多いですが基本はこんな感じで、push時にサーバーと同期を取る事ができます。

    やっぱりいろいろ自動化しておくと便利で良いですね。ファイルの同期は手動でやるとだいたいろくな事が無いので、自動化の威力がいろいろ感じられて良いかなと思います。

    note

    • gitにsourcetreeを使う場合、環境変数が読まれないので、command not found: grunt とか言われる場合があります。その場合、githooksのテンプレートをいじって、bashrcとかをexportすると良い感じになります。

     

  • Gruntでbrowserify使ってCoffeescriptをコンパイルする。

    なんかCoffeescriptをGruntでコンパイルして、concatしたりとかだるいなーってずーっと思ってました。
    Classとかを他のファイルから参照しようとするとwindow.classNameとか@classNameとかにしないといけないですし、ファイル名順に結合するので、アルファベット順で後ろにくるクラスを読もうとするとエラー吐いたり、いまいち依存関係が見えなかったり。

    小規模な開発であれば問題ないのですが、Coffeescriptで大量にClassを作ったりすると、結構大きな問題になってきます。かといってrequire.jsとか面倒くさい。

    というわけで、最近流行のbrowserifyを使ってみました。

    npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発
    Browserify: それはrequire()を使うための魔法の杖

    ざっくり言うと、ブラウザで、node.jsのようなrequireが使えるようになるツールです。

    たとえば、以下のようなHoge.coffeeがあるとすると

    class Hoge
    piyo: ->

module.exports = Hoge

    以下のコードで、読み込んでくることができるという代物です。

    Hoge = require("./Hoge")
hoge = new Hoge()

    debowerifyとかをtransformに指定しておくと、bowerでインストールしたモジュールなんかも取ってこれるので、大変素敵です。

    $ = require("jquery")

    それをgruntでファイル監視して自動化するようにしたのがこちらです。

    module.exports = function(grunt) {
  grunt.initConfig({
    dir: {
      coffee: 'coffee',
      javascripts: 'javascripts'
    },
    esteWatch: {
      options: {
        dirs: [ 'coffee/**' ],
        extensions: ['coffee'],
      }
      coffee: function(filepath) {
        return ["browserify"];
      }
    },
    browserify: {
      dist: {
        files: {
          'javascripts/all.js': ['coffee/all.coffee']
        },
        options: {
          transform: ['coffeeify', "debowerify"],
          browserifyOptions: {
            extensions: ['.coffee']
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['esteWatch']);
};

    transformにcoffeeifyを設定しておくと、CoffeeScriptでもコンパイルできるようになります。
    browserifyOptionsのextensionsに.coffeeを指定しておくと、CoffeeScriptのファイルでも拡張子を省略してrequireできました。

    名前空間も汚染しないし、依存するClass等は明示的になるし、読み込み順に左右されないJSを書くことができるようになります。その代わり、$ = require(“jquery”)等は各ファイルで行う必要があります。実行時には一度しか読み込まれないようなので、パフォーマンス的にもよろしいです。

    GruntでBowerしたり、Coffeeしたり、ConcatしてJSを書いている人にはホントに便利です。

  • grunt-bower-concatでbowerを超便利に使う。

    bowerを使ってjsをパッケージ管理したかったんです。
    でも普通に使うと、bower_componentsから、ファイルを動かしたり、scriptタグをたくさん書いたり、いろいろめんどくさいです。

    そんなときに、grunt-bower-concatがものすごく便利です。

    このタスクを回すと、bower_componentsの中のjsを取り出し、結合して一つのjsにまとめてくれます。
    また、その際、依存関係を解決しながら読み込み順などを設定して結合します。

    jsをインストールする際、

    bower install hoge
grunt bower_concat

    とするだけで、JavaScriptのインストールが完了します。scriptタグを書いたりしなくても大丈夫。非常にbowerが手軽に扱えます。PHPのComposerくらいお手軽につかえます。

    インストール

    npm install grunt-bower-concat --save-dev

    にて、モジュールをインストール後、Gruntfileに

    bower_concat:
  all:
    dest: 'assets/js/lib.js'
    exclude: [
        'jquery',
        'modernizr'
    ]
    bowerOptions:
      relative: false

    と、設定を書きます。destは、吐き出しファイル名、excludeには、除外するライブラリを記述します。bowerOptionsは正直よくわかりません。そのほかのオプションは、Githubを参照してください。

    Gruntfileはこんな感じになります。
    https://gist.github.com/torounit/10652847

    最新版がbowerで配布されるようなモジュールなどを扱うときは死ぬほど便利です。作成されたjsをgrunt-contrib-uglifyなどで、圧縮したりするのも楽勝です。

    ただ、CSSには対応していません。
    また、bower.jsonのmainが記述されていないものもだめだったりします。まぁ、主要なライブラリは結構ちゃんと動くので。。。。。