SONICMOOV Googleページ

Web制作自動化ツールGrunt入門 インストール&カスタムタスク編

Web制作自動化ツールGrunt入門 インストール&カスタムタスク編

  • このエントリーをはてなブックマークに追加

最近Javascriptメインになりつつあるフロントエンジニアのピーターです。 今回は社内でも標準化されてきたGruntについてまとめたいと思います。

目次

Gruntとは

Javascriptで記述するタスクランナーのことです。 たとえば、大きめのWebサイトを作ってるとします。

CSSはSASSで記述してるのでコンパイルが必要です。修正毎にコンパイルするの結構手間ですが、エディターを使えばなんとかなります。 スタイルガイドも作ってほしいと言われたので、これも修正毎に出力しないといけません。 他にもCSSだけでなくPNG圧縮もしないと、、 となると本来のコーディング作業時間がどんどん削られてしまいます。

こういった 「SASSのコンパイル」「スタイルガイドの出力」「PNG圧縮」といったタスクを自動で行ってくれる のがタスクランナーなのです。

Gruntはそのタスクランナーのなかでいま最も普及していると言われているものです。

Gruntを使用するための環境構築

とはいえ、Gruntを動かす環境の構築は必要となってしまいますが、一度構築すれば今後も使えますし、グループ開発で新しいメンバーが参加してもGruntの設定を共有することですぐに開発にとりかかれるのでしばしおつき合いください。

また弊社はWindowsが主流なのでWindowsをベースに話を進めますのでご了承ください。

実行環境

  • windows7

Git

TortoiseGitなどがインストールされている場合はいれなくても大丈夫です

今回はGit公式のインストーラーをインストールします
Gitダウンロード(アクセスすると、ファイルが自動でダウンロードされます)

Python

Pythonは後述するnvmwの実行に必須です。2.7以上をインストールします。

Pythonダウンロード

nvmw

Node.jsのバージョン管理ツールのnvmのwindows版です

インストール方法

コマンドプロンプトを立ち上げて以下を実行します。 まずgithubからプロジェクトをクローンします。

git clone git://github.com/hakobera/nvmw.git "%HOMEDRIVE%%HOMEPATH%\.nvmw"

そのあと環境変数にnvmwのディレクトリパスを追加します

set "PATH=%HOMEDRIVE%%HOMEPATH%\.nvmw;%PATH%"

最後に以下のコマンドでインストールされているかを確認します

nvmw help

Node Version Manager for Windows
...

ヘルプが表示されればインストール完了です。

Node.js

nvmwはNode.jsのバージョン管理ツールなのでこれをインストールしただけではまだNode.jsは使えません。

ここでは社内でよく使ってるv0.10.8をインストールしています。

nvmw install v0.10.8
nvmw use v0.10.8
Now using Node v0.10.8

今後インストールされるNPMはv0.10.8と紐づくのでバージョンを変更するときは注意しましょう。

Gruntのインストール手順

Grunt公式ページ

必要なファイル

ここからようやくGruntの出番です。 Gruntに必要なファイルは4種類あります。

grunt-cli

grunt-cliは Grunt command line interface のことで、 コンピュータのどこからでもgruntコマンドを呼び出せるようにします。

grunt

gruntの本体です。

package.json

プロジェクトの設定ファイルでどんなプロジェクト名かとかプロジェクトの説明などを記述します。

Gruntfile.js

どのタスクをどんな設定で実行するのかを記述する設定ファイルです。

新規プロジェクトをつくる

フォルダの構成

基本的にフォルダ直下にはhtmlなどのファイルは置かない方がいいと思います。srcにsassファイルなどをいれておいて、gruntでdstのcssフォルダに出力するみたいな構造にしておくといい気がします。

参考例

.
├── Gruntfile.js
├── README.md
├── dst
│   ├── css
│   ├── html
│   ├── img
│   └── js
├── node_modules
├── package.json
├── src
│   └── js
└── test

1)grunt-cliのインストール

まずはGrunt本体のインストールです

npm install -g grunt-cli

-g はグローバルオプションで今後はどこからでも呼び出せるようになります。

2)package.json生成

package.jsonの方をコマンドで生成します。

npm init

このコマンドをうつとプロンプト上で対話的に設定が行えます。

ひとまずpackage.jsonはこのままにしておきます。

3)gruntのインストール

npm install grunt –save-dev

–save-devはインストール時にpackage.jsonのdevDependencyに追加されるオプションです。 さらに同じ階層にnode_modulesというフォルダが作られ、そこにgruntが収められていることがわかります。

