CHROMA

世の中の "当たり前" を確認する

Grunt を導入してみて

Dev

Frontrend Advent Calendar 2013 21 日目の記事。残りの日数もあと僅か。
明日は @ygoto3 さん。

Grunt を入れた。
まだ実際のプロジェクトでは使えてなくて下の方であげている Gruntfile.coffee のタスクもちょっと動かしてみただけ.. なので、今の設定はこれから色々変更するかと思う。

導入に参考にさせてもらったのは以下の通りなので、導入を考えてる人は一度見てみてはどうだろう:

今入れてるパッケージと、入れてないけど気になってるやつ

今回 Grunt を使い出すのをきっかけに、いい機会だから「HTML でも普通に書けるし.. CSS でも普通に書けるし.. 」っている理由で放っていた（面倒に感じてた） SCSS と Slim を使ってみようと思った。
なので、 grunt-slim とか grunt-contrib-sass も入れている。
（ grunt-contrib-jshint 、grunt-contrib-concat は始めから入っていてそのままになってるけど、特にタスクとして設定してないな.. ）

入れてる

入れてないけど気になってるやつ

Gruntfile.coffee

設定したタスク

grunt develop では、 watch による監視の中で Slim, Sass のコンパイルと Lint 処理を行うようにした。あとは connect で指定したとこで livereload を行うようにした。

grunt stylesheet では、autoprefixer ベンダープレフィックスをつけて、 csscombではプロパティ順序を決まったルールで並び替えて、 "csscss" では重複するプロパティをチェックするようにした。

grunt minify では HTML, CSS, 画像の圧縮を行うようにした。

いま考えてる Grunt タスクの実行順はこの通りで、以下のように考えてる:

  1. grunt develop でプロジェクトに取り掛かり始める
  2. grunt stylesheet は、制作中適当なタイミングで使う
  3. grunt minify は一旦制作完了、テスト環境アップとかのタイミングで使う

現状のファイル

こんな感じになってる:

module.exports = (grunt) ->
  'use strict'

  # Project configuration.
  grunt.initConfig

    # Metadata.
    pkg: grunt.file.readJSON("package.json")
    banner: "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - " + "<%= grunt.template.today(\"yyyy-mm-dd\") %>\n" + "<%= pkg.homepage ? \"* \" + pkg.homepage + \"\\n\" : \"\" %>" + "* Copyright (c) <%= grunt.template.today(\"yyyy\") %> <%= pkg.author.name %>;" + " Licensed <%= _.pluck(pkg.licenses, \"type\").join(\", \") %> */\n"

    # Setting Configure the task:
    # Concatenate files
    concat:
      options:
        banner: "<%= banner %>"
        stripBanners: true
      dist:
        src: ["lib/<%= pkg.name %>.js"]
        dest: "dist/<%= pkg.name %>.js"

    # Reload assets live in the browser
    connect:
      view:
        options:
          port: 8080
          base: '{project name}/'
          open: 'http://localhost:8080/views/'

    # Monitoring files, and Do browser live reload
    watch:
      options:
        livereload: true
      slim:
        files: "<%= slim.dist.src %>"
        tasks: "slim:dist"
      htmllint:
        files: "<%= htmllint.all %>"
        tasks: "htmllint"
      sass:
        files: "<%= sass.dist.src %>"
        tasks: "sass:dist"
      csslint:
        files: "<%= csslint.dist.files %>"
        tasks: "csslint:dist"

    # Compile Slim to HTML
    slim:
      dist:
        src: "{project name}/views/index.slim"
        dest: "{project name}/views/index.html"

    # Lint HTML
    htmllint:
      all: ["{project name}/views/*.html"]

    # Minify HTML
    htmlmin:
      dist:
        files: "{project name}/views/index.min.html": "{project name}/views/index.html"

    # Compile SCSS to CSS
    sass:
      dist:
        src: "{project name}/assets/stylesheets/*.scss"
        dest: "{project name}/assets/stylesheets/application.css"

    # Parse CSS and add vendor-prefixed CSS properties
    autoprefixer:
      options:
        browsers: ["last 2 version", "ie >= 7"]
      dist:
        files: "{project name}/assets/stylesheets/application.css"

    # Lint CSS
    csslint:
      dist:
        files: "{project name}/assets/stylesheets/application.css"

    # Sorting CSS properties in specific order
    csscomb:
      dist:
        files: "{project name}/assets/stylesheets/application.css": ["{project name}/assets/stylesheets/application.css"]

    # Executes CSSCSS
    csscss:
      dist:
        src: ["{project name}/assets/stylesheets/application.css"]

    # Minify CSS
    cssmin:
      dist:
        files: "{project name}/assets/stylesheets/application.min.css": "{project name}/assets/stylesheets/application.css"

    # Validate files with JSHint
    jshint:
      options:
        curly: true
        eqeqeq: true
        immed: true
        latedef: true
        newcap: true
        noarg: true
        sub: true
        undef: true
        unused: true
        boss: true
        eqnull: true
        browser: true
        globals:
          jQuery: true

      gruntfile:
        src: "Gruntfile.js"

      lib_test:
        src: ["lib/**/*.js", "test/**/*.js"]

    # Minify PNG, JPEG and GIF images
    imagemin:
      dist:
        options:
          optimizationLevel: 3
        files: [
          expand: true
          cwd: "{project name}/assets/images/"
          src: [
            "**/*.png",
            "**/*.jpg",
            "**/*.gif"
          ]
          dest: "{project name}/assets/images/minify/"
        ]

  # Setting Load & Register task:
  grunt.registerTask "develop", [], ->
    grunt.loadNpmTasks "grunt-slim"
    grunt.loadNpmTasks "grunt-html"
    grunt.loadNpmTasks "grunt-contrib-sass"
    grunt.loadNpmTasks "grunt-contrib-csslint"
    grunt.loadNpmTasks "grunt-contrib-connect"
    grunt.loadNpmTasks "grunt-contrib-watch"
    grunt.task.run "connect", "watch"

  grunt.registerTask "stylesheet", [], ->
    grunt.loadNpmTasks "grunt-autoprefixer"
    grunt.loadNpmTasks "grunt-csscomb"
    grunt.loadNpmTasks "grunt-csscss"
    grunt.task.run "autoprefixer", "csscomb", "csscss"

  grunt.registerTask "minify", [], ->
    grunt.loadNpmTasks "grunt-contrib-cssmin"
    grunt.loadNpmTasks "grunt-contrib-htmlmin"
    grunt.loadNpmTasks "grunt-contrib-imagemin"
    grunt.task.run "cssmin", "htmlmin", "imagemin"

  grunt.registerTask "default", [], ->
    grunt.loadNpmTasks "grunt-contrib-concat"
    grunt.loadNpmTasks "grunt-contrib-jshint"
    grunt.task.run "jshint", "concat"

その他

タスクの読み込みと登録は以下の記事を参考にした。
Gruntのtaskの実行にかかる時間を劇的に短縮する方法

Gruntfile.js => Gruntfile.coffee にするのは、http://js2coffee.org/ を使った。