Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

早く家へ帰るための
Grunt入門
[+gulp紹介]

5,344 views

Published on

2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。

Published in: Technology
  • Be the first to comment

早く家へ帰るための
Grunt入門
[+gulp紹介]

  1. 1. 早く家へ帰るための
 Grunt入門
 [+gulp紹介] 前川 昌幸
  2. 2. The JavaScript Task Runner
  3. 3. 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.
  4. 4. Why use a task runner? 一言で自動化。ミニファイ・コンパイル・ユニットテ スト・文法チェックなどの細々とした作業を簡単に。 設定をしてしまえばタスクランナーが反復作業を基本 労力ゼロにできる。
  5. 5. 今日の内容
  6. 6. • Getting started • CSS Preprocessors/CSS Postprocessors • JavaScript Concat,Linting,Minify • Image Optimization • First Step
  7. 7. Getting started Node.js環境
  8. 8. http://nodejs.org/
  9. 9. Node環境を用意していない人は まずカレントバージョンを
  10. 10. Windowsの場合は 環境変数でパスを通しておいてください
  11. 11. https://www.npmjs.org/
  12. 12. Getting started grunt-cliの導入
  13. 13. ターミナル/コマンドプロンプト (sudo) npm install -g grunt-cli
  14. 14. grunt-cli Gruntのコマンドラインインターフェース。 Grunt自体は各プロジェクトごとにインストール。
  15. 15. Getting started プロジェクトの作成
  16. 16. プロジェクトの作成
  17. 17. CLIでディレクトリに
  18. 18. Getting started ディレクトリ構成の決定(とりあえず)
  19. 19. ※あくまで一例
  20. 20. さあGrunt! の前に… npm init
  21. 21. プロジェクトの諸情報を記録する package.jsonを生成
  22. 22. ここにnpmパッケージ群を記録 共有ができるようになる
  23. 23. さあGrunt! npm install grunt --save-dev
  24. 24. ほぼ必須 npm install grunt-contrib-connect grunt-contrib-watch grunt-contrib-concat --save-dev
  25. 25. • grunt-contrib-connect:簡易サーバー機能 • grunt-contrib-watch:ファイル更新の監視 • grunt-contrib-concat:ファイルの結合
  26. 26. Getting started Gruntfile.jsの作成
  27. 27. 基本はココ… http://gruntjs.com/getting-started#the-gruntfile
  28. 28. 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'); };
  29. 29. CSS Preprocessors
 CSS Postprocessors 環境は構築している前提で
  30. 30. Compass grunt-contrib-compass
  31. 31. CSSO:CSSの最適化 grunt-csso CSScomb:CSSプロパティの整列 grunt-csscomb
  32. 32. メディアクエリの整理 grunt-combine-media-queries プリフィクスの整理 grunt-autoprefixer
  33. 33. タスクの登録
  34. 34. コンパイルものの基本形 csso: { // タスク名 default: { // ターゲット名 src: “asset/css/style.css", // 入力ファイル dest: "asset/css/style.css" // 出力ファイル } }
  35. 35. オプションのあるもの autoprefixer:{ options: { browsers: ['last 2 version', 'ie 8', 'ie 9'] }, default: { src: "asset/css/style.css", dest: "asset/css/style.css" } }
  36. 36. compass: { //切り分ける場合ターゲット名をつける dist: { // 製品用 options: { sassDir: "source/sass", cssDir: "asset/css", environment: "production" } }, dev: { // 開発用 options: { sassDir: "source/sass", cssDir: "asset/css" } } }
  37. 37. Compassはconfig.rbを 利用することも可能 (sourcemap使いたい時とか)
  38. 38. 実行タスクを登録 // 開発用 grunt.registerTask('default', ['compass:dev']); ! // 製品用 grunt.registerTask('dist', [‘compass:dist', 'autoprefixer','cmq','csscomb','csso']);
  39. 39. Postprocessorを 製品版だけにするかはお好みで
  40. 40. あと、CSSをそれなりに書けるあなたは… grunt-contrib-csslint
  41. 41. JavaScript Concat,Linting,Minify
  42. 42. JSHint:構文チェック grunt-contrib-jshint
  43. 43. jshint: { options: { // チェックオプションファイル jshintrc: 'source/javascript/.jshintrc' }, src: { // チェック対象ファイル src: ['source/javascript/*.js'] } }
  44. 44. { // "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); とかができるようにする
  45. 45. 使いどころ 製品用には使うとして 開発用に入れるとチェックが入りすぎる 要所でgrunt jshint でのチェックを利用
  46. 46. ライブラリなどは? 私はチェック対象に入れない 別ディレクトリを作成してそこに格納
  47. 47. UglifyJS:ミニファイ grunt-contrib-uglify
  48. 48. その前に結合
  49. 49. concat: { default: { src: [ “source/jslib/jquery-1.11.0.min.js", “source/jslib/jquery.heightLine.js", "source/javascript/*.js"], dest: "asset/js/sitescript.js" } }
  50. 50. そしてミニファイ (実は結合もできる)
  51. 51. uglify: { default: { src: [ “source/jslib/jquery-1.11.0.min.js", “source/jslib/jquery.heightLine.js", "source/javascript/*.js"], dest: "asset/js/sitescript.js" } }
  52. 52. ライセンスどうしてますか?
  53. 53. 私は最後に結合してます concat: { (略) license: { src: [ “source/license/license.js", "asset/js/sitescript.js"], dest: "asset/js/sitescript.js" } }
  54. 54. Image Optimization
  55. 55. とりあえず印の… grunt-contrib-imagemin
  56. 56. あまり圧縮効率が良くないという評判 UNIX系OS(Mac含む)なら grunt-imageもいいかも
  57. 57. imagemin: { dynamic: { files: [{ expand: true, cwd : "source/img/", src: "**/*.{png,jpg,gif}", dest: "asset/img/" }] } }
  58. 58. First Step ここまでは準備!これから本番!
  59. 59. 簡易サーバー grunt-contrib-connect
  60. 60. connect: { uses_defaults: {} } http://0.0.0.0:8000
  61. 61. 更新ファイルの監視 grunt-contrib-watch
  62. 62. watch: { options: { livereload: true }, compassdev: { files: 'source/**/*.scss', tasks: ['compass:dev'] }, jsdev: { files: 'source/**/*.js', tasks: ['concat:jsdefault'] }, (以下略
  63. 63. defaultに登録 grunt.registerTask( ‘default',['connect','watch']);
  64. 64. アナタはただゴリゴリコードを書くだけ!
  65. 65. さて…
  66. 66. いろいろとありますが 何はともあれ設定ファイルの記述が違う
  67. 67. JSON JavaScript 宣言型 手続き型
  68. 68. 今回のサンプルは https://github.com/maepon/wdnr-sem-sample
  69. 69. ありがとうございました @maepon

×