【Task Runner】GRUNTを使って作業効率アップ！
少しずつですが最近のWeb業界での作業環境について行くために、自分でいろいろと試してます。
その中でも最近は、GitやGruntが個人的に気になっております。しかしプログラムなどを見ると頭痛くなりますので、今まで見ないフリをしてましたが、そーも言ってられません。
この記事の目次
Gruntからやってみる
自分の場合は、基本一人でWeb制作をすることがおおいのでGitではなくGruntの方からやってみよう思います。
Gruntは、いろいろなプラグインを入れる事によって面倒な作業を自動的でやってくれるツールだそうです。
Gruntでやりたい事&フォルダ構造
まずはGruntにやらせたい事を考えてみます。
- 開発側でデータ更新すると納品データ自動的にビルドされるようにしたい
- CSSはSassで記述し更新すると、CSSが圧縮されて自動的にコンパイルされるようにしたい
- 画像を自動的に最適化されるようにしたい
- 開発側では、データ更新されると自動的にライブリロードさせたい
Gruntのフォルダ構造はこんな感じで
「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内にインストールしていなかった事でした。原因がわかれば当たり前のことなのですが、これがわかるのに半日近くネット内を彷徨ってしまいました。
