みかづきブログ その3

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

Grunt作業メモ その3

kimizuka.hatenablog.com
kimizuka.hatenablog.com


以前、GruntからGulpに移行しかけたんですが、なんだかんだでGruntに戻ってきてしまいました。
Jadeも導入して、Gruntファイルを更新したのでメモを残しておきます。

ディレクトリ構成

f:id:kimizuka:20150903001938p:plain

以前のものから、Jadeでコンパイルするファイルをまとめたファイル( pagelist.json )が増えました。


package.json

{
  "name": "HigeGrunt",
  "version": "0.0.1",
  "description": "hello world.",
  "repository": {
    "type": "git",
    "url": "https://github.com/kimizuka/HigeGrunt.git"
  },
  "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-jade": "~0.14.1",
    "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'),
      pageList = grunt.file.readJSON('pagelist.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
    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
    concat: {
      dist: {
        src: srcFiles.app,
        dest: 'build/data/js/main.concat.js'
      }
    },

    // grunt-contrib-uglify
    uglify: {
      options: {
        banner: ''
      },
      dist: {
        files: {
          'dist/data/js/main.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },

    // grunt-contrib-jshint
    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']
      },
      jade: {
        files: ['build/jade/**/*.jade'],
        tasks: ['jade']
      }
    },

    // 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
    cssmin: {
      dist: {
        files: {
          'dist/data/css/main.css': ['dist/data/css/*.css']
        },
        options: {
          noAdvanced: true,
        }
      }
    },

    // 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
    csscomb: {
      dev: {
        files: {
          'build/data/css/main.css': ['build/data/css/*.css']
        }
      },
      dist: {
        files: {
          'dist/data/css/main.css': ['dist/data/css/*.css']
        }
      }
    },

    // jade
    jade: {
      compaile: {
        options: {
          pretty: true
        },
        files: pageList
      }
    }
  });

  grunt.registerTask('default', ['server']);
  grunt.registerTask('dev', ['bower:dev', 'compass:dev', 'autoprefixer:dev', 'csscomb:dev', 'jshint', 'concat', 'jade']);
  grunt.registerTask('server', ['dev', 'connect', 'watch']);
  grunt.registerTask('dist', ['jshint', 'clean:dist', 'concat', 'uglify', 'imagemin:dynamic', 'bower:install', 'compass:dist', 'autoprefixer:dist', 'cmq', 'csscomb:dist', 'cssmin', 'copy:dist', 'jade', '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-contrib-jade');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-csscomb');
};

/build で作業して /dist に書き出しています。
今回は以上です。