Gruntで開発用と公開用のディレクトリを分ける

Grunt、相変わらずちょいちょい弄って便利になるようにやってる。触り甲斐があって面白い。
今回は、開発用と公開用でディレクトリを分けるっていうのをやります

参考にさせていただきました

ほぼ上記お二人の書き方丸パクリです!!!すみません!!!!ありがとうございます!!!!!
この2記事と前回前々回とやって来たものを組み合わせた感じになっている。

やりたいこと

開発時

フォルダ監視
Sass/Compassのコンパイル
ファイル保存時にブラウザを自動リロード

公開時

公開用ディレクトリにファイルをコピー
HTMLのminify
CSSのプロパティを整理
CSSのMedia Queriesをまとめる
CSSのminify
JavaScriptのminify

ディレクトリ構造

こういうディレクトリ構造を想定。

[projectName] (プロジェクトのルート)
 ├[develop] (開発ディレクトリ)
 │ ├[files]
 │ │ ├[_scss]
 │ │ ├[css]
 │ │ ├[font]
 │ │ ├[img]
 │ │ ├[js]
 │ │ ├index.html
 │ │ └style.css
 │ └config.rb
 │
 ├[release] (公開ディレクトリ)
 │ ├[css] (minified)
 │ ├[font]
 │ ├[img]
 │ ├[js] (minified)
 │ ├index.html (minified)
 │ └style.css (minified)
 │
 ├Gruntfile.js
 └package.json

developディレクトリ

開発用ディレクトリ。この中のファイルだけを触る。

releaseディレクトリ

公開用ディレクトリ。サーバとかにアップロードしたり納品したりするのはこのディレクトリ。

開発用と公開用でディレクトリを分けることで不要ファイルとかを間違えてアップロードすることもないし、公開時に手動でディレクトリをコピー→CSSやJSをminifyしたりする、とかの手順を踏まなくてもいい。

package.json

package.jsonはこんな感じ。projectNameやversionを適宜書き換える。

{
  "name": "projectName",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-csscomb": "*",
    "grunt-combine-media-queries": "*",
    "grunt-compass-multiple": "*",
    "grunt-contrib-clean": "*",
    "grunt-contrib-connect": "*",
    "grunt-contrib-copy": "*",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-htmlmin": "*",
    "grunt-contrib-livereload": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-open": "*"
  }
}

Gruntfile.js

Gruntfile.js、こんな感じで書いた。コメント読んでもらうと何やってるか分かると思う。

// livereload用の設定
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var folderMount = function folderMount(connect, dir) {
    return connect.static(path.resolve(dir));
  };


