Grunt - Getting Started

  • 30
    Like
  • 0
    Comment
More than 1 year has passed since last update.

まず読む

Getting started - Grunt: The JavaScript Task Runner
  • Official Manual
ビルドプロセスの自動化で効率アップ // Speaker Deck
  • 概要説明スライド
[JavaScript] Jenkinsの対抗馬になるか?ビルド管理をJSで行うGrunt.jsの内容説明とスタートアップ - YoheiM .NET
  • Briefing
node製の自動化ツール「grunt.js」の参考サイトまとめ | riatw.me
  • 参考サイトまとめ
Gruntで快適な環境を整備したい!【インストール編】
  • パッケージ概要説明あり

Integrate with IDE

[JavaScript] IntelliJ IDEAでGruntのタスクをしたい « きんくまデザイン
  • IntelliJ IDEAでのGrunt設定方法
PhpStormでGruntを使う | mawatari.jp
  • PhpStormでの設定例

Actual Cases

[JavaScript] GruntでJS/CSSをビルド(JS結合・圧縮) | ルクサエンジニアのブログ
  • jsとcss結合圧縮の最低限サンプル
gruntで快適JS/CSSビルド生活 - Takazudo hamalog
  • jsとcssをまとめる。jsはminify。
  • Coffeeスクリプトもコンパイル
Grunt導入してみた | blog.bouze.me
  • Coffeeコンパイル、Sassコンパイル、JSテンプレートコンパイル
  • html修正されたらLiveReloadでブラウザリロード
Gruntで自動ブラウザ更新 - Shut the fuck up and write some code
  • 自動ブラウザ更新、livereloadではなく、watchを使用
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
  • autoprefixer, imagemin, pngmin の説明あり
  • node command promptへのエイリアス登録方法
grunt rsyncとgrunt watchを使って開発サーバーをローカルと同期する | kanonjiのブログ
  • Gruntから他サーバへデプロイ
node.jsアプリのデプロイにやさしい grunt-rsync | Developers.IO
  • ちょっとすぐデプロイ
各種ブラウザを同期して手軽に複数環境での確認ができるようになるgrunt-browser-syncについて紹介するよ | REFLECTDESIGN
  • 複数ブラウザデバイスでLiveReload

Using with Other Tools

AngularJSとGruntで楽しく開発 - tuvistavie
  • プロジェクトのディレクトリ構成例がある
  • Yo + Grunt + Bower for Angular JS
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する「styleDocco」の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
  • CSSスタイルガイド生成
Bootstrap3 LESSのカスタマイズ -環境設定編 | ajike switch
  • Twitter BootstrapのLESSビルドをGruntで

Lint

kaede.cc gruntでhtmllintする
  • grunt-htmlでHTMLをLint
Grunt: html と lint/hint/validation | deadwood
  • grunt-html, grunt-html-hint, grunt-html-inspectorの紹介
CSS書く人なら絶対入れとけのgrunt-contrib-csslintについて紹介するよ - Qiita
  • grunt-contrib-csslintの紹介

grunt-htmlhint

  • lintする内容をオプションで指定できる(grunt-htmlだと厳しすぎてうるさいときなど便利) ###### yaniswang/grunt-htmlhint
  • grunt-htmlhintのマニュアル
Rules · yaniswang/HTMLHint Wiki
  • htmlhintで使えるオプション一覧

scaffold

かずぽんブログ • grunt-initでプロジェクトにscaffoldな仕組みを導入する
  • grunt-initを使って単体テストのテンプレートコード生成

作ってみた

ディレクトリ/ファイル構成

├─dest
│ ├─hogehoge_pkg.js
│ ├─hogehoge_pkg.min.js
│ ├─hogehoge_pkg.css
│ └─hogehoge_pkg.min.css
├─lib
│ ├─css
│ │ ├─hoge1.css
│ │ └─hoge2.css
│ └─js
│   ├─hogehoge1.js
│   ├─hogehoge2.js
│   └─hogehoge3.js
├─samples
│ └─hogehoge_sample.html
├─Gruntfile.coffee
└─package.json
  • destディレクトリ配下に、jsとcssの連結されたものと、さらに圧縮されたファイルができる
  • jsファイル群は依存関係を持ち、hogehoge1.js -> hogehoge2.js -> hogehoge3.jsの順で読み込む必要あり

nodeプラグインの構成

package.json
{
  "name": "hoge_sample",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.3.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-connect": "~0.6.0"
  }
}
  • nodeをインストール後、npm install -g grunt-cliでgrunt-cliはグローバルでインストールしておく
  • トップディレクトリにてnpm installで、依存パッケージをまとめてインストール(ローカル)

Grunt設定ファイル

Gruntfile.coffee
module.exports = (grunt) ->
  grunt.initConfig
    pkg_name: "hogehoge_pkg"
    dest_dir: "dest/"

    concat:
      js_files:
        src: [
          "lib/js/hogehoge.js",
          "lib/js/hogehoge2.js",
          "lib/js/hogehoge3.js"
        ]
        dest: "<%= dest_dir %><%= pkg_name %>.js"
      css_files:
        src: "lib/css/*.css"
        dest: "<%= dest_dir %><%= pkg_name %>.css"

    uglify:
      options:
        banner: "/* <%= pkg_name %> <%= grunt.template.today('yyyy-mm-dd') %> */\n"
      build:
        src: "dest/<%= pkg_name %>.js"
        dest: "dest/<%= pkg_name %>.min.js"

    cssmin:
      dist:
        src: "dest/<%= pkg_name %>.css"
        dest: "dest/<%= pkg_name %>.min.css"

    watch:
      options:
        livereload: true

      concat:
        files: [
          "<%= concat.js_files.src %>",
          "<%= concat.css_files.src %>"
        ]
        tasks: "concat"

      uglify:
        files: "<%= concat.js_files.dest %>"
        tasks: "uglify"

      html_files:
        files: "**/*.html"

      css_files:
        files: "lib/css/*.css"

    connect:
      site:
        options:
          hostname: "*",
          port: 8000

  grunt.loadNpmTasks "grunt-contrib-concat"
  grunt.loadNpmTasks "grunt-contrib-uglify"
  grunt.loadNpmTasks "grunt-contrib-cssmin"
  grunt.loadNpmTasks "grunt-contrib-watch"
  grunt.loadNpmTasks "grunt-contrib-connect"

  grunt.registerTask "build" , [
    "concat",
    "uglify",
    "cssmin"
  ]

  grunt.registerTask "default", ["connect","watch"]
  • grunt buildで、dest配下のファイルを生成
  • gruntすると内部Webサーバが立ち上がり、watchでの監視状態に入る。
    • ブラウザからlocalhost:8000でhtmlファイルにアクセスできる
    • js、css、htmlファイルのいずれかが変更されると下記の動作が行われる。
    • dest配下のパッケージされたjs/cssを生成
    • HTMLファイルをブラウザで開いていれば自動リロードされる(※ブラウザ側にLiveReloadのプラグインを入れておく必要はあり)