tamlog

主にwebのフロント回り たまに登山

Gruntインストール

スポンサーリンク

Gruntとは何やらファイルのminifyや統合したファイルを作成したりと手軽にビルド出来るらしいとのこと これは覚えて損はなさそうですね。 そんなGruntを使えるようにお勉強。

メモです。


Gruntの勉強会しました。 ●2013/7/6
webっちゃlite JavaScript第1回
●2014/2/14
福岡マークアップ勉強会【番外編:grunt勉強会リベンジ】
●2014/3/15
HTML5+α @福岡 feat. html5jえんぷら部


スクリーンショット 2013-06-13 1.11.09
Gruntとは? JavaScriptのタスクランナー http://gruntjs.com/
いるもの Node.js npm npm(Node Packaged Modules)のパッケージの一つ

Node.jsをインストールしておきます。 手順

1.Gruntのコマンドを使えるようにnpmのグローバルにインストール
npm install -g grunt-cli
これでgruntコマンドが使えるようにます。
2.npmをプロジェクトディレクトリにインストール  プロジェクトディレクトリにpackage.jsonを作成
{
  "name": "name",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-watch": "~0.2.0",
    "grunt-contrib-sass": "~0.2.2"
  }
}
 プロジェクトディレクトリで以下のコマンドを実行
npm install
「node_modulesフォルダ」が作成されます。
3.Gruntを設定する Gruntfile.jsを作成
module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch'); 
  grunt.initConfig({
   sass: {
      styles: {
        src: 'common/sass/common.scss',
        dest: 'common/css/common.css'
      }
    },
    watch: {
      sass: {
        files: 'common/sass/*.scss',
        tasks: [ 'sass'  ]
      }
    }    
  });
  grunt.registerTask('default', [ 'sass' ]);
これでGruntが実行できるようになります。
grunt watch
ドキュメント

インストール時に使いそうなコマンド

Node.js バージョン node -v
npm バージョン npm -v
Grunt インストール準備 npm install -g grunt-cli
npm インストール npm install
gruntコマンド grunt ***
packageの内容をインストール npm install grunt --save-dev
CSSファイルをminifyする npm install grunt-contrib-cssmin
ファイルの変更を監視する npm install grunt-contrib-watch
テキストファイルを繋ぎ合わせる npm install grunt-contrib-concat
Sassファイルをコンパイルする npm install grunt-contrib-sass
Compassを使う npm install grunt-contrib-compass
Growl通知など npm install grunt-notify
cssプロパティの重複をチェック npm install grunt-csscss
ベンダープレフィックスの調整 npm install grunt-autoprefixer
スタイルガイド npm install grunt-styleguide
ファイルの削除 npm install grunt-contrib-clean
cssLint npm install grunt-contrib-csslint
テキスト置換 npm install grunt-text-replace
@mediaをまとめる npm install grunt-combine-media-queries
packageに追加 - -save-dev