【Task Runner】GRUNTを使って作業効率アップ! | Webクリエイターな備忘録

当サイトはフリーランスでWeb制作や動画制作をするクリエイターの備忘録なメモサイトです。 Webサイト制作で気になった事、動画撮影や動画制作で気になった事、また個人的に気になるでき事、日常の事などを気ままに勝手に書き綴っています。

★当サイトではアフィリエイト広告を利用しています

【Task Runner】GRUNTを使って作業効率アップ!

【Task Runner】Gruntを使って作業効率アップ!

少しずつですが最近のWeb業界での作業環境について行くために、自分でいろいろと試してます。

その中でも最近は、GitGruntが個人的に気になっております。しかしプログラムなどを見ると頭痛くなりますので、今まで見ないフリをしてましたが、そーも言ってられません。

Gruntからやってみる

自分の場合は、基本一人でWeb制作をすることがおおいのでGitではなくGruntの方からやってみよう思います。
Gruntは、いろいろなプラグインを入れる事によって面倒な作業を自動的でやってくれるツールだそうです。

Gruntでやりたい事&フォルダ構造

まずはGruntにやらせたい事を考えてみます。

  • 開発側でデータ更新すると納品データ自動的にビルドされるようにしたい
  • CSSはSassで記述し更新すると、CSSが圧縮されて自動的にコンパイルされるようにしたい
  • 画像を自動的に最適化されるようにしたい
  • 開発側では、データ更新されると自動的にライブリロードさせたい
geunt2

Gruntのフォルダ構造はこんな感じで

「release」フォルダ内は、Gruntから自動で出力される予定です。

Gruntをパソコンに設定してみる

早速、GruntをPCに設定してみます。

GruntNode.jsが必要なのでPCにインストールします。

Node.jsサイトよりインストーラーをダウンロードしてサクッと。

インストールできると、全てのプログラム一覧にNode.jsができますので、そちらの「Node.js command prompt」を起動します。

Gruntのインストール前に作業フォルダ(D:\projectTest)を作成します。
「Node.js command prompt」内で上記で作った作業フォルダに移動し、

cd /d D:\projectTest

まずgrunt-cliをインストール、

npm install -g grunt-cli

次にpackage.jsonの作成、

npm init

簡単な会話形式になっているので質問に答えていく(わからなければEnterを押すだけでも可)

そしてGruntのインストール

npm install grunt --save-dev

最後にGrunt推奨のプラグイン群をインストールします。

npm install grunt-contrib --save-dev

その他プラグインも追加でインストールします。

・grunt-autoprefixer(ベンダープレフィックスを調整してくれる)

npm install grunt-autoprefixer --save-dev

・grunt grunt-contrib-livereload(ファイルが更新されたらブラウザをリロード)

npm install grunt grunt-contrib-livereload --save-dev

・grunt-combine-media-queries(バラバラに記述されたメディアクエリをまとめる)

npm install grunt grunt-combine-media-queries --save-dev

・grunt-csscomb(CSSプロパティをソートしてくれる)

npm install grunt grunt-csscomb --save-dev

・grunt-open(なんでも開けてくれる)

npm install --save-dev grunt-open

これで、Grunt環境設定が完了しましたので、作業に移れます。

Gruntfile.js作成

Gruntは、各種プラグインの使用やGruntに何をさせたいかを書いたJavaScriptファイルを作成する必要があります。

こちらのJavaScriptファイルは、CoffeeScriptでも記述できるそーですが解らないのでJavaScriptで作成します。
作成すると偉そうに言ってますが詳しく解らないので、Gruntの各プラグインチュートリアルや有志の方のサイトを参考に記述していきます。

できたのがこちら

'use strict';
// livereload用の初期設定
var
    path = require('path'),
    lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
    folderMount = function folderMount(connect, point) {
        return connect.static(path.resolve(point));
    };
 
module.exports = function(grunt) {
    var pkg, taskName;
    pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        // SassとCompassをコンパイルします。
        compass: {
            dist: {
                options: {
                    config: 'develop/config.rb'
                }
            }
        },
        watch: {
            // Sassファイルが更新されたら、cmqとcsscombのタスクを実行します。
            sass: {
                files: ['develop/sass/style.scss'],
                tasks: ['compass', 'cmq', 'csscomb'],
                options: {
                    //変更されたらブラウザを更新
                    livereload: true,
                    nospawn: true
                }
            }
        },
        // http://localhost:9001/で表示を確認することができます。ブラウサ自動更新    
        connect: {
            livereload: {
                options: {
                    port: 9001,
                    middleware: function(connect, options) {
                        return [lrSnippet, folderMount(connect, 'develop/')];
                    }
                }
            }
        },
		// open gruntコマンド実行時にページをブラウザで開く
		open: {
			server: {
				path: 'http://localhost:<%= connect.livereload.options.port %>'
			}
		},
        // htmlmin HTMLの圧縮
        htmlmin: {
            all: {
                options: {
                    removeComments: true,
                    removeCommentsFromCDATA: true,
                    removeCDATASectionsFromCDATA: true,
                    collapseWhitespace: true,
                    removeRedundantAttributes: true,
                    removeOptionalTags: true
                },
            expand: true,
            cwd: 'develop/',
            src: ['**/*.html'],
            dest: 'release/'
            }
        },
        // バラバラに記述されたメディアクエリをまとめることができます。
        cmq:{
            options: {
                log: false
            },
            dev: {
                files: {
                    'develop/css/': ['develop/css/style.css']
                }
            }
        },
        // csscombでCSSプロパティを揃えます。
        csscomb:{
            dev:{
                expand: true,
                cwd: 'develop/css/',
                src: ['*.css'],
                dest: 'develop/css/'
            }
        },
        // cssmin CSSの圧縮
        cssmin: {
            all: {
                expand: true,
                cwd: 'develop/css/',
                src: ['style.css'],
                dest: 'release/css/'
            }
        },
        
        // copy ファイルのコピー
        copy: {
            html: {
                expand: true,
                cwd: 'develop/',
                src: ['**/*.html'],
                dest: 'release/'
            },
            css: {
                expand: true,
                cwd: 'develop/',
                src: ['css/**/*.css'],
                dest: 'release/'
            },
            images: {
                expand: true,
                cwd: 'develop/',
                src: ['images/**'],
                dest: 'release/'
            },
            js: {
                expand: true,
                cwd: 'develop/',
                src: ['js/**'],
                dest: 'release/'
            }
        },
        
        // clean 不要ファイルを削除
        clean: {
            // 最初にreleaseディレクトリ内を削除
            deleteReleaseDir: {
                src: 'release/'
            }
        }
    });
 
    // GruntFile.jsに記載されているパッケージを自動読み込み
    for(taskName in pkg.devDependencies) {
        if(taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }

    // gruntコマンドで実行するタスクの設定
    // デフォルトタスク(develop)
    grunt.registerTask('default', ['connect', 'open', 'watch:sass']);
    
    // 公開時に実行するタスク(release)
    grunt.registerTask('release', ['clean:deleteReleaseDir', 'cmq', 'csscomb', 'copy', 'htmlmin', 'cssmin']);
 
    grunt.registerTask('eatwarnings', function() {
        grunt.warn = grunt.fail.warn = function(warning) {
            grunt.log.error(warning);
        };
    });
};

config.rb作成

Sass & Compassを動作させる為に、「config.rb」が必要なので、こちらも有志の方のサイトを参考に記述させて頂きました。

できたのがこちら

# ---------------------------------------------
# PATH Setting
# ---------------------------------------------

# ------------------------------------
# HTTP Path
# ------------------------------------
http_path = "develop/"
 
# ------------------------------------
# CSS Directory
# ------------------------------------
css_dir = "develop/css/"
 
# ------------------------------------
# Sass Directory
# ------------------------------------
sass_dir = "develop/sass/"
 
# ------------------------------------
# Image Directory
# ------------------------------------
images_dir = "develop/images/"
 
# ------------------------------------
# JavaScript Directory
# ------------------------------------
javascripts_dir = "develop/js/"
 
# ---------------------------------------------
# Other Setting
# ---------------------------------------------
# .sass-cacheを出力するかどうか
cache = false
 
# クエストにクエリ文字列付けてキャッシュ防ぐ
asset_cache_buster :none
 
# Sassファイルをブラウザで確認
sass_options = { :debug_info => false }
 
# cssの主力形式
output_style = :expanded
 
# trueで相対パス、falseで絶対パス
relative_assets = true
 
# CSSファイルにSassファイルの何行目に記述されたものかを出力する
line_comments = false

Gruntの環境設定ができたら動作確認!

Gruntの環境ができましたので、早速ちゃんと動作するか試してみます。
まずは開発側から

grunt

次に納品データ側を試してみます、

grunt release

ちゃんと動作しているようです。

ちょっとハマッタ事

GruntでSass&Compassを動かそうと思っていたのですが、当初Gruntfile.jsやconfig.rbを記述しても動作してくれませんでした。
原因が、Rubyやcompassを事前にPC内にインストールしていなかった事でした。原因がわかれば当たり前のことなのですが、これがわかるのに半日近くネット内を彷徨ってしまいました。

コメントは受け付けていません。