compassでsassのコンパイル・スプライト画像生成の続きです。
目次
環境構築
前述の1を実行時点でgruntコマンド、package.jsonが作成されている。
・gruntインストール
npm install -g grunt-cli
・package.json生成。選択は全てエンターで大丈夫です。
npm init
・グラントファイルを使用するプロジェクトのルート上で下記を実行
npm install grunt --save-dev
・使用するnode-moduleをインストール
Gruntfileで使用するnode-moduleをプロジェクトルートディレクトリ上でインストール
下記moduleを使用してconcat,uglify等を行う。
前回記載したcompassもこのモジュールを使用し管理する。
npm install grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-compass grunt-contrib-handlebars --save-dev
Gruntfile作成
ルートディレクトリ上でGruntfile.jsを作成
vim Gruntfile.js
モジュールの設定
下記はインストールしたモジュールの設定例
Gruntfile.jsのinigConfig内で設定
必要に応じてconcat(結合), uglify(jsの圧縮),copy,rename,cleanなどを設定追加する。
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
root_dir: './src/main/webapp',
pkg:grunt.file.readJSON("package.json"),
compass: {
dev: {
options : {
config : 'config.rb',
environment : 'development',
}
},
prod: {
options : {
config : 'config.rb',
environment : 'production'
}
}
},
cssmin:{//ミニファイ
minify:{
src:[
'<%= root_dir %>/css/component/*.css',
'<%= root_dir %>/css/utility/*.css',
'<%= root_dir %>/css/project/*.css'
],
dest: '<%= root_dir %>/css/all.min.css'
}
},
//省略 concat(結合), uglify(jsの圧縮)も同様に作成する
});
}
watchタスク追加
watchタスクとは
上記で設定したモジュールの動きを制御する。
ローカル環境等でファイル変更時(保存時)に自動で設定したタスクを実行する。
Gruntfile.jsのinigConfig内で設定
階層は他のcssmin等と同様
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
//*************compass,cssmin等モジュール設定略************
watch:{
js: {
files: [
'<%= root_dir %>/js/**/*.js',
'<%= root_dir %>/js/**/*.setting'
],
tasks: ['concat', 'uglify'] // 実行させるタスク
},
scss:{
files: [
'<%= root_dir %>/scss/**/*.scss',
],
tasks: [
'compass:dev'
]
},
css : {
files: [
'<%= root_dir %>/css/**/*.css'
],
tasks: [
'cssmin'
] // 実行させるタスク
}
}
});
}
タスク設定
各環境(local,dev,本番等)で実行したいタスクを設定する。
下記はdevではconcat,uglifyなどは行わずdevでのみ実行している。
jenkins等デプロイ時にタスクを実行することも可能です。
Gruntfile.jsのinigConfig外で設定
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
//cssmin,watch等モジュール設定略
});
grunt.registerTask('dev_watch', ['compass:dev', 'watch']);
grunt.registerTask('prd', ['compass:prd', 'concat', 'cssmin', 'uglify']);
}