Bookmarklet作るのにYeoman使ってみる

作ったのは超単純なこれ。

Layzie/make-md-link

最近Markdown使って資料作ってて、URLとかを集めるのにリンクとタイトルをMarkdown形式で貼りたいわーと思って、5分くらいで作った。

これ作るのに、Yeoman使ってみたというレポートです。

まずはYeoman入れてない人は入れてください。
あとyeoman-generatorっていうnpmが色々あるんですが、その中のgenerator-bookmarkletを導入。

Zsh

$ npm install -g yo grunt-cli bower
$ npm install -g generator-bookmarklet

実際は1行でも良いです。

次にgenerator-bookmarklet使って、scaffoldを作成。

Zsh

$ mkdir test_bookmarklet; cd test_bookmarklet
$ yo bookmarklet
    create Gruntfile.js
    create package.json
    create .jshintrc
    create .gitattributes
    create .gitignore
    create app/main.js
npm WARN package.json test-bookmarklet@0.0.0 No README.md file found!
npm http GET https://registry.npmjs.org/matchdep
npm http GET https://registry.npmjs.org/grunt-contrib-uglify
npm http GET https://registry.npmjs.org/grunt-contrib-jshint
npm http GET https://registry.npmjs.org/grunt-contrib-concat
npm http GET https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt-contrib-clean
npm http GET https://registry.npmjs.org/grunt-contrib-watch
npm http 304 https://registry.npmjs.org/grunt-contrib-uglify
npm http 304 https://registry.npmjs.org/grunt
npm http 304 https://registry.npmjs.org/grunt-contrib-jshint
npm http 304 https://registry.npmjs.org/matchdep
npm http 304 https://registry.npmjs.org/grunt-contrib-concat
npm http 304 https://registry.npmjs.org/grunt-contrib-clean
npm http 304 https://registry.npmjs.org/grunt-contrib-watch
npm http GET https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/grunt-lib-contrib
npm http GET https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/gaze
npm http GET https://registry.npmjs.org/coffee-script
npm http GET https://registry.npmjs.org/colors
npm http GET https://registry.npmjs.org/dateformat/1.0.2-1.2.3
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/hooker
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/eventemitter2
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/nopt
npm http GET https://registry.npmjs.org/underscore.string
npm http GET https://registry.npmjs.org/rimraf
npm http GET https://registry.npmjs.org/findup-sync
npm http GET https://registry.npmjs.org/which
npm http GET https://registry.npmjs.org/iconv-lite
npm http GET https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/js-yaml
npm http 304 https://registry.npmjs.org/jshint
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/grunt-lib-contrib
npm http 304 https://registry.npmjs.org/coffee-script
npm http 304 https://registry.npmjs.org/uglify-js
npm http 304 https://registry.npmjs.org/gaze
npm http 304 https://registry.npmjs.org/colors
npm http 304 https://registry.npmjs.org/dateformat/1.0.2-1.2.3
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/hooker
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/eventemitter2
npm http 304 https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/nopt
npm http 304 https://registry.npmjs.org/underscore.string
npm http 304 https://registry.npmjs.org/rimraf
npm http 304 https://registry.npmjs.org/findup-sync
npm http 304 https://registry.npmjs.org/which
npm http 304 https://registry.npmjs.org/iconv-lite
npm http 304 https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/js-yaml
npm http GET https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/zlib-browserify/0.0.1
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/abbrev
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/fileset
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/cli/0.4.3
npm http GET https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/esprima
npm http GET https://registry.npmjs.org/source-map
npm http GET https://registry.npmjs.org/argparse
npm http GET https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/zlib-browserify/0.0.1
npm http 304 https://registry.npmjs.org/fileset
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/cli/0.4.3
npm http 304 https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/esprima
npm http 304 https://registry.npmjs.org/argparse
npm http 304 https://registry.npmjs.org/source-map
npm http 304 https://registry.npmjs.org/abbrev
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/amdefine
npm http GET https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/wordwrap
npm http 304 https://registry.npmjs.org/underscore
npm http 304 https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/minimatch
grunt-contrib-clean@0.4.1 node_modules/grunt-contrib-clean

grunt-contrib-concat@0.1.3 node_modules/grunt-contrib-concat

matchdep@0.1.2 node_modules/matchdep
└── minimatch@0.2.12 (lru-cache@2.3.0, sigmund@1.0.0)

grunt-contrib-watch@0.3.1 node_modules/grunt-contrib-watch
└── gaze@0.3.4 (minimatch@0.2.12, fileset@0.1.5)

grunt@0.4.1 node_modules/grunt
├── dateformat@1.0.2-1.2.3
├── colors@0.6.0-1
├── hooker@0.2.3
├── async@0.1.22
├── eventemitter2@0.4.12
├── which@1.0.5
├── coffee-script@1.3.3
├── underscore.string@2.2.0rc
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.2)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── nopt@1.0.10 (abbrev@1.0.4)
├── iconv-lite@0.2.10
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
├── lodash@0.9.2
├── findup-sync@0.1.2 (lodash@1.0.1)
└── js-yaml@2.0.5 (esprima@1.0.3, argparse@0.1.15)

grunt-contrib-jshint@0.1.1 node_modules/grunt-contrib-jshint
└── jshint@0.9.1 (minimatch@0.0.5, cli@0.4.3)

grunt-contrib-uglify@0.1.2 node_modules/grunt-contrib-uglify
├── grunt-lib-contrib@0.5.3 (zlib-browserify@0.0.1)
└── uglify-js@2.2.5 (optimist@0.3.7, source-map@0.1.23)

そうすると、こんな感じで勝手にディレクトリやらGruntfile.jsやらが作られます。

Zsh

$ tree -I node_modules
.
├── Gruntfile.js
├── app
│   └── main.js
└── package.json

1 directory, 3 files

あとは、grunt serverを走らせておいて、app/main.jsを保存すると勝手にdist/bookmarklet.jsという
ファイルが出来るのでこれをBookmarkletとして使用するという感じです。

Zsh

$ tree -I node_modules
.
├── Gruntfile.js
├── app
│   └── main.js
├── dist
│   └── bookmarklet.js
└── package.json

2 directories, 4 files

最初は「ブックマークレットにYeoman使うのやり過ぎ感あるわ」と思っていましたが、使ってみると中々快適でした。

やり過ぎ感はまあ、ありますけども。