etcこの広告は、90日以上更新していないブログに表示しています。2013-08-28すごく便利なビルドツールGruntTool今回はビルドツールであるgruntを導入してみたので、その入れ方と使い方を紹介したいと思います。webサイトの表示速度を最適にしようとするとCSSやJavascriptのminifyやCSSスプライトなど多くのことをやらなければなりません。いうとこのような作業を簡単にしてくれるのがGrunt.jsです。実際に使ってみましょうGrunt.jsはターミナルを使っていきます。Node.jsが必要なので、インストールします。こちらにいき、インストールでOKです。http://nodejs.org/インストールするとターミナルでNode.jsが使えるようになっています。ターミナルからgrunt-cliというものを導入します。以下のコマンドを入力します。grunt-cligrunt-cliのインストールが終わったら、作業ディレクトリにいきます。ここでは、ホームディレクトリ直下に「project」というディレクトリを作ってそこで作業することにします。~/project今はprojectのフォルダの中にいることを再度確認します。Grunt.jsの設定にいきましょう。package.jsonとGruntfile.jsが必要になります。initでpackage.jsonの項目をターミナルとの会話形式で入れていきます。こんな感じでいれてみましょう。--save-devでgruntをインストールし、node_modulesというgruntが入ったフォルダが生成されます。次に、プラグインを導入してみます。grunt-contribというものを入れます。多くのプラグインがありますが、ファイルの更新を自動的に感知してくれるものとcssファイルの改行やファイルサイズを小さくするプラグインを導入してみます。"~0.5.3"}}最後にプラグインがあることがわかります。installを実行すればどこでも同じ環境がすぐに作れてしまいます。package.jsonと同じ階層にGruntfile.jsを作ります。['cssmin']}});grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-watch');};そしてpackege.jsonと同じ階層にcssフォルダを作ります。base.css簡単なものを書いてみます。style.css簡単なものを書いてみます。body{magin-left:10px;}package.jsonと同じ階層にcssフォルダがあり、そのcssフォルダの中にdefault.cssとstyle.cssがあります。cssminをしてcssを圧縮してみます。するとmin.cssができています。h1{padding:100px}body{margin-left;10px}圧縮されているようです。tumblrはてなブログをはじめよう!inagexさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。