module.exports = function(grunt){
  // 読み込むプラグインの設定
  var taskName;
  var pkg = grunt.file.readJSON('package.json');
  for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }


  // 各タスクの設定
  grunt.initConfig({
    // package.jsonの定義
    pkg: pkg,

    // connect ブラウザ自動更新
    connect: {
      livereload: {
        options: {
          port: 9001,
          middleware: function(connect, options) {
            // http://localhost:9001/ でルートディレクトリを設定
            return [lrSnippet, folderMount(connect, 'develop/files')];
          }
        }
      }
    },

    // open gruntコマンド実行時にページをブラウザで開く
    open: {
      server: {
        path: 'http://localhost:<%= connect.livereload.options.port %>'
      }
    },

    // watch フォルダ監視
    watch: {
      // options
      options: {
        livereload: true,
        nospawn: true
      },
      // html
      html: {
        files: 'develop/files/**/*.html',
        tasks: []
      },
      // scss
      sass: {
        files: 'develop/files/_scss/**/*.scss',
        tasks: ['compassMultiple']
      },
      // Java Script
      scripts: {
        files: 'develop/files/js/**/*.js',
        tasks: []
      }
    },

    // compass-multiple Compassのコンパイル(マルチスレッド使用)
    compassMultiple: {
      options: {
        // Compassの設定にconfig.rbを使う
        config: 'develop/config.rb',
        // SCSSを置いているディレクトリを指定(必須) ※サブディレクトリが合ってもちゃんと監視してくれる
        sassDir: 'develop/files/_scss/'
      },
      common: {}
    },

    // htmlmin HTMLの圧縮
    htmlmin: {
      all: {
        options: {
          removeComments: true,
          removeCommentsFromCDATA: true,
          removeCDATASectionsFromCDATA: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          removeOptionalTags: true
        },
        expand: true,
        cwd: 'develop/files/',
        src: ['**/*.html'],
        dest: 'release/'
      }
    },

    // combine-media-queries メディアクエリをまとめる
    cmq: {
      options: {
        log: false
      },
      dev: {
        files: {
          'develop/files/': ['develop/files/style.css']
        }
      }
    },

    // csscomb CSSプロパティを整理
    csscomb: {
      dev: {
        expand: true,
        cwd: 'develop/files/',
        src: ['style.css'],
        dest: 'develop/files/'
      }
    },

    // cssmin CSSの圧縮
    cssmin: {
      all: {
        expand: true,
        cwd: 'develop/files/',
        src: ['style.css'],
        dest: 'release/'
      }
    },

    // uglify JSの圧縮
    uglify: {
      build: {
        src: 'develop/files/js/<%= pkg.name %>.js',
        dest: 'release/js/<%= pkg.name %>.js'
      }
    },

    // copy ファイルのコピー
    copy: {
      html: {
        expand: true,
        cwd: 'develop/files/',
        src: ['**/*.html'],
        dest: 'release/'
      },
      css: {
        expand: true,
        cwd: 'develop/files/',
        src: ['**/*.css'],
        dest: 'release/'
      },
      images: {
        expand: true,
        cwd: 'develop/files/',
        src: ['img/**'],
        dest: 'release/'
      },
      js: {
        expand: true,
        cwd: 'develop/files/',
        src: ['js/**'],
        dest: 'release/'
      },
      files: {
        expand: true,
        cwd: 'develop/files/',
        src: ['font/**'],
        dest: 'release/',
        filter: 'isFile'
      }
    },

    // clean 不要ファイルを削除
    clean: {
      // 最初にreleaseディレクトリ内を削除
      deleteReleaseDir: {
        src: 'release/'
      }
    }
  });


  // gruntコマンドで実行するタスクの設定
  // デフォルトタスク(作業時)
  grunt.registerTask('default', ['connect','open','watch','compassMultiple']);

  // 公開時に実行するタスク
  grunt.registerTask('release', ['clean:deleteReleaseDir','cmq','csscomb','copy','htmlmin','cssmin','uglify']);
};

config.rb

Sass/Compassの設定に必要なconfig.rb。このディレクトリ構造の場合の設定も一応書いておきます

# Define Directory
http_path = "files"
sass_dir = "files/_scss"
css_dir = "files"
fonts_dir = "files/font"
images_dir = "files/img"
javascripts_dir = "files/js"

# Define Output Style
# Option: expanded(default) / nested / compact / compressed
output_style = :expanded

# Define Comment
line_comments = false

# Define File Path
relative_assets = true

# Define SCSS or SASS
# preferred_syntax = :scss

# Disable .sass-cache
cache = false

作業の流れ

①

ターミナルでprojectNameに移動して、npm installを実行してプラグインをダウンロード

②

gruntでGruntのデフォルトタスクを実行して作業る

フォルダ監視
Sass/Compassのコンパイル
ブラウザの自動リロード

をやってくれる

③

納品したりサーバにアップロードする時になったら、grunt releaseを実行する

releaseディレクトリ内のフォルダとファイルを全削除
CSS内のバラバラに散らばったMedia Queriesをひとまとめにする
CSSのプロパティを整理する
developディレクトリ内のファイルをreleaseディレクトリにコピーする(SCSSはコピーしない)
HTMLのminify
CSSのminify
JSのminify

をやってくれる

④

アップロードしたり納品したりする!!!!!

ブラウザの自動リロード

Gruntfile.jsで設定しているので、develop/files/がローカルサーバのルートディレクトリになる。前回は何も設定してなかったからfilesディレクトリが見えていたのでパスの書き方とかが色々面倒だった。こうしておけば、アップロード時にパスの書き換えとか面倒なことをしなくて良くなる。

まとめ

今気づいたけど、これ、cssディレクトリ内のcssはminifyとかしないようになってた。自分のサイト(WordPress)のディレクトリを思い浮かべながらやってて、cssディレクトリ内は管理画面用CSSとかだったから重要視してなかった。すみません。もしcssディレクトリ内のCSSもあれこれしたい場合は適宜Gruntfile.jsを修正しましょう

minifyとか作業時にいちいちやるの面倒、というかコンパイルの時間がもったいない。コメントとか残しまくっておいて、そういう作業は公開時に自動で全部やるとミスとか労力とかいろいろ減って良い気がする。

他にもいい感じのGruntのタスクとか設定方法とかあったら是非教えてください。

2014/01/21

i-at-ssei liked this
mzmjp liked this
ozpa liked this
kojika17 liked this
brdr-mmrndm posted this