grunt

Gruntまとめ

More than 1 year has passed since last update.


Gruntとは


  • フロントエンドまわりのファイルの圧縮・結合・最適化などの手順をスクリプト化できるツール。
    (スクリプト化しておくと面倒な作業を一発で実行できたり、自動化の手順をほかの人と共有できる)

  • Mac OS XへUNIXコマンドを簡単に追加できるようになる。

  • PHP、Python、Rubyなどのプログラミング言語やMySQLなどの開発ライブラリを簡単な手順で追加することができる。


Gruntを使用する際に必要なファイル

「Gruntfile.js」

「package.json」

 npm init

 npm install grunt --save-dev

save-devオプションを付けると、

「package.jsonのdevDependencies」プロパティにモジュールを追加してくれます。

このpackage.jsonがあれば、

他の環境でも「npm install」とすれば同じようにモジュールがインストールされます。


導入手順

必要条件

•Node.js

node -v 

v0.10.25

•npm

  npm -v

1.3.24

•LESS 

  $ npm install less

•Gruntコマンドをインストールする 

Gruntコマンドを使えるようにします。

  $ npm install -g grunt-cli

■package.jsonを作る(#02)

•デスクトップにディレクトリ作る

 granttest

•その中に移動

  $ cd Desktop

$ cd granttest

•コマンドで雛形ファイルを作る

 $ npm init                       

※package.jsonができる。

※いろいろ聞かれるがReturnキーを連打していく

 $ npm install grunt --save-dev  ※※Gruntをインストールする。

(補足説明)

save-devオプションを付けると、

「package.jsonのdevDependencies」プロパティにモジュールを追加してくれます。

「package.json」にgruntモジュールが追加されています。

このpackage.jsonがあれば、

他の環境でも「npm install」とすれば同じようにモジュールがインストールされます。

フォルダの中には、

•package.json

    {

"name": "granttest",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "~0.4.4"
}
}


package.jsonをほかの人から渡された場合

    node_moduleフォルダを削除

$ rm -rf node_modules/

-package.jsonをフォルダに入れる
$ npm install
※package.jsonを読み取ってGruntをインストールしてくれる
※node_modulesフォルダができて、その中にGruntがインストールされている


LESSファイルをCSSファイルに変換するタスク(Gruntfile.jsを作る(#03))

•プラグインを入れる

  $ npm install grunt-contrib-less --save-dev

•Gruntfile.jsを作る

•実行する 

$ grunt

      module.exports = function(grunt) {

// config
grunt.initConfig({

less: {//タスク名
build: {//ターゲット名
src: 'src/style1.less',  //変換元
dest: 'build/styles.css' //返還後
}
}

});

// plugin
grunt.loadNpmTasks('grunt-contrib-less');

// tasks
grunt.registerTask('default', 'less');

};

module.exports = function(grunt) {

// config
grunt.initConfig({

less: {//タスク名
build1: {//ターゲット名
src: 'src/style1.less',   //変換元
dest: 'build/styles1.css' //返還後
},
build2: {//ターゲット名
src: 'src/style2.less',   //変換元
dest: 'build/styles2.css' //返還後
}
}
});

// plugin
grunt.loadNpmTasks('grunt-contrib-less');

// tasks
grunt.registerTask('default', 'less');
grunt.registerTask('task1', 'less:build1');
grunt.registerTask('task2', 'less:build2');
};

    module.exports = function(grunt) {

// config
grunt.initConfig({

less:{ //タスク名
build:{ //ターゲット名
files:{
//'build/styles.css': 'src/style.less'
//'build/styles.css':['src/style1.less','src/style2.less'] //複数のファイルを変換する場合配列を使用
'build/styles.css': 'src/*.less' //拡張子lessのもの全て
}
}
}

});

// plugin
grunt.loadNpmTasks('grunt-contrib-less');

// tasks
grunt.registerTask('default', 'less');
grunt.registerTask('task1', 'less:build1');
grunt.registerTask('task2', 'less:build2');

};

圧縮系option

module.exports = function(grunt) {

//config
grunt.initConfig({

less:{ //タスク名
options:{ //オプション
compress:true
},
build:{ ターゲット名
src:'src/style1.less',
dest:'build/styles.css'
}
}
});
};

(圧縮系のコマンドでコメントを残す/文頭に!をつける)
/*!ここにコメントを書く*/

--save-dev  //cssの妥当性をチェックする

$ npm install grunt-contrib-csslint

//圧縮
$ npm install grunt-contrib-cssmin --save-dev 

//変更監視
$ npm install grunt-contrib-watch --save-dev  

  module.exports = function(grunt) {

less:{
build:{
src:['src/style1.less','src/style2.less'],
dest:'build/styles.css'
}
},

csslint:{
check:{
//src:'build/styles.css'
src:'<%= less.build.dest %>' //チェックする lessでbuildした後のソースをチェックする less.build.destとは、build/styles.cssのこと
}
},

cssmin:{
minimize:{
options:{
banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")%> */'
//pkg.nameはpackage.jsonの名前
},
files:{
'build/styles.min.css': '<%=less.build.dest %>'
}
}
},
watch: {
options:{
livereload:true
},
files:'src/*.less',
tasks:['less','csslint','cssmin']
},

//#11 grunt-contrib-connectを使う
connect:{
server:{
options:{
port:8000,
hostname:'192.168.100.100'
}
}
}

});

//plugin
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-csslint'); //cssの妥当性をチェックする
grunt.loadNpmTasks('grunt-contrib-cssmin'); //圧縮
grunt.loadNpmTasks('grunt-contrib-watch'); //変更監視
grunt.loadNpmTasks('grunt-contrib-connect');

//tasks
//grunt.registerTask('default','less');
//grunt.registerTask('task1','less:build1');
//grunt.registerTask('task2','less:build2');
grunt.registerTask('default',['less','csslint','cssmin','connect','watch']); //書いた順番に実行される 変換して妥当性チェック
};

livereloadを使う


 //htmlに以下を読み込む
<script src="http://192.168.100.100:35729/livereload.js"></script>

  cssの妥当性をチェックするcsslintをインストールする

npm install grunt-contrib-csslint --save-dev

Gruntfile.jsのプラグインに記述
grunt.loadNpmTasks('grunt-contrib-csslint');

■cssminをインストールする

npm install grunt-contrib-cssmin --save-dev