またタスクに必要なNodeモジュールも上記のような方法でダウンロードします。

4)Gruntfile.js

これはgrunt-initなどを使えばGruntfile.jsを簡単に作れるのですが、今回はエディターを使って実装してみます。 grunt-initなどが気になった方は調べてみるときっと幸せになれます。

Gruntfile.jsの書き方としてまず以下のような代入式を用意します。

module.exports = function (grunt) {
  //--ここいろいろ書く
};

次にその中に

module.exports = function (grunt) { //package.jsonの読み込み var pkg = grunt.file.readJSON('package.json');</p>
//タスクの設定 grunt.initConfig({ //各タスクの詳細設定 });
//devDependency内のgrunt-*と書かれたNodeモジュールの読み込み Object.keys(pkg.devDependencies).forEach(function (devDependency) { if (devDependency.match(/^grunt-/)) { grunt.loadNpmTasks(devDependency); } });
//タスクの実行名を登録
//'default'であればgruntだけでおk
grunt.registerTask('default', ['タスク名']); };

カスタムタスクサンプル

では実際にマークアップで役立ちそうなGruntfileをつくってみました。このGruntfileには以下のタスクが設定されています。

  • grunt-compass-multiple
    • scssが増えてくると重くなるcompassを並列実行してくれるタスク
  • grunt-autoprefixer
    • ベンダープレフィックスを自動でつけてくれるタスク
  • grunt-pngmin
    • PNG画像を高圧縮・高速実行してくれるタスク
  • grunt-contrib-watch
    • ファイル変更を監視し、変更が行われたらタスクを実行したりできます
  • grunt-contrib-connect
    • Xamppなどを使わずにローカルで確認ができるタスク
module.exports = function (grunt) {

  //package.jsonの読み込み
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({

    compassMultiple: {
      dist: {                   // Target
        options: {              // Target options
          sassDir: 'src/sass',
          cssDir: 'src/css',
          environment: 'production'
        }
      }
    },

    autoprefixer: {
      // prefix all files
      target: {
        expand: true,
        flatten: true,
        src: 'src/css/*.css',
        dest: 'dst/css/'
      }
    },

    pngmin: {
      compile: {
        options: {},
        files: [
          {
            src: 'src/img/**/*.png',
            dest: 'dst/img/'
          }
        ]
      }
    },

    watch:{
      scss:{
        files:['src/sass/{,**/}*.{scss,sass}'],
        tasks:['compassMultiple','autoprefixer']
      },
      options:{
        livereload:true
      },
      livereload:{
        options:{
          livereload:'&lt;%= connect.options.livereload %&gt;'
        },
        files:['src/sass/**/*.css'],
      }
    },

    connect:{
      options:{
        port:9000,
        livereload:35729,
        hostname:'localhost'
      },
      livereload:{
        options:{
          open:true,
          base:[
            'dst/'
          ]
        }
      }
    }
  });

  //devDependency内のgrunt-*と書かれたNodeモジュールの読み込み
  Object.keys(pkg.devDependencies).forEach(function (devDependency) {
      if (devDependency.match(/^grunt\-/)) {
          grunt.loadNpmTasks(devDependency);
      }
  });

  grunt.registerTask('default', ['compassMultiple','autoprefixer','pngmin','connect','watch']);
};

また実際には上記5つのタスクを実行するためには事前に下記のコマンドを打ち込んでパッケージをインストールしておく必要があります。

npm install --save-dev grunt-compass-multiple
npm install --save-dev grunt-autoprefixer
npm install --save-dev grunt-pngmin
npm install --save-dev grunt-contrib-watch
npm install --save-dev grunt-contrib-connect

また上記のGruntfileを使ったサンプルプロジェクトをGithubにあげましたので、適当なディレクトリに移動してから

git clone https://github.com/svartalfheim/GruntForMarkup.git

するとgithubからプロジェクトがダウンロードできるので プロジェクト内に移動したあと、

npm install

すると必要なnode_modulesがインストールされますので、

grunt

とやるとタスクが実行されるようになります。

https://github.com/svartalfheim/GruntForMarkup

あとはやりたいことにあわせてタスクを追加したりしてカスタマイズしてみてください。

以上になります。 ここまでお付き合いありがとうございました。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

ピーター(フロントエンドエンジニア)

ソリューション事業部のエンジニアのピーター。主にiOS・Android開発の案件を担当しています。ニヤニヤが止まりません。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation