Help us understand the problem. What is going on with this article?

Bookmarklet作るのにYeoman使ってみる

More than 5 years have passed since last update.

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

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使うのやり過ぎ感あるわ」と思っていましたが、使ってみると中々快適でした。

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

Layzie
興味は主にJavaScriptと、Spacemacs、Gitです。最近はAndroidとかiOSとかRailsとかも
http://layzie.hatenablog.com
medley
医療ヘルスケア分野の課題を解決する
https://www.medley.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away