Grunt入門

ビルドGrunt

Gist

 状態:一旦終了  閲覧数:1,016  投稿日:2014-06-28  更新日:2014-11-17
Node.jsを利用したタスク自動化ツール
・CSS、JavaScriptなどフロントエンド周りの「ファイル圧縮・結合・最適化手順」をスクリプト化できるツール

公式サイト


環境構築


$ sudo mkdir -p /var/www/lib/grunt/grunt_lessons
[sudo] password for ★★: 

$ sudo chown -R ★★:★★ /var/www/lib/grunt/grunt_lessons
$ cd /var/www/lib/grunt/grunt_lessons

$ node -v
v0.10.29

$ npm -v
1.4.14

$ lessc -v
lessc 1.7.5 (Less Compiler) [JavaScript]


gruntコマンドをグローバル環境へインストール
・cliはコマンドラインインターフェースの略
$ sudo npm install -g grunt-cli
[sudo] password for ★★: 

/home/★★/.nodebrew/current/bin/grunt -> /home/★★/.nodebrew/current/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /home/★★/.nodebrew/current/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)


package.jsonを作成してgrunt本体をインストール

 閲覧数:367 投稿日:2014-11-08 更新日:2014-11-09 

準備


$ mkdir mysite
$ sudo chown -R ★★:★★ /var/www/lib/grunt/grunt_lessons/mysite
[sudo] password for ★★: 

$ cd mysite


雛形


雛形ファイル作成
・全てEnterキーで対応
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mysite)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /var/www/lib/grunt/grunt_lessons/mysite/package.json:

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


Is this ok? (yes)

処理結果
・下記ディレクトリ及びファイルが作成される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}



grunt本体


grunt本体インストール
・「--save-dev」オプションを付与することで、package.jsonに"devDependencies"が追加される
$ npm install grunt --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt@0.4.5 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── grunt-legacy-util@0.2.0
├── hooker@0.2.3
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.5)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── lodash@0.9.2
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5"
 }
}


package.jsonに"devDependencies"が記載されていると何が嬉しいの?
・package.jsonを渡された人が同じ環境を構築できるようになる


package.json


package.jsonだけの状態にするため一旦削除
$ rm -rf node_modules/

package.jsonの"devDependencies"を読み取り、"grunt"インストール
$ npm install
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt@0.4.5 node_modules/grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── rimraf@2.2.8
├── colors@0.6.2
├── async@0.1.22
├── grunt-legacy-util@0.2.0
├── hooker@0.2.3
├── nopt@1.0.10 (abbrev@1.0.5)
├── exit@0.1.2
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── lodash@0.9.2
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
└── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)

処理結果
・grunt本体がインストールされ、削除する前の状態に戻る
・「--save-dev」オプションを付与していないので、package.jsonの"devDependencies"は変化なし

Gruntfile.js作成 / 公式プラグイン検索

 閲覧数:277 投稿日:2014-11-08 更新日:2014-11-09 

Gruntfile.js


▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initCongig({

 });

 // plugin

 // tasks

};



公式プラグイン


Gruntが公式に管理しているプラグイン
公式プラグインページで、contribと入力し検索

grunt-contrib-less













lessファイルをcssファイルへ変換するlessプラグインgrunt-contrib-less使用

 閲覧数:354 投稿日:2014-11-09 更新日:2014-11-14 

準備


ディレクトリ及びファイル作成
▼/var/www/lib/grunt/grunt_lessons/mysite/build
▼/var/www/lib/grunt/grunt_lessons/mysite/src/style1.less
/* style1 */
@color1:#6c94be;
@color2:#6cb7e0;

h1{
color: @color1;
}

h2{
color: @color2;
}

▼/var/www/lib/grunt/grunt_lessons/mysite/src/style2.less
▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({
   less:{
     build:{
       src:'src/style1.less', //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
     }
   }

 });

 // plugin。プラグインをロードするためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');

 // tasks
 grunt.registerTask('default','less'); //gruntコマンドを'default'オプションで起動すると、'less'コマンドが、上記設定で実行される

};



インストール


プラグインインストール
$ npm install grunt-contrib-less --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt-contrib-less@0.12.0 node_modules/grunt-contrib-less
├── async@0.2.10
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── lodash@2.4.1
├── less@1.7.5 (graceful-fs@3.0.4, mime@1.2.11, mkdirp@0.5.0, clean-css@2.2.16, source-map@0.1.40, request@2.40.0)
└── maxmin@0.1.0 (pretty-bytes@0.1.2, chalk@0.4.0, gzip-size@0.1.1)


--save-devオプションを付与したので、下記に追記される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-contrib-less": "^0.12.0"
 }
}



$ grunt


$ gruntコマンド実行
・defaultオプションは省略可能
$ grunt
Running "less:build" (less) task
File build/styles.css created: 0 B → 63 B

Done, without errors.


処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.css
/* style1 */02758/
h1 {
 color: #6c94be;
}
h2 {
 color: #6cb7e0;
}



失敗


失敗履歴
$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

→$ gruntコマンドを実行する階層が違う

$ grunt
>> Local Npm module "grunt-contrib-less" not found. Is it installed?
Warning: Task "less" not found. Use --force to continue.

Aborted due to warnings.

→$ gruntコマンド階層は正しいが、"grunt-contrib-less"がインストールされていない。もしくは、"grunt-contrib-less"をインストールした階層が間違っている


構成


正しいディレクトリ構成
・$ gruntコマンドは、package.jsonがある階層で実行
package.json
Gruntfile.js
node_modules
  ├grunt
  └grunt-contrib-less

プロジェクトを設定する際のターゲット設定

 閲覧数:319 投稿日:2014-11-11 更新日:2014-11-11 

ターゲット


ターゲットとは何か?
・タスクをグループ化したもの

▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/*
task:{
 target1:{
   設定
 },
 target2:{
   設定
 }
}
*/

   less:{
     build1:{ //ターゲット名
       src:'src/style1.less', //変換元ファイル
       dest:'build/styles1.css' //destination。行き先。変換後のファイル名
     },
     build2:{ //ターゲット名
       src:'src/style2.less', //変換元ファイル
       dest:'build/styles2.css' //destination。行き先。変換後のファイル名
     }
   }

 });

 // plugin。プラグインをロードするためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');

 // tasks
 grunt.registerTask('default','less'); //gruntコマンドを'default'オプションで起動すると、'less'コマンドが、上記設定で実行される。両方呼出
 grunt.registerTask('task1','less:build1'); //片方だけ呼出
 grunt.registerTask('task2','less:build2'); //片方だけ呼出

};



$ grunt


両方実行
$ grunt
Running "less:build1" (less) task
File build/styles1.css created: 0 B → 63 B

Running "less:build2" (less) task
File build/styles2.css created: 0 B → 0 B

Done, without errors.


片方実行
・ターゲット … task1
$ grunt task1
Running "less:build1" (less) task
File build/styles1.css created: 0 B → 63 B

Done, without errors.


・ターゲット … task2
$ grunt task2
Running "less:build2" (less) task
File build/styles2.css created: 0 B → 0 B












入力ファイルであるsrcと、出力ファイルであるdestの書き方

 閲覧数:306 投稿日:2014-11-11 更新日:2014-11-14 
▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1
task:{
 target:{
   src:…,
   dest:…
 }
}*/

/* 方法2
task{
   target:{
     files:{
       dest:src
     }

   }    
 }
}
*/

   less:{
     build:{
       /*
       src:'src/style1.less', //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       */
       files:{
           //'build/styles.css':'src/style1.less'
           //'build/styles.css':['src/style1.less','src/style2.less']
           //'build/styles.css':'src/*.less' //less拡張子全て
           'build/styles.css':'src/**/*.less'
       }

     }
   }

 });

 // plugin。プラグインをロードするためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');

 // tasks
 grunt.registerTask('default','less'); //gruntコマンドを'default'オプションで起動すると、'less'コマンドが、上記設定で実行される
};





Configuring tasks

プラグインのオプションを設定

 閲覧数:304 投稿日:2014-11-14 更新日:2014-11-16 

オプション


プラグインによって幾つかのオプションがあり、それぞれデフォルト値が決められている

compress
・圧縮
・Type: Boolean
・Default: false

▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1。両方のターゲットにオプション適用
task:{
 options:{
   compress:true
 },
 target1:{
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

/* 方法2。ターゲット1にだけオプション適用
task:{
 target1:{
   options:{
     compress:true
   },
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

   less:{
     options:{
       compress:true
     },
     build:{
       /*
       src:'src/style1.less', //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       */
       files:{
           //'build/styles.css':'src/style1.less'
           //'build/styles.css':['src/style1.less','src/style2.less']
           //'build/styles.css':'src/*.less' //less拡張子全て
           'build/styles.css':'src/**/*.less'
       }

     }
   }

 });

 // plugin。プラグインをロードするためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');

 // tasks
 grunt.registerTask('default','less'); //gruntコマンドを'default'オプションで起動すると、'less'コマンドが、上記設定で実行される
};


$ grunt
Running "less:build" (less) task
File build/styles.css created: 63 B → 35 B

Done, without errors.


処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.css
h1{color:#6c94be}h2{color:#6cb7e0}



コメント


圧縮してもコメントを消さない
/*! ... */


▼/var/www/lib/grunt/grunt_lessons/mysite/src/style1.less
/*! style1 */
@color1:#6c94be;
@color2:#6cb7e0;

h1{
color: @color1;
}

h2{
color: @color2;
}


$ grunt
Running "less:build" (less) task
File build/styles.css created: 64 B → 48 B

Done, without errors.


▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.css
/*! style1 */h1{color:#6c94be}h2{color:#6cb7e0}







CSSの妥当性をチェックするためのgrunt-contrib-csslintプラグイン

 閲覧数:411 投稿日:2014-11-14 更新日:2014-11-16 

インストール


新たなプラグインインストール
$ npm install grunt-contrib-csslint --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt-contrib-csslint@0.3.1 node_modules/grunt-contrib-csslint
├── lodash@2.4.1
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
└── csslint@0.10.0 (parserlib@0.2.5)


--save-devオプションを付与したので、下記に自動追記される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-contrib-csslint": "^0.3.1",
   "grunt-contrib-less": "^0.12.0"
 }
}


新たなプラグインに関する処理を追記
▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1。両方のターゲットにオプション適用
task:{
 options:{
   compress:true
 },
 target1:{
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

/* 方法2。ターゲット1にだけオプション適用
task:{
 target1:{
   options:{
     compress:true
   },
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

   less:{
     options:{
       compress:true
     },
     build:{
       src:['src/style1.less','src/style2.less'], //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       //files:{
       //    'build/styles.css':'src/style1.less'
       //    'build/styles.css':['src/style1.less','src/style2.less']
       //    'build/styles.css':'src/*.less' //less拡張子全て
       //    'build/styles.css':'src/**/*.less'
       //}
     }
   },
   
   csslint:{
     check:{
       //src:'build/styles.css'
       src:'<%= less.build.dest %>'
       
     }
   }

 });

 // plugin。プラグインをロードするためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-contrib-csslint');

 // tasks
 grunt.registerTask('default',['less','csslint']); //gruntコマンドを'default'オプションで起動すると、'less'コマンド、'csslint'コマンドが書いた順番で、上記設定を基に実行される

};


▼/var/www/lib/grunt/grunt_lessons/mysite/src/style2.less
/* style2 */

body{
background: #eee;

p{
margin-left: 0px;
}
}



1回目


$ grunt
Running "less:build" (less) task
File build/styles.css created: 138 B → 92 B

Running "csslint:check" (csslint) task
Linting build/styles.css...ERROR
[L2:C41]
WARNING: Values of 0 shouldn't have units specified. You don't need to specify units when a value is 0. (zero-units) Browsers: All
>> 1 file lint free.

Done, without errors.


処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.css
/*! style1 */h1{color:#6c94be}h2{color:#6cb7e0}
body{background:#eee}body p{margin-left:0px}



修正


▼/var/www/lib/grunt/grunt_lessons/mysite/src/style2.less
/* style2 */

body{
background: #eee;

p{
margin-left: 0;
}
}



修正後


$ grunt
Running "less:build" (less) task
File build/styles.css created: 136 B → 90 B

Running "csslint:check" (csslint) task
>> 1 file lint free.

Done, without errors.


処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.css
/*! style1 */h1{color:#6c94be}h2{color:#6cb7e0}
body{background:#eee}body p{margin-left:0}




gruntjs/grunt-contrib-csslint · GitHub

CSSファイルを圧縮するためのgrunt-contrib-cssmin

 閲覧数:390 投稿日:2014-11-16 更新日:2014-11-16 

インストール


$ npm install grunt-contrib-cssmin --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt-contrib-cssmin@0.10.0 node_modules/grunt-contrib-cssmin
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
├── clean-css@2.2.17 (commander@2.2.0)
└── maxmin@0.2.2 (figures@1.3.4, pretty-bytes@0.1.2, chalk@0.5.1, gzip-size@0.2.0)


--save-devオプションを付与したので、下記に自動追記される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-contrib-csslint": "^0.3.1",
   "grunt-contrib-cssmin": "^0.10.0",
   "grunt-contrib-less": "^0.12.0"
 }
}



設定


新たなプラグインに関する処理を追記
▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1。両方のターゲットにオプション適用
task:{
 options:{
   compress:true
 },
 target1:{
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

/* 方法2。ターゲット1にだけオプション適用
task:{
 target1:{
   options:{
     compress:true
   },
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/


   pkg:grunt.file.readJSON('package.json'), //'package.json'情報をGruntfileで使用

   less:{
     options:{
       compress:true
     },
     build:{
       src:['src/style1.less','src/style2.less'], //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       //files:{
       //    'build/styles.css':'src/style1.less'
       //    'build/styles.css':['src/style1.less','src/style2.less']
       //    'build/styles.css':'src/*.less' //less拡張子全て
       //    'build/styles.css':'src/**/*.less'
       //}
     }
   },

   csslint:{
     check:{
       //src:'build/styles.css'
       src:'<%= less.build.dest %>'
       
     }
   },
   cssmin:{
     minimize:{
       options:{
         banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>     */' //バナーを使用すると圧縮したファイルの先頭にメッセージを付与することが可能。パッケージ名。今日の日付
       },
       files:{
         'build/styles.min.css':'<%= less.build.dest %>'
       }
       
     }
   }


 });

 // plugin。プラグインをロードする(読み込む)ためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-contrib-csslint');
 grunt.loadNpmTasks('grunt-contrib-cssmin');

 // tasks
 grunt.registerTask('default',['less','csslint','cssmin']); //gruntコマンドを'default'オプションで起動すると、書いた順番('less'コマンド、'csslint'コマンド、'cssmint'コマンド)で、上記設定を基に実行される

};



処理


$ grunt
Running "less:build" (less) task
File build/styles.css created: 136 B → 90 B

Running "csslint:check" (csslint) task
>> 1 file lint free.

Running "cssmin:minimize" (cssmin) task
File build/styles.min.css created: 90 B → 118 B

Done, without errors.


作成されるファイル
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.min.css
/*! mysite 2014-11-16     */
/*! style1 */h1{color:#6c94be}h2{color:#6cb7e0}body{background:#eee}body p{margin-left:0}








gruntjs/grunt-contrib-cssmin · GitHub


ファイルの変更監視をするgrunt-contrib-watchプラグイン

 閲覧数:362 投稿日:2014-11-16 更新日:2014-11-17 

Gist


・その都度gruntコマンドを打たなくても、何らかの変更が加わった場合に自動処理する


インストール


$ npm install grunt-contrib-watch --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt-contrib-watch@0.6.1 node_modules/grunt-contrib-watch
├── async@0.2.10
├── lodash@2.4.1
├── gaze@0.5.1 (globule@0.1.0)
└── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)


--save-devオプションを付与したので、下記に自動追記される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-contrib-csslint": "^0.3.1",
   "grunt-contrib-cssmin": "^0.10.0",
   "grunt-contrib-less": "^0.12.0",
   "grunt-contrib-watch": "^0.6.1"
 }
}



設定


▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1。両方のターゲットにオプション適用
task:{
 options:{
   compress:true
 },
 target1:{
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

/* 方法2。ターゲット1にだけオプション適用
task:{
 target1:{
   options:{
     compress:true
   },
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/


   pkg:grunt.file.readJSON('package.json'), //'package.json'情報をGruntfileで使用

   less:{
     options:{
       compress:true
     },
     build:{
       src:['src/style1.less','src/style2.less'], //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       //files:{
       //    'build/styles.css':'src/style1.less'
       //    'build/styles.css':['src/style1.less','src/style2.less']
       //    'build/styles.css':'src/*.less' //less拡張子全て
       //    'build/styles.css':'src/**/*.less'
       //}
     }
   },

   csslint:{
     check:{
       //src:'build/styles.css'
       src:'<%= less.build.dest %>'
       
     }
   },
   cssmin:{
     minimize:{
       options:{
         banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>     */' //バナーを使用すると圧縮したファイルの先頭にメッセージを付与することが可能。パッケージ名。今日の日付
       },
       files:{
         'build/styles.min.css':'<%= less.build.dest %>'
       }
       
     }
   },
   
   watch:{
     files:'src/*.less', //ソースの中の全てのlessに変更があれば
     tasks:['less','csslint','cssmin']
   }



 });

 // plugin。プラグインをロードする(読み込む)ためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-contrib-csslint');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-watch');

 // tasks
 grunt.registerTask('default',['less','csslint','cssmin','watch']); //gruntコマンドを'default'オプションで起動すると、書いた順番('less'コマンド、'csslint'コマンド、'cssmint'コマンド、'watch'コマンド)で、上記設定を基に実行される

};



