2014年9月6日土曜日

Gruntを使ってみる

Google先生のPageSpeed Insightsに作ったサイトを解析してもらうと、
jsやcssはなるべく1つにまとめて圧縮してください( ‘д‘⊂彡☆))Д´) パーン
と怒られてしまうので、それを改善したい!(゚д゚)(。_。)(゚д゚)(。_。) ウンウン

今までは手動で結合・圧縮を行わないといけないと思っていたので、
メンテナンスが大変と事もありやっていませんでした(; ・`д・´)

ただ、社内的な事情でどうしてもやらないと行けなくなったので、
便利なツールが無いかな~と思ったら・・・Gruntという便利そうなものをハヶ━m9( ゚д゚)っ━ン!!

早速、使ってみました( ´∀`)bグッ!

まずはnode.jsのインストールを行います。
node.jsのダウンロード

公式サイトに行って、「download」をクリックします。

次に、各環境にあわせたファイルをダウンロードします。

 ダウンロードが終わったら、インストールを行います。

インストール画面では基本的に何も変更せずにNextやYesを押せば問題ありません。

同意画面

インストール先の設定画面

セットアップの変更画面

インストール開始画面




インストール完了画面


インストールが完了したら、Windowsの場合にはコマンドプロンプトを管理者として実行します。
スタートメニューにあるコマンドプロンプトを右クリックして「管理者として実行」を選択する。


コマンドプロンプトが立ち上がったら、
node -v
と入力すると、バージョンが表示されれば、正常にインストールが完了しています( ´∀`)bグッ!
C:\Windows\system32>node -v
v0.10.31
grunt-cliをインストール
C:\Windows\system32>npm install -g grunt-cli
C:\Users\nakajima\AppData\Roaming\npm\grunt -> C:\Users\nakajima\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\nakajima\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)
作業ディレクトリをどこかに作成して、そのディレクトリへ移動します。
今回は、C:\node.js\gruntに作成してからコマンドプロンプトで移動しています。
C:\node.js>cd C:\node.js\grunt
作業ディレクトリの初期化を行います。行うとpackage.jsonファイルやディレクトリが作成されます。 初期化の際に項目の設定を聞かれますが、特に何もしていないでEnterを押してスキップしてしまいます(; ・`д・´)
C:\node.js\grunt>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (grunt)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\node.js\grunt\package.json:

