Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、本名は後藤です。よろしくお願いします。 本日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。 Gruntとは http://gruntjs.com/ GruntはNode.jsを使ったJavaScript製のタスクランナーです。 決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。 黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を！ それでは、いってみましょう。 環境構築 Gruntを利用するためには、まずNode.jsが必要です。 さっそくインストールしてみましょう。インストーラーがあるので簡単です。 Node.js 下記URLよりダウンロードしてイ
jsファイルの結合・圧縮をgruntを使って完全自動化 - Qiita
はじめに JavaScriptファイルの読み込み時間を短縮させるため、ファイルの結合や圧縮を行うという場面がある。 エディタやIDEに組み込んだ機能や、WEBで公開されているツールもあるが、今回はその結合・圧縮をgruntを使って自動化、さらにファイル状態監視によってそのスクリプトが自動実行されるように設定してゆく。 プラグインのインストール ここでは3つのgruntプラグインを利用する。 grunt-contrib-concat 複数のJavaScriptファイルの結合に使用。 grunt-contrib-uglify JavaScriptファイルの圧縮に使用。 grunt-contrib-watch ファイルの状態監視に使用。 作業ディレクトリにて、以下のコマンドを実行。 > npm install grunt-contrib-concat -save-dev > npm instal
Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基本的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
