Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2016年、僕のおすすめgulpプラグイン


これは、2015/01/18の公開アップルップル社内勉強会発表用資料です。


gulpはみなさんご存知ですよね?ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。
今回は、以下の4つの項目に分けて、自分のおすすめのプラグインを紹介します。


「2016年、僕のおすすめgulpプラグイン」の続きを読む

使われていないモジュールIDを調べるためにgulpのpluginを作った

a-blog cmsの話ですが、サイトにモジュールIDが100個ほど存在すると、どれが現在サイトで使っている物でどれが使っていない物なのかが把握しづらくなります。昔使っていて今は使っていないモジュールIDなどもきっとあるのではないでしょうか?
これまで、モジュールIDを使っているかいないかをSublimeTextを使ってthemesディレクトリの中を検索していましたが、それでもこれだけ大量にあると大変になってきました。
そこで今回作成したのが、str-finderというgulpのプラグインです。
これを使うと以下のように、どこのファイルでその文字列が使われているかという事を抜き出してくれます。
また文字列が見つからない場合は[not Found]と出力されます。
以下は出力結果例です。

name,path
categoryList,moduleid.csv
categoryList,blog2015/index.html
categoryList,cart@blog2015/order.html
categoryList,site2015/include/module/category/list.html
categoryList,system/admin/tooltip/config/category/list.html
categoryEntrySummary,moduleid.csv
categoryEntrySummary,site2015/include/module/category/summary.html
categoryEntrySummary,system/admin/tooltip/config/category/entry-summary.html
testtestEntrySummary,not Found

また、[notFoundOnly]というオプションを使えば、見つからなかった文字列だけをリスト化して表示してくれます。

testtestEntrySummary,not Found
steelydylanModuleField,not Found
SearchField,not Found

インストール方法

コマンドラインで以下のように入力するだけでダウンロードできます。

npm install str-finder

使い方

以下がソース例になります。今回の例では、moduleid.csvというファイルから、dist.csvというファイルを出力しています。

gulpfile.js

var gulp = require("gulp");
var finder = require("str-finder");
var rename = require("gulp-rename");
gulp.task('module_search',function(){
     gulp.src("./moduleid.csv")
          .pipe(finder({dir:"themes",notFoundOnly:false}))
          .pipe(rename({basename:"dist",extname:".csv"}))
          .pipe(gulp.dest("./"));
});
 
gulp.task('default',['module_search']);

moduleid.csv(入力用ファイル)

カンマ区切りで文字列を記述していきます。
[delimiter]というオプションに["\n"]をしていすれば改行区切りも可能です。

categoryList,categoryEntrySummary,testtestEntrySummary,steelydylanModuleField,SearchField

オプション

finder({
    dir:"./",//検索するディレクトリ
    notFoundOnly:false,//見つからなかった文字列だけを表示する
    delimiter:","//ソースファイルの文字列の区切り文字
});

WEB版、gulp generatorを作りました。

gulp-generator

gulp-generator


gulp generatorとは

gulp generatorとはWEB上でGUIベースで、gulpfile.jsとpackage.jsonのソースコードを生成できるツールです。GUIがお好きな人や、gulp初心者の方におすすめのツールです。

使い方

gulpで自分の使いたいオプションにチェックを入れたり、出力先や入力先をフォームに入力していくだけです。

機能

作成したデータのローカルストレージへの保存

チェックを入れたり、フォームに入れた値などは自動的にローカルストレージに保存されますので、次にサイトに訪れた際も前回と同じ状態で使っていただけます。

ソースのコピー

Google Chromeをお使いの方はソースのコピーが可能です。「ソースをコピー」をクリックしていただくと、出力されているソースコードがクリップボードに保存されます。

Zipファイルとしてダウンロード

また作成したソースコードは、gulpfile.jsとpackage.jsonが梱包されたZipファイルとしてダウンロードしていただけます。「パッケージをダウンロード」というボタンを押していただくとプロジェクトをダウンロードできます。

ブラウザの言語判別

ブラウザを英語の設定にしている場合は英語のGUIとなり、日本語に設定している場合は日本語のGUIとなります。

もし、機能が気に入らなければ...

githubでのプルリクエストやフォークなども大歓迎です。また、「こここうしてよ」みたいなご指摘もお待ちしております。githubページはこちらです。
https://github.com/steelydylan/gulp-generator


gulpで.poから.moファイルを作成する

最近はa-blog cmsの管理画面の英語化を頑張っています。そこで毎回、.poファイルから.moファイルに変換する際に下記のpoeditというMac用のアプリを使っていました。


poedit

poedit


しかし毎回、アプリを使ってpoファイルをコンパイルするのは非常にめんどくさいです。
そこで、gulpで.poから.moファイルに変換してくれる便利なプラグインを見つけたので今度からそれを使うようにしたいと思います。
gulp-gettextというプラグインです


ソースのサンプル

var gulp    = require('gulp');
var gettext = require('gulp-gettext');
var plumber = require('gulp-plumber');

gulp.task('gettext', function() {
    gulp.src('lang/en_US/LC_MESSAGES/**/*.po')
    	.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
        .pipe(gettext())
        .pipe(gulp.dest('lang/en_US/LC_MESSAGES/'))
    ;
});

gulp.task('default',function(){
	gulp.watch('lang/en_US/LC_MESSAGES/**/*.po',['gettext']);
});

poファイルのサンプル

#: themes/system/admin/top.html
msgid "ダッシュボード"
msgstr "Dashboard"

msgid "ショートカット"
msgstr "Shortcuts"

msgid "システムバージョン"
msgstr "system Version"

msgid "ユーザーの上限"
msgstr "limit of the users"

msgid "メールマガジン プラグイン"
msgstr "mail-magazine add-on"

msgid "利用可能"
msgstr "available"

msgid "キャッシュファイル管理"
msgstr "cache file management"

上記のpoファイルを編集して、保存するだけでmoファイルを作成してくれて非常に便利です。是非、ソフトウェアの多言語化をする際にお役立て下さい。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド