Grunt ハンズオン (活用編)
目次
- A. JSHint を実行する (jshint)
- B. ファイル保存時に自動実行 (watch)
- C. Webサーバを起動する (connect)
- D. 自動リロード (livereload)
- Z. 参考資料
A. JSHintを実行する (jshint)
grunt-contrib-jshint を利用すると JSHint を使ったコードチェックを行うことができます。
- インストール
- Gruntfile.js の記述
- 実行してみる
1. インストール
npm install grunt-contrib-jshint --save-dev2. Gruntfile.js の記述
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
}- この設定では
Gruntfile.jsとsrc,testフォルダの下にある*.jsファイルを対象にしてコードチェックを行う - jshint でエラーが出るようにするため、わざと最終行にセミコロンを付けていない
3. 実行してみる
以下のコマンドを実行する
grunt jshint- コンソールにエラーが出力されることを確認する
B. ファイル保存時に自動実行(watch)
grunt-contrib-watch を利用するとファイルの変更をトリガーにしてタスクを起動することができます。
- インストール
- Gruntfile.js を作る
- 実行してみる
1. インストール
以下のように
grunt-contrib-watchをインストールするnpm install grunt-contrib-watch --save-devこの例では、
grunt-contrib-jshintを使用するため、 もしまだインストールしていない場合は、インストールするnpm install grunt-contrib-jshint --save-dev
2. Gruntfile.js を作る
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js']
},
watch: {
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
};filesには変更監視対象のファイルを記述する。 この設定では、src,testフォルダの下の*.jsファイルの修正を監視するtasksには変更時に実行するタスクを指定する。 この設定では JSHint を実行している。 複数のタスクを指定することも可能
3. 実行してみる
grunt watchで起動するgrunt watch*.jsファイルを修正して、タスクが自動実行されることを確認する
C. Webサーバを起動する (connect)
grunt-contrib-connect を利用すると Web サーバを起動することができます。
- プラグインをインストールする
- Gruntfile.js を作る
- 実行してみる
- サーバ起動時にブラウザ起動させる
1. プラグインをインストールする
以下のように grunt-contrib-connect をインストールする
npm install grunt-contrib-connect --save-dev2. Gruntfile.js を作る
Gruntfile.js に以下のように記述する
module.exports = function(grunt) {
grunt.initConfig({
connect: {
target1: {
options: {
hostname: 'localhost',
port: 9898,
base: 'dist',
keepalive: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
};hostnameでサーバが利用するホスト名を指定するportでサーバのポート番号を指定するbaseで html ファイルを格納したフォルダを指定するkeepalive: trueを指定しない場合、Gruntのタスク終了時にサーバも停止する
3. 実行してみる
distフォルダに以下のような HTML ファイルをindex.htmlという名前で作成する<html> <body>hello</body> </html>grunt connectでWebサーバを起動するgrunt connectブラウザで http://localhost:9898 にアクセスする
4. サーバ起動時にブラウザ起動させる
以下のように open: ture をオプションに指定すると、
サーバ起動時にブラウザも自動起動する
module.exports = function(grunt) {
grunt.initConfig({
connect: {
target1: {
options: {
hostname: 'localhost',
port: 9898,
base: 'dist',
keepalive: true,
open: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
};D. 自動リロード (livereload)
grunt-contrib-connect と
grunt-contrib-watch
の livereload オプションを設定すると、
「HTMLファイルやJavaScriptファイルを修正すると同時にブラウザのリロードを行う」
ということができるようになります。
- プラグインのインストール
- Gruntfile.js を作る
- 実行してみる
1. プラグインのインストール
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-watch --save-dev2. Gruntfile.js を作る
module.exports = function(grunt) {
grunt.initConfig({
connect: {
server: {
options: {
hostname: 'localhost', port: 9898, base: 'dist', open: true,
livereload: 35730
}
}
},
watch: {
files: ['dist/**/*.html'],
options: {
livereload: '<%= connect.server.options.livereload %>'
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect', 'watch']);
};- watchを実行すると grunt は終了しなくなるため、connect に keepalive オプション指定は不要
3. 実行してみる
distフォルダに以下のような HTML ファイルをindex.htmlという名前で作成する<html> <body>hello</body> </html>gruntコマンドを実行する (ブラウザに index.html の内容が表示される）gruntテキストエディタで index.html ファイルの内容を修正して保存し、 ブラウザのリロードが自動的に行われることを確認する
