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

どこぞのエンジニアなマネージャーのブログ。

Perlとかviとかcssとかjavascriptとか(rubyとか)git >> https://github.com/rozary hatenaIDがrozrayなのはtypo

grunt始めてました。

npm install -g grunt

で、gruntをインストール

js-minify

さっそくjsをminify
grunt.jsってのを作って開いて。

module.exports = function(grunt) {
  grunt.initConfig({
    min: {
      dist: {
        src: ['./js/index.js'],//grunt.jsのカレントディレクトリから
        dest: './js/index.min.js' //minified file
      },
    }
  });
  grunt.registerTask('default', 'min');
};

(minifiedってあってるのか?)

grunt

ってgrunt.jsのところでやると、minifyされます。

次に、css-minify

css-minifyは、初期状態では出来ないようで、grunt-contribってのをいれないとだめ。

だので、インストール

npm install grunt-contrib

(ちょっと脇道)

ってしたら、カレントディレクトリに作成されてしまった。

npm install ローカルインストール(カレントディレクトリに作成)
npm install -g グローバルインストール(パスを通してくれちゃう)

そうなると、gruntさんが実行できないので、
一度削除して、

npm install -g grunt-contrib

で、パスが通るかなと思ったのだけれど通っていなかった。

結局、

npm

して、出ててきたnpm_modulesのパスを見て
grunt.jsにそのまま指定しました。
npm install (-g しない)からのリンクを作成する方法があったハズ。

css-minify

で、さっきのgrunt.jsを開いて

module.exports = function(grunt) {
    grunt.loadNpmTasks('ほにゃらら/node_modules/grunt-contrib');
    grunt.initConfig({
    min: {
      dist: {
        src: ['./js/message.js'],
        dest: './js/message.min.js'
      },
    },
    mincss: {
      compress: {
        files: {
//minify-file [minifyしたいファイル]
          "./css/index.min.css": ["./css/index.css"]
        }
      }
    }
  });
  grunt.registerTask('default', 'min mincss');
};

で、

grunt

すれば、jsとcssをそれぞれminifyできたとさ。

書いてないけどちょっといじればconcat(複数のファイルを1つにまとめる)も出来るますぉ。