More Related Content Similar to 早く家へ帰るための
Grunt入門
[+gulp紹介] (20) More from Masayuki Maekawa (8) 早く家へ帰るための
Grunt入門
[+gulp紹介]4. Why use a task runner?
In one word: automation. The less work you have to do when
performing repetitive tasks like minification, compilation, unit
testing, linting, etc, the easier your job becomes. After you've
configured it, a task runner can do most of that mundane work
for you—and your team—with basically zero effort.
5. Why use a task runner?
一言で自動化。ミニファイ・コンパイル・ユニットテ
スト・文法チェックなどの細々とした作業を簡単に。
設定をしてしまえばタスクランナーが反復作業を基本
労力ゼロにできる。
32. module.exports = function(grunt) {
// package.jsonの読み込み
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
!
// Grunt Plaginsの読み込み
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
};
38. コンパイルものの基本形
csso: { // タスク名
default: { // ターゲット名
src: “asset/css/style.css", // 入力ファイル
dest: "asset/css/style.css" // 出力ファイル
}
}
40. compass: { //切り分ける場合ターゲット名をつける
dist: { // 製品用
options: {
sassDir: "source/sass",
cssDir: "asset/css",
environment: "production"
}
},
dev: { // 開発用
options: {
sassDir: "source/sass",
cssDir: "asset/css"
}
}
}
47. jshint: {
options: { // チェックオプションファイル
jshintrc: 'source/javascript/.jshintrc'
},
src: { // チェック対象ファイル
src: ['source/javascript/*.js']
}
}
48. {
// "use strict" を強制
"strict" : true,
"indent" : 2,
// インデントの深さ
"maxlen" : 0,
// 一行の最大長
// 宣言したきり使っていない変数を検出
"unused" : true,
!
// グローバル変数へのアクセスの管理
// グローバル変数へのアクセスを禁止
"undef" : true,
// ブラウザ用のやつは許可
"browser" : true,
"dojo" :
true,
// dojo tool kit用のやつは許可
"devel" : true,
//
consoleやalertを許可
"debug"
: true, // debugger を許可
"jquery" : true,
"globals": {
"_": false,
"Backbone": false
},
!
// Relaxing Options - 危険性を認識した上で設定すること
"eqnull" : true,
"expr" : true
}
// == null を許可
// x || (x = 1); とかができるようにする
53. concat: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}
55. uglify: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}
66. watch: {
options: {
livereload: true
},
compassdev: {
files: 'source/**/*.scss',
tasks: ['compass:dev']
},
jsdev: {
files: 'source/**/*.js',
tasks: ['concat:jsdefault']
},
(以下略