Gruntを使って作業効率アップ? | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

Gruntを使って作業効率アップ?

Gruntを使って作業効率アップ?

少しずつですが最近の作業状況に、ついて行く為にいろいろと試してます。
その中でも最近は、GitやGruntが気になっておりますが、基本プログラムなどを見ると頭痛くなりますので
見ないフリをしてましたが、そーも言ってられません。

Gruntをやってみる

私の作業は基本一人でヤル事が多いので、まずはGruntの方からやってみよう思います。
Gruntは、いろいろなプラグインを入れる事によって面倒な作業を自動的でやってくれるツールだそうです。

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

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

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

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

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

Grunt設定

早速、GruntをPCに設定してみます。
GruntはNode.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内にインストールしていなかった事でした。原因がわかれば当たり前のことなのですが、これがわかるのに半日近くネット内を彷徨ってしまいました。

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