初めてgruntを使ってみた２

１に引き続き、調べてる事のメモ

[前回のQiita](http://qiita.com/shunjiro/items/658adf6aff1009144ee3)

ソースコード汚くても動けばよい。という開発の初期段階ではなくてもそこまで困らなそうな。気がしました。

個人的に、試しに作ってみたのを公開します。まず仕組み

>/develop
index.html
-js_dev
-js_library
-css_dev
-css_library
-img

を用意すれば、

>/develop
index.html
-js
-js_dev
-js_library
-css
-css_dev
-css_library
-img

>/release
index.html
-js
-css
-img

っていう形にしてくれるものを作ってみました。

なんだかんだ行ってる事と名前が重なるのでコードを見るのが早いかも。concatについては利用をしなかったけど、使い方はそのままだから残してあって、uglifyがjsの圧縮と難読化

```lang:Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
   cssmin: {
      develop: {
        files: {
          './develop/css/min.css': ['./develop/css_dev/*.css']
        }
      },
      release: {
        files: {
          './release/css/min.css': ['./develop/css_dev/*.css']
        }
      }
    },
    /*,concat: {
      develop: {
        src: 'js/*.js',
        dest: 'uncompress_js/main.js'
      }
      library1:{
        src: 'js_library/jquery.js',
        dest: 'release/js/'
      }
    },*/
    uglify: {
      develop: {
        files: {
          './develop/js/main.js': ['./develop/js_dev/*.js']
        }
      },
      release: {
        files: {
          './release/js/main.js': ['./develop/js/*.js']
        }
      }
    },
    copy: {
      develop_1: {
        files: [{
          expand: true,
          cwd: './develop/js_library',
          src: ['*.js'],
          dest: './develop/js',
          dot: false
        }]
      },
      develop_2: {
        files: [{
          expand: true,
          cwd: './develop/css_library',
          src: ['*.css'],
          dest: './develop/css',
          dot: false
        }]
      },
      release_1: {
        files: [{
          expand: true,
          cwd: './develop/js_library',
          src: ['*.js'],
          dest: './release/js',
          dot: false
        }]
      },
      release_2: {
        files: [{
          expand: true,
          cwd: './develop/css_library',
          src: ['*.css'],
          dest: './release/css',
          dot: false
        }]
      },
      release_3: {
        files: [{
          expand: true,
          cwd: './develop/img',
          src: ['*.*'],
          dest: './release/img',
          dot: false
        }]
      },
      release_4: {
        files: [{
          expand: true,
          cwd: './develop',
          src: ['*.html'],
          dest: './release',
          dot: false
        }]
      }
    },
    clean:{
      develop_js:{
        files: [{
            dot: true,
            src: [
                './develop/js',
            ]
        }]
      },
      develop_css:{
        files: [{
            dot: true,
            src: [
                './develop/css',
            ]
        }]
      },
      develop_all:{
        files: [{
            dot: true,
            src: [
                './develop/css','./develop/js',
            ]
        }]
      },
      release_all:{
        files: [{
            dot: true,
            src: [
                './release',
            ]
        }]
      }
    }
    ,
    watch: {
      cssmin:{
        options: {
          livereload: true
        },
        files: ['./develop/css_dev/*.css'],
        tasks: ['cssmin:develop']
      },
      concat:{
        options: {
          livereload: true
        },
        files:['./develop/js_dev/*.js'],
        tasks: ['uglify:develop',]
      },
      html:{
        options: {
          livereload: true
        },
        files:['./develop/*.html'],
        tasks: []
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-livereload');
  grunt.registerTask('default', ['clean:develop_all','cssmin:develop', 'uglify:develop','copy:develop_1','copy:develop_2','watch']);
  grunt.registerTask('release', ['clean:release_all','cssmin:release', 'uglify:release','copy:release_1','copy:release_2','copy:release_3','copy:release_4']);
};
```

livereloadに関しては、

fireboxでプラグインをいれて、
http://localhost:35729/
で
{"tinylr":"Welcome","version":"0.0.5"}

が表示されて、アイコンをクリックしたら、同期されるようになりました。実装をしたら対応が出来ました。
html js cssのファイル更新で実装される形です。

で

grunt

で作りながらファイルをまとめてくれる

grunt release

で公開用のファイルを作ってくれる。