みかづきブログ その3

3ヶ月つづけてみました。

Grunt 作業メモ その2


Grunt 作業メモ - みかづきブログ その3

Gruntをつかいはじめてはや4ヶ月。
新たなタスクがどんどん増えてきております。
一旦ここにまとめておきます。


ディレクトリ構成

f:id:kimizuka:20141029152845j:plain

buildが開発用ディレクトリ、distが公開用ディレクトリです。
assetsディレクトリは諸事情によりdataディレクトリとなりました。
開発時はbuildをルートとしてサーバをたてています。
また公開ファイルの中身は指定したディレクトリにコピーしてつかうことを前提としています。


package.json

{
    "name": "Grunt",
    "version": "0.0.1",
    "description": "hello world.",
    "devDependencies": {
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-compass": "~0.8.0",
        "grunt-contrib-jshint": "~0.1.1",
        "grunt-contrib-concat": "~0.1.2",
        "grunt-contrib-uglify": "~0.1.1",
        "grunt-contrib-watch": "~0.2.0",
        "grunt-contrib-connect": "~0.8.0",
        "grunt-contrib-imagemin": "~0.8.0",
        "grunt-contrib-clean": "~0.6.0",
        "grunt-contrib-cssmin" : "~0.10.0",
        "grunt-combine-media-queries": "~1.0.19",
        "grunt-bower-task": "~0.3.4",
        "grunt-autoprefixer": "~0.7.5",
        "grunt-usemin": "~2.0.0",
        "grunt-csscomb": "~3.0.0"
    }
}

Gruntfile.js

module.exports = function (grunt) {

  'use strict';

  var srcFiles = grunt.file.readJSON('scripts.json');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // grunt-contrib-copy
    // ファイルのコピー
    copy: {
      dist: {
        files: [{
          expand: true,
          cwd: 'build/',
          src: ['*.html', '*.mp3', '*.ogg', '*.wav', '*.mp4', '*.mov', '*.swf'],
          dest: 'dist/'
        }]
      },
      takeout: {
        files: [{
          expand: true,
          cwd: 'dist/',
          src: ['*.html', 'data/**/*'],
            dest: './'
          }]
      }
    },

    // grunt-contrib-compass
    // sassファイルのコンパイル
    compass: {
      dev: {
        options: {
          config: 'build/config.rb',
          sassDir: 'build/sass',
          cssDir: 'build/data/css'
        }
      },
      dist: {
        options: {
          config: 'build/config.rb',
          sassDir: 'build/sass',
          cssDir: 'dist/data/css'
        }
      }
    },

    // grunt-contrib-concat
    // jsファイルの結合
    concat: {
      dist: {
        src: srcFiles.app,
        dest: 'build/data/js/main.concat.js'
      }
    },

    // grunt-contrib-uglify
    // jsファイルの圧縮
    uglify: {
      options: {
        banner: ''
      },
      dist: {
        files: {
          'dist/data/js/main.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },

    // grunt-contrib-jshint
    // jsファイルの構文チェック
    jshint: {
      files: ['<%= concat.dist.src %>'],
      options: {
        jquery: true,
        browser: true,
        devel: true,
        validthis: true
      }
    },

    // grunt-contrib-watch
    // ファイルの監視
    watch: {
      compass: {
        files: ['build/sass/**/*.scss'],
        tasks: ['compass:dev', 'autoprefixer:dev']
      },
      js: {
        files: ['<%= concat.dist.src %>'],
        tasks: ['jshint', 'concat']
      }
    },

    // grunt-contrib-connect
    // ローカルにサーバをたてる
    connect: {
        server: {
          options: {
            port: 9000,
            open: true,
            keepalive: false,
            hostname: '*',
            base: 'build'
          }
        }
      },

    // grunt-contrib-imagemin
    // 画像を圧縮
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'build/data/img/',
          src: ['**/*.{png,jpg,gif,ico}'],
          dest: 'dist/data/img/'
        }]
      }
    },

    // contrib-clean
    // 書き出しディレクトリを一旦削除
    clean: {
      dist: {
        files: [{
            dot: true,
            src: [
                'dist',
            ]
        }]
      }
    },

    // contrib-cssmin
    // CSSを圧縮
    cssmin: {
      dist: {
        files: {
          'dist/data/css/main.css': ['dist/data/css/*.css']
        }
      }
    },

    // combine-cmq
    // メディアクエリをまとめる
    cmq: {
      options: {
        log: false
      },
      dist: {
        files: {
          'dist/data/css/main.css': ['dist/data/css/*.css']
        }
      }
    },

    // grunt-bower-task
    // ライブラリをコピー
    bower: {
      dev: {
        options: {
          targetDir: 'build/data/js/lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      },
      install: {
        options: {
          targetDir: 'dist/data/js/lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },

    // grunt-autoprefixer
    // プレフィックスの追加&削除
    autoprefixer: {
      options: {
        browsers: ['last 2 version', 'ie 9']
      },
      dev: {
        src: 'build/data/css/*.css'
      },
      dist: {
        src: 'dist/data/css/*.css'
      }
    },

    // grunt-usemin
    // 本番環境では圧縮したファイルを読み込むようにする
    usemin: {
      html: ['dist/*.html'],
      options: {
        root: '/',
        dirs: ['dist']
      }
    },

    // csscomb
    // CSSプロパティの並べ替え
    csscomb: {
      dev: {
        files: {
          'build/data/css/main.css': ['build/data/css/*.css']
        }
      },
      dist: {
        files: {
          'dist/data/css/main.css': ['dist/data/css/*.css']
        }
      }
    },
  });

  grunt.registerTask('default', ['takeout']);

  // ライブラリのコピー -> Sassファイルをコンパイル -> プレフィックスの自動付加 -> CSSプロパティの並べ替え -> JS構文チェック -> JS結合
  grunt.registerTask('dev', ['bower:dev', 'compass:dev', 'autoprefixer:dev', 'csscomb:dev', 'jshint', 'concat']);

  // ライブラリのコピー -> 開発用にSassファイルをコンパイル -> プレフィックスの自動追加 -> CSSの順序を統一 -> JS構文チェック -> JS結合 -> ローカルにサーバを立ちあげる -> ファイルの監視
  // (※ CSSに変更があった場合 -> Sassファイルをコンパイル -> プレフィックスの自動付加)
  // (※ JSに変更があった場合 -> 構文チェック -> 結合)
  grunt.registerTask('server', ['dev', 'connect', 'watch']);

  // JS構文チェック -> 公開用ディレクトリを一旦削除 -> JSファイル結合 -> JSファイル圧縮 -> 画像圧縮 -> ライブラリをコピー -> Sassファイルをコンパイル -> プレフィックスを自動付加 -> メディアクエリをまとめる -> CSSプロパティ並べ替え -> CSS圧縮 -> 公開用ディレクトリにコピー
  grunt.registerTask('dist', ['jshint', 'clean:dist', 'concat', 'uglify', 'imagemin:dynamic', 'bower:install', 'compass:dist', 'autoprefixer:dist', 'cmq', 'csscomb:dist', 'cssmin', 'copy:dist', 'usemin']);

  // 公開用ディレクトリを別の場所にコピー
  grunt.registerTask('takeout', ['dist', 'copy:takeout']);

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-combine-media-queries');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-csscomb');
  grunt.loadNpmTasks('grunt-browser-sync');
};

とても長いです。

/build で作業して /dist に書き出しています。

これ以上長くなるようであればタスクごとにファイルを分割しようと思ってます。
結構つくりこんだので公開時、納品時もばたつかなくなりました。



今回は以上です。