監視開始


$ grunt
Running "less:build" (less) task
File build/styles.css created: 136 B → 90 B

Running "csslint:check" (csslint) task
>> 1 file lint free.

Running "cssmin:minimize" (cssmin) task
File build/styles.min.css created: 90 B → 118 B

Running "watch" task
Waiting...



ファイル変更


▼/var/www/lib/grunt/grunt_lessons/mysite/src/style2.less
/* style2 */

body{
background: #eee;

p{
margin-left: 10px;
}
}

.
自動検知
>> File "src/style2.less" changed.
Running "less:build" (less) task
File build/styles.css created: 139 B → 93 B

Running "csslint:check" (csslint) task
>> 1 file lint free.

Running "cssmin:minimize" (cssmin) task
File build/styles.min.css created: 93 B → 121 B

Done, without errors.


処理結果
▼/var/www/lib/grunt/grunt_lessons/mysite/build/styles.min.css
/*! mysite 2014-11-16     */
/*! style1 */h1{color:#6c94be}h2{color:#6cb7e0}body{background:#eee}body p{margin-left:10px}


監視停止
・Ctrl+C

簡易的なWebサーバーを立ち上げることができるgrunt-contrib-connectプラグイン

 閲覧数:336 投稿日:2014-11-16 更新日:2014-11-17 

インストール


$ npm install grunt-contrib-connect --save-dev
npm WARN package.json mysite@0.0.0 No description
npm WARN package.json mysite@0.0.0 No repository field.
npm WARN package.json mysite@0.0.0 No README data
grunt-contrib-connect@0.9.0 node_modules/grunt-contrib-connect
├── connect-livereload@0.5.0
├── opn@1.0.0
├── async@0.9.0
├── portscanner@1.0.0 (async@0.1.15)
└── connect@2.27.3 (utils-merge@1.0.0, fresh@0.2.4, cookie@0.1.2, response-time@2.2.0, pause@0.0.1, cookie-signature@1.0.5, vhost@3.0.0, basic-auth-connect@1.0.0, on-headers@1.0.0, media-typer@0.3.0, bytes@1.0.0, parseurl@1.3.0, cookie-parser@1.3.3, depd@1.0.0, qs@2.3.2, http-errors@1.2.7, connect-timeout@1.4.0, debug@2.1.0, method-override@2.3.0, morgan@1.4.1, finalhandler@0.3.2, serve-favicon@2.1.6, express-session@1.9.1, serve-static@1.7.1, multiparty@3.3.2, csurf@1.6.3, type-is@1.5.3, body-parser@1.9.2, compression@1.2.0, errorhandler@1.2.2, serve-index@1.5.0)


--save-devオプションを付与したので、下記に自動追記される
▼/var/www/lib/grunt/grunt_lessons/mysite/package.json
{
 "name": "mysite",
 "version": "0.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-contrib-connect": "^0.9.0",
   "grunt-contrib-csslint": "^0.3.1",
   "grunt-contrib-cssmin": "^0.10.0",
   "grunt-contrib-less": "^0.12.0",
   "grunt-contrib-watch": "^0.6.1"
 }
}



設定


