早く家へ帰るための Grunt入門 ［＋gulp紹介］
•
31 likes•6,361 views
2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。
![オプションのあるもの
autoprefixer:{
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
default: {
src: "asset/css/style.css",
dest: "asset/css/style.css"
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-39-320.jpg)
![実行タスクを登録
// 開発用
grunt.registerTask('default', ['compass:dev']);
!
// 製品用
grunt.registerTask('dist', [‘compass:dist',
'autoprefixer','cmq','csscomb','csso']);](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-42-320.jpg)
![jshint: {
options: { // チェックオプションファイル
jshintrc: 'source/javascript/.jshintrc'
},
src: { // チェック対象ファイル
src: ['source/javascript/*.js']
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-47-320.jpg)
![concat: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-53-320.jpg)
![uglify: {
default: {
src: [
“source/jslib/jquery-1.11.0.min.js",
“source/jslib/jquery.heightLine.js",
"source/javascript/*.js"],
dest: "asset/js/sitescript.js"
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-55-320.jpg)
![私は最後に結合してます
concat: {
（略）
license: {
src: [
“source/license/license.js",
"asset/js/sitescript.js"],
dest: "asset/js/sitescript.js"
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-57-320.jpg)
![imagemin: {
dynamic: {
files: [{
expand: true,
cwd : "source/img/",
src: "**/*.{png,jpg,gif}",
dest: "asset/img/"
}]
}
}](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-61-320.jpg)
![watch: {
options: {
livereload: true
},
compassdev: {
files: 'source/**/*.scss',
tasks: ['compass:dev']
},
jsdev: {
files: 'source/**/*.js',
tasks: ['concat:jsdefault']
},
（以下略](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-66-320.jpg)
![defaultに登録
grunt.registerTask(
‘default',['connect','watch']);](https://image.slidesharecdn.com/maekawa20140308-140309213325-phpapp02/85/Grunt-gulp-67-320.jpg)
早く家へ帰るための Grunt入門 ［＋gulp紹介］
- 3. The JavaScript Task Runner
- 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? 一言で自動化。ミニファイ・コンパイル・ユニットテ スト・文法チェックなどの細々とした作業を簡単に。 設定をしてしまえばタスクランナーが反復作業を基本 労力ゼロにできる。
- 6. 今日の内容
- 7. • Getting started • CSS Preprocessors/CSS Postprocessors • JavaScript Concat,Linting,Minify • Image Optimization • First Step
- 17. ターミナル/コマンドプロンプト (sudo) npm install -g grunt-cli
- 20. プロジェクトの作成
- 21. CLIでディレクトリに
- 23. ※あくまで一例
- 27. さあGrunt！ npm install grunt --save-dev
- 28. ほぼ必須 npm install grunt-contrib-connect grunt-contrib-watch grunt-contrib-concat --save-dev
- 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'); };
- 37. タスクの登録
- 38. コンパイルものの基本形 csso: { // タスク名 default: { // ターゲット名 src: “asset/css/style.css", // 入力ファイル dest: "asset/css/style.css" // 出力ファイル } }
- 39. オプションのあるもの autoprefixer:{ options: { browsers: ['last 2 version', 'ie 8', 'ie 9'] }, 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" } } }
- 42. 実行タスクを登録 // 開発用 grunt.registerTask('default', ['compass:dev']); ! // 製品用 grunt.registerTask('dist', [‘compass:dist', 'autoprefixer','cmq','csscomb','csso']);
- 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); とかができるようにする
- 52. その前に結合
- 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" } }
- 56. ライセンスどうしてますか？
- 57. 私は最後に結合してます concat: { （略） license: { src: [ “source/license/license.js", "asset/js/sitescript.js"], dest: "asset/js/sitescript.js" } }
- 61. imagemin: { dynamic: { files: [{ expand: true, cwd : "source/img/", src: "**/*.{png,jpg,gif}", dest: "asset/img/" }] } }
- 66. watch: { options: { livereload: true }, compassdev: { files: 'source/**/*.scss', tasks: ['compass:dev'] }, jsdev: { files: 'source/**/*.js', tasks: ['concat:jsdefault'] }, （以下略
- 69. さて…