grunt

grunt-init を使えば色々なプロジェクトのひな形の生成が簡単に

kamiyam

Mar 15, 2013 • 4 min read

grunt-init を使うと色々なプロジェクトのひな形を簡単に自動で生成してくれるようになります。

Project Scaffolding: http://gruntjs.com/project-scaffolding

ここでいう色々なプロジェクトとは次の項目を開発する際のパッケージのことです。(grunt公式から引用)

grunt-init-commonjs: Create a commonjs module, including Nodeunit unit tests.
grunt-init-gruntfile: Create a basic Gruntfile.
grunt-init-gruntplugin: Create a Grunt plugin, including Nodeunit unit tests.
grunt-init-jquery: Create a jQuery plugin, including QUnit unit tests.
grunt-init-node: Create a Node.js module, including Nodeunit unit tests.

例えば grunt-init-jquery は、jQuery Plugin Registry に登録するための jQueryプラグインのひな形を生成することができます。

以前、自分で作った jqKeycodeBinder なんかを登録するために必要なファイル構成ですね。

では早速導入してみましょう。


$ npm install -g grunt-init
.
..
...
grunt-init@0.2.0 /Users/xxx/.nodebrew/node/v0.8.20/lib/node_modules/grunt-init
├── colors@0.6.0-1
├── semver@1.0.14
├── hooker@0.2.3
├── prompt@0.1.12 (async@0.1.22, pkginfo@0.3.0, winston@0.5.11)
└── grunt@0.4.1 (which@1.0.5, dateformat@1.0.2-1.2.3, async@0.1.22, eventemitter2@0.4.11, iconv-lite@0.2.7, coffee-script@1.3.3, underscore.string@2.2.0rc, rimraf@2.0.3, nopt@1.0.10, minimatch@0.2.11, glob@3.1.21, lodash@0.9.2, findup-sync@0.1.2, js-yaml@2.0.3)

インストールされました


$ grunt-init --help
grunt-init: Generate project scaffolding from a template. (v0.2.0)

Usage
 grunt-init [options] [template]

Options
    --help, -h  Display this help text.                                        
    --no-color  Disable colored output.                                        
   --debug, -d  Enable debugging mode for tasks that support it.               
       --stack  Print a stack trace when exiting with a warning or fatal error.
   --force, -f  A way to force your way past warnings. Want a suggestion? Don't
                use this option, fix your code.                                
    --no-write  Disable writing files (dry run).                               
 --verbose, -v  Verbose mode. A lot more information output.                   
 --version, -V  Print the grunt version. Combine with --verbose for more info. 

Available templates

(No templates found)

Templates that exist in the /Users/kamiya/.grunt-init directory may be run with
"grunt-init TEMPLATE". Templates that exist in another location may be run with
"grunt-init /path/to/TEMPLATE". A template is a directory that must contain, at
the very minimum, a template.js file.

For more information, see http://gruntjs.com/project-scaffolding

grutn-init のインストールと同時に ~/.grunt-init/ フォルダができていると思います。

ここにテンプレートのひな形を git clone で配置します。

公式のjQuery Plugin テンプレートから


$ git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

ダウンロードします。

現時点(2013.3.14)で使用出来るテンプレートをすべてダウンロードしてみました。


$ ls  ~/.grunt-init/
commonjs        gruntfile       gruntplugin     jquery          node

ダウンロードができれば grunt-init jquery が実行できるようになります。
実行するとプラグインの構成に関する情報を入力していく流れになります。


$ mkdir grunt-jquery 
$ cd grunt-jquery


$ grunt-init jquery
Running "init:jquery" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

"jquery" template notes:
Project name should not contain "jquery" or "js" and should be a unique ID not
already in use at plugins.jquery.com. Project title should be a human-readable
title, and doesn't need to contain the word "jQuery", although it may. For
example, a plugin titled "Awesome Plugin" might have the name "awesome-plugin".

For more information, please see the following documentation:

Naming Your Plugin      http://plugins.jquery.com/docs/names/
Publishing Your Plugin  http://plugins.jquery.com/docs/publish/
Package Manifest        http://plugins.jquery.com/docs/package-manifest/

Please answer the following:
[?] Project name (grunt) jqueryplugin             
[?] Project title (jQueryplugin) 
[?] Description (The best jQuery plugin ever.) 
[?] Version (0.1.0) 
[?] Project git repository (git://github.com/kamiyam/grunt-jquery.git) 
[?] Project homepage (https://github.com/kamiyam/grunt-jquery) 
[?] Project issues tracker (https://github.com/kamiyam/grunt-jquery/issues) 
[?] Licenses (MIT) 
[?] Author name (kamiyam) 
[?] Author email (labs.k5m@gmail.com) 
[?] Author url (none) 
[?] Required jQuery version (*) 
[?] Do you need to make any changes to the above before continuing? (y/N) 

Writing .gitignore...OK
Writing .jshintrc...OK
Writing CONTRIBUTING.md...OK
Writing Gruntfile.js...OK
Writing README.md...OK
Writing libs/jquery-loader.js...OK
Writing libs/jquery/jquery.js...OK
Writing libs/qunit/qunit.css...OK
Writing libs/qunit/qunit.js...OK
Writing src/.jshintrc...OK
Writing src/jqueryplugin.js...OK
Writing test/.jshintrc...OK
Writing test/jqueryplugin.html...OK
Writing test/jqueryplugin_test.js...OK
Writing LICENSE-MIT...OK
Writing package.json...OK
Writing jqueryplugin.jquery.json...OK

Initialized from template "jquery".
You should now install project dependencies with npm install. After that, you
may execute project tasks with grunt. For more information about installing
and configuring Grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

Done, without errors.

このjQuery Plugin テンプレートは以下の構成になるようです。

src フォルダ: 開発用 jsファイル
dist フォルダ: 配布用 jsファイル(圧縮版)

grunt コマンドを実行すると dist フォルダが生成されます。


$ npm install
$ grunt
Running "jshint:gruntfile" (jshint) task
>> 1 file lint free.

Running "jshint:src" (jshint) task
>> 1 file lint free.

Running "jshint:test" (jshint) task
>> 1 file lint free.

Running "qunit:files" (qunit) task
Testing test/jqueryplugin.html....OK
>> 5 assertions passed (144ms)

Running "clean:files" (clean) task

Running "concat:dist" (concat) task
File "dist/jqueryplugin.js" created.

Running "uglify:dist" (uglify) task
File "dist/jqueryplugin.min.js" created.
Uncompressed size: 838 bytes.
Compressed size: 94 bytes gzipped (305 bytes minified).

Done, without errors.

Sign up for more like this.