{
  "name": "grunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
package.jsonが作られている確認
C:\node.js\grunt のディレクトリ

2014/09/05  22:24    <DIR>          .
2014/09/05  22:24    <DIR>          ..
2014/09/05  22:24               201 package.json
               1 個のファイル                 201 バイト
               2 個のディレクトリ  262,197,243,904 バイトの空き領域
package.jsonの中身の確認
C:\node.js\grunt>type package.json
{
  "name": "grunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
フォルダにgruntをインストール
C:\node.js\grunt>npm install grunt -save-dev
npm WARN package.json grunt@1.0.0 No description
npm WARN package.json grunt@1.0.0 No repository field.
npm WARN package.json grunt@1.0.0 No README data
npm WARN install Refusing to install grunt as a dependency of itself
package.jsonの中身を確認して、"devDependencies": {}が追加されていることを確認する。
C:\node.js\grunt>type package.json
{
  "name": "grunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {}
}
Windows7で便利なコマンドを実行しておく良いそうです(´・∀・`)ヘー こちらのサイトから抜粋 今更だけどやるgrunt入門編・インストールから基本的な使い方
Windows7だとgruntを実行する場合、「grunt」だけではダメで「grunt.cmd」としないと実行されません。前にやった時はここで詰まっていたようです。情報を調べるとみんなMacなのかあまりこの情報を見かけませんでした。 なのでここから先便利なように以下のコマンドを実行しておきます。
C:\node.js\grunt>DOSKEY grunt=grunt.cmd $*
プラグインのインストール
C:\node.js\grunt>npm install grunt-contrib -save-dev
npm WARN package.json grunt@1.0.0 No description
npm WARN package.json grunt@1.0.0 No repository field.
npm WARN package.json grunt@1.0.0 No README data
npm WARN deprecated grunt-contrib@0.11.0: DEPRECATED. See readme: https://github.com/gruntjs/grunt-contrib
npm WARN deprecated grunt-lib-contrib@0.7.1: DEPRECATED. See readme: https://github.com/gruntjs/grunt-lib-contrib
npm WARN deprecated es5-shim@2.3.0: Please update to the latest version; it overrides noncompliant native methods even in modern implementations
npm WARN deprecated deflate-crc32-stream@0.1.2: module has been merged into crc32-stream
\


> phantomjs@1.9.7-15 install C:\node.js\grunt\node_modules\grunt-contrib-qunit\node_modules\grunt-lib-phantomjs\node_modules\phantomjs
> node install.js

Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-windows.zip
Saving to C:\Users\nakajima\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip
Receiving...
\ [=====================================---] 94% 0.0s-
Received 6823K total.
Extracting zip contents
Copying extracted folder C:\Users\nakajima\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip-extract-1409923893866\phantomjs-1.9.7-windows -> C:\node.js\
grunt\node_modules\grunt-contrib-qunit\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\node.js\grunt\node_modules\grunt-contrib-qunit\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phanto
mjs.exe

> phantomjs@1.9.7-15 install C:\node.js\grunt\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\node_modules\phantomjs
> node install.js

Download already available at C:\Users\nakajima\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip
Extracting zip contents
Copying extracted folder C:\Users\nakajima\AppData\Local\Temp\phantomjs\phantomjs-1.9.7-windows.zip-extract-1409923898612\phantomjs-1.9.7-windows -> C:\node.js\
grunt\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\node.js\grunt\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phan
tomjs.exe

> jpegtran-bin@0.2.8 postinstall C:\node.js\grunt\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran
-bin
> node index.js

√ pre-build test passed successfully!

> pngquant-bin@0.3.5 postinstall C:\node.js\grunt\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-pngquant\node_modules\pngquant
-bin
> node index.js

√ pre-build test passed successfully!

> optipng-bin@0.3.11 postinstall C:\node.js\grunt\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-optipng\node_modules\optipng-b
in
> node index.js

√ pre-build test passed successfully!

> gifsicle@0.1.7 postinstall C:\node.js\grunt\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-gifsicle\node_modules\gifsicle
> node index.js

√ pre-build test passed successfully!
grunt-contrib-copy@0.5.0 node_modules\grunt-contrib-copy

grunt-contrib-symlink@0.3.0 node_modules\grunt-contrib-symlink

grunt-contrib-requirejs@0.4.4 node_modules\grunt-contrib-requirejs
└── requirejs@2.1.14

grunt-contrib-clean@0.5.0 node_modules\grunt-contrib-clean
└── rimraf@2.2.8

grunt-contrib-csslint@0.2.0 node_modules\grunt-contrib-csslint
└── csslint@0.10.0 (parserlib@0.2.5)

grunt-contrib-htmlmin@0.2.0 node_modules\grunt-contrib-htmlmin
├── each-async@0.1.3
├── pretty-bytes@0.1.2
├── html-minifier@0.5.6
└── chalk@0.4.0 (ansi-styles@1.0.0, strip-ansi@0.1.1, has-color@0.1.7)

grunt-contrib-compass@0.7.2 node_modules\grunt-contrib-compass
├── dargs@0.1.0
├── tmp@0.0.23
└── async@0.2.10

grunt-contrib-sass@0.7.4 node_modules\grunt-contrib-sass
├── dargs@0.1.0
├── win-spawn@2.0.0
├── which@1.0.5
├── async@0.9.0
└── chalk@0.5.1 (escape-string-regexp@1.0.1, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)

grunt-contrib-concat@0.4.0 node_modules\grunt-contrib-concat
└── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)

grunt-contrib-watch@0.6.1 node_modules\grunt-contrib-watch
├── async@0.2.10
├── gaze@0.5.1 (globule@0.1.0)
├── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, noptify@0.0.3, qs@0.5.6)
└── lodash@2.4.1

grunt-contrib-cssmin@0.9.0 node_modules\grunt-contrib-cssmin
├── clean-css@2.1.8 (commander@2.1.0)
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1)

grunt-contrib-uglify@0.4.1 node_modules\grunt-contrib-uglify
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
├── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1)
└── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)

grunt-contrib-jst@0.6.0 node_modules\grunt-contrib-jst
├── lodash@2.4.1
├── chalk@0.4.0 (has-color@0.1.7, strip-ansi@0.1.1, ansi-styles@1.0.0)
└── grunt-lib-contrib@0.7.1 (strip-path@0.1.1, maxmin@0.1.0)

grunt-contrib-jade@0.11.0 node_modules\grunt-contrib-jade
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── jade@1.2.0 (commander@2.1.0, character-parser@1.2.0, mkdirp@0.3.5, constantinople@2.0.1, transformers@2.1.0, with@2.0.0, monocle@1.1.51)

grunt-contrib-jshint@0.10.0 node_modules\grunt-contrib-jshint
├── hooker@0.2.3
└── jshint@2.5.5 (strip-json-comments@0.1.3, underscore@1.6.0, exit@0.1.2, console-browserify@1.1.0, shelljs@0.3.0, minimatch@0.4.0, cli@0.6.4, htmlparser2@3
.7.3)

grunt-contrib-coffee@0.10.1 node_modules\grunt-contrib-coffee
├── chalk@0.4.0 (strip-ansi@0.1.1, ansi-styles@1.0.0, has-color@0.1.7)
├── lodash@2.4.1
└── coffee-script@1.7.1 (mkdirp@0.3.5)

grunt-contrib-handlebars@0.8.0 node_modules\grunt-contrib-handlebars
├── grunt-lib-contrib@0.5.3 (zlib-browserify@0.0.1)
├── chalk@0.4.0 (strip-ansi@0.1.1, ansi-styles@1.0.0, has-color@0.1.7)
└── handlebars@1.3.0 (optimist@0.3.7, uglify-js@2.3.6)

grunt-contrib-connect@0.7.1 node_modules\grunt-contrib-connect
├── connect-livereload@0.3.2
├── async@0.2.10
├── open@0.0.4
├── portscanner@0.2.2 (async@0.1.15)
└── connect@2.13.1 (uid2@0.0.3, methods@0.1.0, pause@0.0.1, debug@0.8.1, cookie-signature@1.0.1, qs@0.6.6, fresh@0.2.0, bytes@0.2.1, raw-body@1.1.3, buffer-c
rc32@0.2.1, batch@0.5.0, cookie@0.1.0, compressible@1.0.0, negotiator@0.3.0, send@0.1.4, multiparty@2.2.0)

grunt-contrib-nodeunit@0.3.3 node_modules\grunt-contrib-nodeunit

grunt-contrib-stylus@0.15.1 node_modules\grunt-contrib-stylus
├── async@0.8.0
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
├── nib@1.0.3 (stylus@0.37.0)
├── stylus@0.44.0 (css-parse@1.7.0, debug@2.0.0, sax@0.5.8, glob@3.2.11, mkdirp@0.3.5)
└── lodash@2.4.1

grunt-contrib-qunit@0.4.0 node_modules\grunt-contrib-qunit
└── grunt-lib-phantomjs@0.5.0 (eventemitter2@0.4.14, semver@1.0.14, temporary@0.0.8, phantomjs@1.9.7-15)

grunt@0.4.5 node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── grunt-legacy-util@0.2.0
├── hooker@0.2.3
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.5)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── lodash@0.9.2
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

grunt-contrib-compress@0.8.0 node_modules\grunt-contrib-compress
├── prettysize@0.0.3
└── archiver@0.8.1 (buffer-crc32@0.2.3, lazystream@0.1.0, readable-stream@1.0.31, zip-stream@0.3.7, file-utils@0.1.5, lodash@2.4.1)

grunt-contrib-less@0.11.4 node_modules\grunt-contrib-less
├── async@0.2.10
├── chalk@0.5.1 (escape-string-regexp@1.0.1, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── maxmin@0.1.0 (pretty-bytes@0.1.2, chalk@0.4.0, gzip-size@0.1.1)
├── lodash@2.4.1
└── less@1.7.5 (graceful-fs@3.0.2, mime@1.2.11, mkdirp@0.5.0, source-map@0.1.38, clean-css@2.2.15, request@2.40.0)

grunt-contrib-jasmine@0.6.5 node_modules\grunt-contrib-jasmine
├── rimraf@2.1.4 (graceful-fs@1.2.3)
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
├── es5-shim@2.3.0
├── lodash@2.4.1
└── grunt-lib-phantomjs@0.4.0 (eventemitter2@0.4.14, semver@1.0.14, temporary@0.0.8, phantomjs@1.9.7-15)

grunt-contrib-imagemin@0.7.2 node_modules\grunt-contrib-imagemin
├── pretty-bytes@0.1.2
├── async@0.7.0
├── chalk@0.4.0 (has-color@0.1.7, strip-ansi@0.1.1, ansi-styles@1.0.0)
└── imagemin@0.4.9 (stat-mode@0.2.0, ware@0.3.0, rimraf@2.2.8, tempfile@0.1.3, nopt@3.0.1, image-type@0.1.4, fs-extra@0.10.0, imagemin-svgo@0.1.1, imagemin-j
pegtran@0.1.0, imagemin-pngquant@0.1.3, imagemin-optipng@0.1.0, imagemin-gifsicle@0.1.1)

grunt-contrib-yuidoc@0.5.2 node_modules\grunt-contrib-yuidoc
└── yuidocjs@0.3.50 (rimraf@2.2.8, graceful-fs@2.0.3, marked@0.2.10, minimatch@0.2.14, express@3.1.2, yui@3.14.1)

grunt-contrib@0.11.0 node_modules\grunt-contrib
└── matchdep@0.3.0 (stack-trace@0.0.7, resolve@0.5.1, globule@0.1.0, findup-sync@0.1.3)

プラグインが追加されたか確認する
C:\node.js\grunt>type package.json
{
  "name": "grunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib": "^0.11.0",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-coffee": "^0.10.1",
    "grunt-contrib-compass": "^0.7.2",
    "grunt-contrib-compress": "^0.8.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-csslint": "^0.2.0",
    "grunt-contrib-cssmin": "^0.9.0",
    "grunt-contrib-handlebars": "^0.8.0",
    "grunt-contrib-htmlmin": "^0.2.0",
    "grunt-contrib-imagemin": "^0.7.2",
    "grunt-contrib-jade": "^0.11.0",
    "grunt-contrib-jasmine": "^0.6.5",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-jst": "^0.6.0",
    "grunt-contrib-less": "^0.11.4",
    "grunt-contrib-nodeunit": "^0.3.3",
    "grunt-contrib-qunit": "^0.4.0",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-contrib-sass": "^0.7.4",
    "grunt-contrib-stylus": "^0.15.1",
    "grunt-contrib-symlink": "^0.3.0",
    "grunt-contrib-uglify": "^0.4.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-yuidoc": "^0.5.2"
  }
}
これで、インストールは完了ですワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ
早速Gruntを実行してみたいと思います!

Gruntfile.jsを新規作成する
今回は、C:\node.js\grunt\Gruntfile.jsに新規ファイルを作って次の記述を書きました。
この記述を書くことで指定されたファイルが更新されたことを通知しくれるようになりますヘー(´ν_.` )ソウナンダ

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //watchの設定
    watch: {
      dev: {
        files: ["sample.txt"]
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
};
sample.txtを新規作成する
今回はC:\node.js\grunt\sample.txtに新規で空ファイルを作成しました。
gruntを実行する。次のようにWaiting...と表示されれば監視が正常に開始されています。
C:\node.js\grunt>grunt watch
Running "watch" task
Waiting...
監視がされたらsample.txtの中身を適当に文字などを入力して保存します。
そうするとコマンドプロンプトの画面にsample.txtが変わったことを通次のように通知してくれます。スゲ━━━━━━ヽ(゚Д゚)ノ━━━━━━!!!!

C:\node.js\grunt>grunt watch
Running "watch" task
Waiting...
>> File "sample.txt" changed.
Completed in 0.001s at Fri Sep 05 2014 22:42:09 GMT+0900 (東京 (標準時)) - Waiting...
中断は「control+C」を入力しgrunt watchを中断できます。
C:\node.js\grunt>grunt watch
Running "watch" task
Waiting...
>> File "sample.txt" changed.
Completed in 0.001s at Fri Sep 05 2014 22:42:09 GMT+0900 (東京 (標準時)) - Waiting...
^Cバッチ ジョブを終了しますか (Y/N)? y
キタ――(゚∀゚)――!!

ひとまず、これでGruntによるファイル更新のチェックが行えるようになりました。
次回は、jsファイルの結合・圧縮を行いたいと思います(ΦωΦ)フフフ…

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