読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gruntfileを晒す。

jade, scssのコンパイル、jsとcssのmin化とgzip化な感じで使っています。

// Gruntfile.js
module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({
    jade: {
      compile: {
        expand: true,
        cwd: 'dev/jade/public/',
        src: '**/*.jade',
        dest: 'public/',
        ext: '.html',
        options: {
          // min化しない
          pretty: true
        }
      }
    },
    // Compass
    compass: {
      dev: {
        options: {
          sassDir: 'dev/scss',
          cssDir: 'public/assets/css',
          force: true
        }
      }
    },
    // CSS min化
    cssmin: {
      compress: {
        files: {
          'public/assets/css/style.min.css': 'public/assets/css/style.css'
        }
      }
    },
    // JS 構文チェック
    jshint: {
      options: {
        globals: {
          jQuery: true,
          console: true,
          module: true
        },
        unused: true, // 宣言したきり使っていない変数を検出
        // グローバル変数へのアクセスの管理
        browser: true, // ブラウザ用のやつは許可
        devel: true,   // consoleやalertを許可
        expr: true     // x || (x = 1); とかができるようにする
      },
      files: 'dev/js/*.js'
    },
    // JS 結合
    concat: {
      options: {
        // 連結される各ファイル内の間に配置出力する文字列を定義
        separator: ';\n'
      },
      compile: {
        files: {
          'public/assets/js/lib.js': ['dev/js/lib/*.js'],
          'public/assets/js/main.js': ['dev/js/*.js']
        }
      },
      compileDev: {
        files: {
          'public/assets/js/main.js': ['public/assets/js/lib.js', 'public/assets/js/main.js']
        }
      },
      compaileAll: {
        files: {
          'public/assets/js/main.min.js': ['public/assets/js/lib.js', 'public/assets/js/main.min.js']
        }
      }
    },
    // JS min化
    uglify: {
      options: {
        banner: '/*!\n * compile at <%= grunt.template.today("dd-mm-yyyy") %>\n */\n'
      },
      dist: {
        files: {
          'public/assets/js/main.min.js': 'public/assets/js/main.js'
        }
      }
    },
    // minファイルをgzip化
    compress: {
      css: {
        options: {
          mode: 'gzip'
        },
        files: [
          {
            expand: true,
            src: 'public/assets/css/*.min.css',
            ext: '.min.css.gz'
          }
        ]
      },
      js: {
        options: {
          mode: 'gzip'
        },
        files: [
          {
            expand: true,
            src: 'public/assets/js/*.min.js',
            ext: '.min.js.gz'
          }
        ]
      }
    },
    // 不要なファイルを消す
    clean: {
      js: ['public/assets/js/lib.js']
    },

    watch: {
      // jade
      jade: {
        files: ['dev/jade/public/**/*.jade', 'dev/jade/**/*.jade'],
        tasks: 'jade:compile',
        options: {
          nospawn: true
        }
      },
      // CSS
      css: {
        files: 'dev/scss/*.scss',
        tasks: 'css',
        options: {
          nospawn: true
        }
      },
      // JS
      js: {
        files: ['dev/js/*.js', 'dev/js/**/*.js'],
        tasks: 'js',
        options: {
          nospawn: true
        }
      }
    }
  });

  // loadNpmTasksを変更
  for(var taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }
  // javascriptのタスク
  grunt.registerTask('js', ['jshint', 'concat:compile', 'uglify:dist', 'concat:compileDev', 'concat:compaileAll', 'compress:js', 'clean:js']);
  // cssのタスク
  grunt.registerTask('css', ['compass:dev', 'cssmin:compress', 'compress:css']);
  
  grunt.registerTask('default', ['watch']);
}

scssがstyle.scssで固定なのは、
style.scssファイル内で@importで他のscssを読み込む様にしているからです。

gruntの実行
下記コマンドでgrunt watchが走るのでファイルの変更を監視してそれぞれのタスクを実行します

grunt

jsの処理だけ実行

grunt js

cssの処理だけ実行

grunt css