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

コピペコードで快適生活

明日使えるソースを自分のために

Gruntの基本をおさえておく

Javascript CSS

仕事でGrunt使う機会があったので、きちんと基本を押さえておくことにしました。

Gruntってなに?

WEBフロント開発で使うJavaScriptCSSの変換ツール
目的は、JSやCSSを書きやすい形で実装して、ブラウザで実行できる形に変換する環境を提供すること。
主にやることは下記。

  • CoffeScript/TypeScriptのJS変換
  • SCSS/LESSのCSS変換
  • JavaScript/CSSの圧縮(minify)

環境構築

例えばこんな感じで。nodejsが必要なのでnvmでインストール、gruntコマンドを使うためにgrunt-cliをインストールしています。

cd ~
curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
export NVM_DIR="/home/vagrant/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
nvm install 6.9.1
nvm alias default 6.9.1
npm update -g npm
npm install -g grunt-cli

プロジェクトつくる

my-projectというディレクトリにpackage.jsonを作成します。
package.jsonはこのプロジェクトで使用したいプラグインを記述するファイルです。

mkdir my-project
cd my-project/
npm init

Gruntをインストール

npm install grunt -save-dev
npm install grunt-contrib -save-dev
npm install grunt-contrib-concat -save-dev
npm install grunt-contrib-cssmin -save-dev
npm install grunt-contrib-uglify -save-dev
npm install grunt-contrib-watch -save-dev
npm install grunt-contrib-connect -save-dev

Gruntがインストールされます。-save-devオプションでpackage.jsonにも追記されます。
ついでにpluginもインストールしています。
※warning出まくるけど無視(していいのかわからんけど)。

Gruntfile.jsの作成

Grunt実行時の処理を記述するGruntfile.jsを作成します。
たとえばこんな感じ。

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // ファイル結合だけ
    concat: {
      js: {
        src: ['src/js/*.js'],
        dest: 'build/application.js'
      },
      css: {
        src: ['src/css/*.css'],
        dest: 'build/application.css'
      }
    },

    // CSSの結合+圧縮
    cssmin: {
      minify: {
        src: ['src/css/*.css'],
        dest: 'build/application.min.css'
      }
    },

    // JSの結合+圧縮
    uglify: {
      build: {
        src: ['src/js/*.js'],
        dest: 'build/application.min.js'
      }
    },

    // ファイル変更を感知して自動的にタスク実行する設定
    // いちいちgruntコマンド叩かなくてよくなる
    watch: {
      css: {
        files: ['src/css/*.css'],
        tasks: ['concat:css', 'cssmin']
      },
      js: {
        files: ['src/js/*.js'],
        tasks: ['concat:js', 'uglify']
      }
    },

    // 簡易サーバ
    // grunt connect で起動する
    connect: {
      local: {
        options: {
          port: 9998,
          livereload: true,
          keepalive: true,
        }
      }
    },
  });

  // プラグインを読み込む
  // usage: http://gruntjs.com/plugins
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  // grunt 実行されるタスク
  grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

  // grunt dev で実行されるタスク
  grunt.registerTask('dev', ['concat', 'cssmin', 'uglify', 'watch']);
};

Grunt実行

あとは変換対象の src/js/*.js, src/css/*.css を配置してgrunt実行。

grunt         # => これでCSS/JSの変換処理
grunt dev     # => ファイル変更があったときに自動的に変換処理
grunt connect # => 簡易サーバ立ち上がる