Logo
  • DoRubyとは
  • お問い合わせ
  • Ruby/Rails
  • Web開発
  • Webマーケティング
  • アピリッツ
  • ライフハック
  • ゲーム制作/開発
  • アプリ開発
  • 新しいカテゴリ
  • Railsの小技
  • Rubyの小技
  • Gemの紹介
  • ActiveRecord
  • 初心者向け
  • Java/Scalaテク
  • Unixのあれこれ
  • データベース
  • スマホ開発
  • HTML/CSS/JavaScript
  • デザイン製作
  • インフラ
  • クラウド
  • セキュリティ
  • エディタ
  • バージョン管理
  • その他
  • python
  • アクセス解析
  • Googleアナリティクス
  • Googleデータスタジオ
  • Web広告
  • SEO
  • UI/UX
  • ソーシャルメディア
  • EC開発
  • Webシステム開発
  • コンサルティング
  • Webデザイン
  • ブロックチェーン
  • ゲーム紹介
  • アプリ紹介
  • ASP
  • 風景
  • パソコン
  • ツール
  • ガジェット
  • 仕事術
  • 健康
  • 生活
  • 書評
  • Excel(エクセル)
  • PowerPoint(パワーポイント)
  • ゲームプランニング
  • SpriteStudio
  • マスターデータ入力/作成
  • Unity
  • キャラクターデザイン
  • ゲームシナリオ
  • レベルデザイン
  • ゲーム分析
  • 3DCG
  • イラスト制作
  • CG/アニメーション
      1. ホーム
      2. Ruby/Rails
      3. Gemの紹介
      4. closure-compilerを使用して javascript ファイルを圧縮したときのメモ
      • 2017-01-31
        • カテゴリ:
        • Gemの紹介
        • タグ:
        • closure-compiler
        • gem
        • javascript
        • ruby

      closure-compilerを使用して javascript ファイルを圧縮したときのメモ

      この記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。
      Dc8e8a7bd4fcca61c7d52d1c5cd4de79

      javascript ファイルを納品する場合に パフォーマンスの改善やセキュリティーの向上の為に圧縮を行う必要があった。今回は closure-compiler を使用させて頂いた。 配布する環境によってスクリプト内で利用するASPサーバやアカウントを分けたかったので環境ごとに圧縮ファイルを出力するようにしてみた。

      参考:javascriptを圧縮するwebサービス
      http://logic.moo.jp/data/archives/513.html

      参考:closure-compiler について
      https://developers.google.com/closure/compiler/

      インストール(bash)

      gem install closure-compiler
      

      コア部分の使い方(ruby)

      js_src_string = File.read(original_js_file_path_string)
      minified_js_string = Closure::Compiler.new.compile(js_src_string)
      File.write minified_js_file_path_string, minified_js_string
      # js_src に javascript コードを入れると minified_js に圧縮されたコードが代入される。
      

      こういうのをしました。

      require 'rubygems'
      require 'closure-compiler'
      
      def gen_minified_js(src, config, out_file)
        # jsソースに xxxx_..._token という文字列を記載しておいて置換する。
        config.each do |k, v|
          key = "xxxx_#{k}_token"
          src.gsub!(key, v)
        end
        File.write out_file, src
      end
      
      # 環境ごとの置換文字列
      envs = {
        staging: {
          protocol: 'https:',
          host: 'staging.example.com',
          service_key: 'staging'
        },
        localdev: {
          protocol: 'http:',
          host: 'my_development_host', # ローカル開発環境用 hostsファイルに開発サーバのIPで登録してください。
          service_key: 'my_development_key' # xxxテーブルのservice_key を変更してください。
        },
        local: {
          protocol: 'http:',
          host: '192.168.xxxx.xxx',
          service_key: 'our_localtest_key' # 開発メンバー共有テスト環境
        },
        appirits: {
          protocol: 'https:',
          host: 'product.example.com',
          service_key: 'product_development_key' # 本番環境 自社アカウント
        }
      }
      
      production_env = {
        protocol: 'https:',
        host: 'product.example.com',
        service_key: 'product_product_key' # 本番環境 納品アカウント
      }
      
      # 圧縮対象のjsファイル
      src = './workspace/deliverables.src.js'
      js_src = Closure::Compiler.new.compile(File.open(src, 'r'))
      
      # 本番用でないファイルはまとめて作る 
      js_name_base = './workspace/dir_name_token/js/deliverables.test.min.js'
      
      
      envs.each do |dir, config|
        gen_minified_js(js_src.dup, config, js_name_base.gsub('dir_name_token', dir.to_s))
      end
      
      # 本番用はファイル名が違うようにしたので別途実行
      gen_minified_js(js_src.dup, production_env, './workspace/products/js/deliverables.min.js')
      

      ※ 上記をファイルに保存し ruby に召し上がって頂く。


      • 66 views
        • Tweet
        • このエントリーをはてなブックマークに追加

      この記事を書いた人
      2452282c962665b454e39604309b190e?default=mm&size=80
      kadosaway
      1978年生まれ文系出身エンジニアによるLinuxとかMacとかネットワークの技術に関する事柄の紹介です。

      「いいね!」するとDoRubyの最新記事を受け取ることができます。

      Facebook

      Twitterから最新記事を受け取るならこちら

      Follow @doruby

      Feedlyから最新記事を受け取るならこちら

      follow us in feedly

      おすすめの記事
      • 346 views
      • 2015-10-01
      RailsのViewを自在にカスタマイズするための「Cosme」gem
      • 1,274 views
      • 2016-07-27
      リニューアルをしたDoRubyの3つの目的
      • 601 views
      • 2016-07-31
      carrierwaveとfogでRiak CSへの画像アップロードを実装する
      • 697 views
      • 2017-04-24
      アピリッツの新卒合宿2017

      カテゴリ

      Icon category 1Ruby/RailsList elementRailsの小技List elementRubyの小技List elementGemの紹介List elementActiveRecordList element初心者向けIcon category 4Web開発List elementJava/ScalaテクList elementUnixのあれこれList elementデータベースList elementスマホ開発List elementHTML/CSS/JavaScriptList elementデザイン製作List elementインフラList elementクラウドList elementセキュリティList elementエディタList elementバージョン管理List elementその他List elementpythonIcon category 5WebマーケティングList elementアクセス解析List elementGoogleアナリティクスList elementGoogleデータスタジオList elementWeb広告List elementSEOList elementUI/UXList elementソーシャルメディアIcon category 6アピリッツList elementEC開発List elementWebシステム開発List elementコンサルティングList elementWebデザインList elementブロックチェーンList elementゲーム紹介List elementアプリ紹介List elementASPList element風景Icon category 7ライフハックList elementパソコンList elementツールList elementガジェットList element仕事術List element健康List element生活List element書評List elementExcel(エクセル)List elementPowerPoint(パワーポイント)List elementゲーム制作/開発List elementゲームプランニングList elementSpriteStudioList elementマスターデータ入力/作成List elementUnityList elementキャラクターデザインList elementゲームシナリオList elementレベルデザインList elementゲーム分析List element3DCGList elementイラスト制作List elementCG/アニメーションList elementアプリ開発List element新しいカテゴリ

        人気の記事
        • 115 views
        • 2018-03-30
        極・メカニカルキーボード生活
        • 78 views
        • 2018-04-02
        メモ化トラップ
        • 73 views
        • 2018-03-23
        協力要素のあるゲームにおける初心者について考える
        • 58 views
        • 2018-03-26
        よくわからないで使っている英語の意味を知っとこう
        • 56 views
        • 2018-03-28
        Ruby×PyCallでTensorflowのMNISTチュートリアル
        最近の記事
        • 48 views
        • 2018-04-02
        心くすぐられる物理学ワード
        • 50 views
        • 2018-04-02
        花粉症を軽減する方法
        • 78 views
        • 2018-04-02
        メモ化トラップ
        • 33 views
        • 2018-04-02
        Unityのシェーダーについて
        • 38 views
        • 2018-03-30
        iOS/Android向けアプリの審査基準
        Facebook

          サイト情報
          • DoRubyとは
          • 株式会社アピリッツ

          企業情報
          • 会社概要
          • 採用情報
          • お問い合わせ

          ソーシャルアカウント
          • Facebook
          • Twitter
          サービス製品
          • コミュニティサイト
          • Android向け ECアプリ制作パッケージ「ポケコマ」
          • レコメンドASP
          • サイト内検索ASP「Advantage Search」
          • オープンソースECサイト構築パッケージ「エレコマ」

          • 受注・在庫・商品情報一元管理「モールコネクター」
          • セキュリティ診断サービス
          • 戦略的EC画面設計・制作サービス
          • Googleアナリティクスセミナー
          • アクセス解析コンサルティング
          • SEOコンサルティング

          Copyright © Appirits All Rights Reserved.