├─dest
│　├─hogehoge_pkg.js
│　├─hogehoge_pkg.min.js
│　├─hogehoge_pkg.css
│　└─hogehoge_pkg.min.css
├─lib
│　├─css
│　│　├─hoge1.css
│　│　└─hoge2.css
│　└─js
│　　　├─hogehoge1.js
│　　　├─hogehoge2.js
│　　　└─hogehoge3.js
├─samples
│　└─hogehoge_sample.html
├─Gruntfile.coffee
└─package.json

destディレクトリ配下に、jsとcssの連結されたものと、さらに圧縮されたファイルができる
jsファイル群は依存関係を持ち、hogehoge1.js -> hogehoge2.js -> hogehoge3.jsの順で読み込む必要あり

nodeプラグインの構成

package.json

{
  "name": "hoge_sample",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.3.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-connect": "~0.6.0"
  }
}

nodeをインストール後、npm install -g grunt-cliでgrunt-cliはグローバルでインストールしておく
トップディレクトリにてnpm installで、依存パッケージをまとめてインストール（ローカル）

Grunt設定ファイル

Gruntfile.coffee

module.exports = (grunt) ->
  grunt.initConfig
    pkg_name: "hogehoge_pkg"
    dest_dir: "dest/"

    concat:
      js_files:
        src: [
          "lib/js/hogehoge.js",
          "lib/js/hogehoge2.js",
          "lib/js/hogehoge3.js"
        ]
        dest: "<%= dest_dir %><%= pkg_name %>.js"
      css_files:
        src: "lib/css/*.css"
        dest: "<%= dest_dir %><%= pkg_name %>.css"

    uglify:
      options:
        banner: "/* <%= pkg_name %> <%= grunt.template.today('yyyy-mm-dd') %> */\n"
      build:
        src: "dest/<%= pkg_name %>.js"
        dest: "dest/<%= pkg_name %>.min.js"

    cssmin:
      dist:
        src: "dest/<%= pkg_name %>.css"
        dest: "dest/<%= pkg_name %>.min.css"

    watch:
      options:
        livereload: true

      concat:
        files: [
          "<%= concat.js_files.src %>",
          "<%= concat.css_files.src %>"
        ]
        tasks: "concat"

      uglify:
        files: "<%= concat.js_files.dest %>"
        tasks: "uglify"

      html_files:
        files: "**/*.html"

      css_files:
        files: "lib/css/*.css"

    connect:
      site:
        options:
          hostname: "*",
          port: 8000

  grunt.loadNpmTasks "grunt-contrib-concat"
  grunt.loadNpmTasks "grunt-contrib-uglify"
  grunt.loadNpmTasks "grunt-contrib-cssmin"
  grunt.loadNpmTasks "grunt-contrib-watch"
  grunt.loadNpmTasks "grunt-contrib-connect"

  grunt.registerTask "build" , [
    "concat",
    "uglify",
    "cssmin"
  ]

  grunt.registerTask "default", ["connect","watch"]

grunt buildで、dest配下のファイルを生成
gruntすると内部Webサーバが立ち上がり、watchでの監視状態に入る。
- ブラウザからlocalhost:8000でhtmlファイルにアクセスできる
- js、css、htmlファイルのいずれかが変更されると下記の動作が行われる。
  - dest配下のパッケージされたjs/cssを生成
  - HTMLファイルをブラウザで開いていれば自動リロードされる（※ブラウザ側にLiveReloadのプラグインを入れておく必要はあり）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up