Edited at

Gruntのテンプレートファイルを作ってみた。

More than 5 years have passed since last update.

いろいろおかしかったり、すっきりしないところがあるけど、

自分用にテンプレートファイルを作ってみた。

あまり大したことはやってなくて、だいたいのタスクはこんなかんじ。

(個人的には、Livereload + compassさえあれば満足。)

● grunt (通常コマンド)

・Compassのコンパイル
・JPEG、GIF画像の圧縮
・PNG画像の圧縮
・webサーバーを起動(http://localhost:8000/)
・ファイルの更新監視(Livereload)

● grunt r (納品用的な)
・JSファイルの結合
・JSファイルの縮小化
・CSSの縮小化

● grunt g (スタイルガイド編集用)
・スタイルガイドの作成(KSS)


ディレクトリ

 [projectName]    ...< プロジェクトのルート >

├ [develop] ...< 開発用ディレクトリ >
├ [_scss] ...sassファイル
├ [css]
├ [js]
├ [img]
├ [_dist] ...圧縮済画像
├ [img]
├ index.html
├ [release] ...< 納品用ディレクトリ >
├ [css] ...圧縮済CSS
├ [js] ...圧縮済JS
├ [styleguide] ...< スタイルガイド用ディレクトリ >
├ [node_modules]...Gruntのプラグイン
├ package.json ...Gruntで使用するプラグイン等を記述
├ config.rb ...Compassの設定ファイル
├ Gruntfile.js ...Gruntの設定ファイル

もうちょっといい感じのフォルダ名にしたり、

すっきりさせたい...

圧縮済みの画像はデザイナーさんによって、お許しが出ないことがありそうなので、

別フォルダで管理。


package.json


package.json

{

"name": "grunt-template",
"version": "0.1.0",
"description": "",
"author": "",
"license": "",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-watch": "*",
"grunt-contrib-imagemin": "~0.7.1",
"grunt-pngmin": "~0.6.1",
"grunt-contrib-concat": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-connect": "*",
"grunt-contrib-compass": "~0.9.1",
"grunt-contrib-copy": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-clean": "~0.5.0",
"grunt-kss": "~0.4.0"
}
}

今後もう少し増やす予定...


Gruntfile.js


Gruntfile.js

module.exports = function(grunt){

// 読み込むプラグインの設定
var taskName;
var pkg = grunt.file.readJSON('package.json');
for(taskName in pkg.devDependencies) {
if(taskName.substring(0, 6) == 'grunt-') {
grunt.loadNpmTasks(taskName);
}
}

// 各タスクの設定
grunt.initConfig({

// package.jsonの定義
pkg: pkg,

// compass
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},

// 画像パス
paths: {
img: 'develop/img/',
imgdist: 'develop/_dist/img/'
},

// jpg.gif圧縮
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.{jpg,gif}',
dest: '<%= paths.imgdist %>'
}]
}
},

// png圧縮
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.png',
dest: '<%= paths.imgdist %>'
}]
}
},

// jsファイルの結合
concat: {
dist: {
src: 'develop/js/libs/*.js',
dest: 'release/js/scripts.js'
}
},

// jsファイルの圧縮
uglify: {
build: {
src: 'develop/js/scripts.js',
dest: 'release/js/scripts.min.js'
}
},

// cssの圧縮
cssmin: {
dev: {
src: 'develop/css/style.css',
dest : 'release/css/style.min.css'
}
},

// ファイルのコピー
copy: {
css: {
expand: true,
cwd: 'develop/',
src: ['css/style.min.css'],
dest: 'release/'
},
js: {
expand: true,
cwd: 'develop/',
src: ['js/scripts.min.js'],
dest: 'release/'
}
},

// ファイルの削除
clean: {
release: {
src: 'release'
}
},

// スタイルガイド
kss: {
options: {
template: 'styleguide/temp/', //テンプレート用のフォルダを指定
includeType: 'scss',
includePath: 'styleguide/css/style.scss'
},
dist: {
files: {
'styleguide/': ['styleguide/scss/']
}
}
},

// ローカルホスト
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost'
}
}
},

// watch
watch : {
options: {
livereload: true
},
html: {
files: ['**/*.html']
},
img : {
files: ['**/*.{png,jpg,gif}'],
tasks: ['imagemin', 'pngmin']
},
sass: {
files: ['**/*.scss'],
tasks: ['compass']
},
kss: {
files: ['styleguide/css/*.scss'],
tasks: ['kss']
}
}

});

// gruntコマンドで実行するタスクの設定
grunt.registerTask('default', ['connect','watch']);
grunt.registerTask('r', ['clean:release', 'copy', 'concat', 'uglify', 'cssmin']);
grunt.registerTask('g', ['kss','connect','watch:kss']);
};


ファイル構造をもう少しすっきりさせたい...

ディレクトリは変数でまとめた方がいいかも。


config.rb (Compass用)


config.rb

#ディレクトリ名の設定

http_path = "develop/"
css_dir = "develop/css"
sass_dir = "develop/_scss"
images_dir = "develop/img"
javascripts_dir = "develop/js"

#コメント削除
line_comments = false

#URL指定を相対パスに変更
relative_assets = true

# スプライト画像をユニークな名前じゃないやつで複製
on_sprite_saved do |filename|
if File.exists?(filename)
FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
end
end

# スプライト画像のCSSパスをユニークな名前じゃないやつに書き換え
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
end
end
end


Compassのディレクトリの設定はなんとなくこっちに記述

なんだかもやもやしてるところがいろいろあるけど、

随時更新していけたらなと思う。