▼/var/www/lib/grunt/grunt_lessons/mysite/Gruntfile.js
module.exports = function(grunt){

 // config
 grunt.initConfig({

/* 方法1。両方のターゲットにオプション適用
task:{
 options:{
   compress:true
 },
 target1:{
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/

/* 方法2。ターゲット1にだけオプション適用
task:{
 target1:{
   options:{
     compress:true
   },
   src:…,
   dest:…
 }
 target2:{
   src:…,
   dest:…
 }
}*/


   pkg:grunt.file.readJSON('package.json'), //'package.json'情報をGruntfileで使用

   less:{
     options:{
       compress:true
     },
     build:{
       src:['src/style1.less','src/style2.less'], //変換元ファイル
       dest:'build/styles.css' //destination。行き先。変換後のファイル名
       //files:{
       //    'build/styles.css':'src/style1.less'
       //    'build/styles.css':['src/style1.less','src/style2.less']
       //    'build/styles.css':'src/*.less' //less拡張子全て
       //    'build/styles.css':'src/**/*.less'
       //}
     }
   },

   csslint:{
     check:{
       //src:'build/styles.css'
       src:'<%= less.build.dest %>'
       
     }
   },
   cssmin:{
     minimize:{
       options:{
         banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>     */' //バナーを使用すると圧縮したファイルの先頭にメッセージを付与することが可能。パッケージ名。今日の日付
       },
       files:{
         'build/styles.min.css':'<%= less.build.dest %>'
       }
       
     }
   },
   
   watch:{
     files:'src/*.less', //ソースの中の全てのlessに変更があれば
     tasks:['less','csslint','cssmin']
   },
   
   connect:{
     server:{
       options:{
         port:8080,
         hostname:'IPアドレス'
       }
     }

   }



 });

 // plugin。プラグインをロードする(読み込む)ためのコマンド
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-contrib-csslint');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-contrib-connect');

 // tasks
 grunt.registerTask('default',['less','csslint','cssmin','connect','watch']); //gruntコマンドを'default'オプションで起動すると、書いた順番('less'コマンド、'csslint'コマンド、'cssmint'コマンド、'watch'コマンド)で、上記設定を基に実行される

};



実行


$ grunt
Running "less:build" (less) task
File build/styles.css created: 139 B → 93 B

Running "csslint:check" (csslint) task
>> 1 file lint free.

Running "cssmin:minimize" (cssmin) task
File build/styles.min.css created: 93 B → 121 B

Running "connect:server" (connect) task
Started connect web server on http://IPアドレス:8080

Running "watch" task
Waiting...


ブラウザで確認
・失敗
・8080ポート開放していないから?

ファイルを監視し、修正があったらブラウザを自動再読み込みするlivereload
・ブラウザ表示不可のため未確認


Grunt



類似度ページランキング
順位 ページタイトル抜粋
1 Grunt 83
2 Vagrant入門 63
3 Set Group ID 42
4 tar 40
5 cut 40
6 configure 38
7 cron 36
8 Github SSH 35
9 util-linux 35
10 MongoDB入門 35
11 startx 31
12 Options 29
13 history 29
14 DirectoryIndex 29
15 anacron 29
16 CentOSのyumリポジトリ 27
17 vagrant package 27
18 Session Storage 27
19 Graphviz 27
20 Let's Encrypt 履歴 26
2021/9/18 22:26 更新
週間人気ページランキング / 9-11 → 9-17
順位 ページタイトル抜粋 アクセス数
1 PHPのmb_send_mail関数でメール送信できない | メール処理システム 28
2 Nginx設定。エラーログレベル | Nginx(Webサーバ) 26
3 Python 3.5 アンインストール / yum remove | Python(プログラミング言語) 12
4 さくらVPS0 11
4 PHP Version 7.1.2 php-mecabエクステンション対応 / PHP 7.0.14 からのアップグレード  | MeCab(形態素解析) 11
4 ソースからビルドしたPython 2.7.3 アンインストール失敗 | Python(プログラミング言語) 11
5 touch コマンド / viコマンド。新規ファイル作成時の違い | Linuxコマンド 10
6 PHPファイルでchmodエラー | PHP(プログラミング言語) 7
7 php-mysql インストールできない 6
7 PHP実行ユーザ設定 / CentOS6 / Apache | PHP(プログラミング言語) 6
7 「設定ファイルに、暗号化 (blowfish_secret) 用の非公開パスフレーズの設定を必要とするようになりました。」対応 6
7 FFmpeg 2.8.15 を yum インストール | ソフトウェアスイート 6
8 さくらVPSへは「http://localhost」でアクセス出来ない | さくらVPSにてWebサービス運営(さくらVPS) 5
8 CentOSでcpコマンド動作確認するためには、Control + T ではなく、 -v オプションを使用 | cp(Linuxコマンド) 5
8 HTTPレスポンスヘッダ | HTTP(通信プロトコル) 5
8 mailxとは? / インストール済か確認 / mailコマンドの実体はmailxコマンド 5
9 tar: これは tar アーカイブではないようです 4
9 Postfix | メール処理システム 4
9 499 (Request has been forbidden by antivirus) | HTTP(通信プロトコル) 4
9 imagick 3.1.2 を imagick 3.2.0RC1 へ pecl アップデート | ImageMagick(ソフトウェアスイート) 4
2021/9/18 1:01 更新