Grunt(31)

31follower
harada さんのアバター 349views

Gruntで複数ディレクトリのSassを管理する

1つのGruntfile.jsで複数の別ディレクトリのSassを管理したい場合のGruntfile記述メモです。 config.rbファイルはディレクトリ分必要です。 構成例 /gruntfile.js /config.rb /comm... 2015年8月19日
goto_jp さんのアバター 78views

Gruntの基礎おさらい

WebStormをベースに、Gruntを用いてSassを利用していますが、どのようにしてSassまで行き着いているのか改めて仕組みをおさらいします。 GruntでSassを動かすために、プロジェクトフォルダごとに下記3点のファイルが必要に... 2015年1月23日
goto_jp さんのアバター 137views

GruntでCSS圧縮を行う

Gruntはすでに利用できることを前提とします。 ターミナルでプロジェクトのディレクトリを開き、GruntのCSS圧縮を行うプラグインをインストールする。 npm install grunt-contrib-cssmin --save-... 2014年12月11日
goto_jp さんのアバター 273views

AipoのCSSコーディング環境(Grunt/Sass/Compass)のおさらい

Grunt/Sass/Compassとは何なのか、どのように設定され動いているのかを社内向けにおさらいの意味で記します。 Gruntとは node.jsで動くタスクランナー(監視自動実行プログラム) できること Sass/Comp... 2014年12月9日
Yukimi Sato さんのアバター 4views

Webstormでプロジェクトを複製するときは「Gruntfile.js」も複製する

プロジェクトを複製するときに、package.jsonを複製して配置するのは行っていましたが、Gruntfile.js自体がGruntでの設定ファイルになるので、階層が変わらない時はこちらも同じものを置く必要があります。 もし違うのであれ... 2014年12月8日
goto_jp さんのアバター 76views

MacOSのWebStormでGrunt環境をつくる

WebStormはインストールされており、既存プロジェクトのGruntfileを流用することを前提としています。 Homebrewのインストール パッケージ管理システム Homebrew こちらの「3. Homebrew 本体をインスト... 2014年12月2日
goto_jp さんのアバター 54views

【WebStormでSassを使おう】3:Grunt実行とSassの編集

前回まででGruntのプラグインを入れ設定まで行いました。 Gruntの実行 WebStorm画面下の「Grunt」を開いてください。 もし表示されていない場合はプロジェクトビューからGruntfile.jsを右クリックし「Open G... 2014年11月27日
goto_jp さんのアバター 85views

【WebStormでSassを使おう】2:Gruntプラグインのインストールと設定

前回まででプロジェクトにGruntの基本パッケージをインストールしました。 下記コマンドでGrunt用プラグインをインストールします。 量が多いので多少時間がかかります。 npm install grunt-contrib --save... 2014年11月26日
goto_jp さんのアバター 123views

【WebStormでSassを使おう】1:node.jsとGruntの準備

現状自分のマスト環境になっているWebStormでのSassの利用についてまとめます。 まずはnode.jsとGruntの準備から。 Sassはこれらを使って動くためです。 前提 WebStormインストール済み WebStormで... 2014年11月25日
goto_jp さんのアバター 71views

WebStormでGruntコンソールが開けなくなった場合

たまーに起こるのですが、WebStormで画面下のGruntコンソールが閉じてしまい、開くためのショートカットも消えてしまうことがあります。 ファイル一覧のGruntfile.jsを右クリックすると、「Open Grunt Console... 2014年11月10日
goto_jp さんのアバター 147views

WebStormで一つのプロジェクトで複数のGruntを走らせる

たとえば1つのWordpressサイトで複数のテーマをGruntを使って編集したい場合、複数のGruntを動かしたくなるケースがあります。 結論から言えば、Gruntfile.jsをコピーするだけでOKです。 Compassも扱っている場... 2014年11月4日
goto_jp さんのアバター 492views

WebStormでHamlをインストールしgruntで自動化する

まずHamlとは何ぞやという点からですが、まずは下記Hamlコードをご覧ください。 !!! %html %head %title Haml test %body %h1 Haml test ... 2014年8月6日
goto_jp さんのアバター 330views

Grunt:Compass、CoffeeScript、CSS圧縮を実行するGruntfile設定

module.exports = function (grunt) { var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ ... 2014年7月9日
goto_jp さんのアバター 281views

GruntでCoffeeScriptをコンパイルする

まずGrunt自体の使い方はこちらを参考にしてください。以降はGruntがすでに使える前提での内用となります。 ファイル構成 以下の構成を前提とします。 project ├js │└index.js ├coffee │└index.c... 2014年7月1日
Yukimi Sato さんのアバター 210views

GruntでSCSSがうまく上書きされない時にチェックしたいこと

・エラーの内容を確認する(該当SCSSがoverwriteになっているかどうか)・unchanged の場合、きちんとimportされているかどうか(抜けているとunchangedになります←これだった…)・必要モジュールはインストールでき... 2014年6月26日
Yukimi Sato さんのアバター 436views

WebStormにGruntのインストールを失敗した時

node.jsをインストールし、GruntをWebStormにインストール、起動した時にどうもうまく動いていない。エラーを調べたところ、モジュールが足りないと言われたので、再度インストールコマンドを実行したものの、変わらない。 結果:モジ... 2014年6月23日
goto_jp さんのアバター 526views

WebStormでGruntを使うファストガイド

前提 下記のフォルダ構成を前提とします。 project ├img ├js ├css └sass  手順 node.jsのインストールhttp://nodejs.org/ コマンドプロンプトで下記コマンド実行 (G... 2014年6月20日
goto_jp さんのアバター 565views

ベストなフロント開発環境構築:Yeomanの環境確認

前回の続きです。 Yeomanのパッケージを展開したフォルダ以下で下記のGruntコマンドを打ってください。 grunt server localhost:9000でブラウザが立ち上がり、生成された環境が表示されます。 この画面は ... 2014年1月14日
goto_jp さんのアバター 1,688views

ベストなフロント開発環境構築:Yeomanのインストール

YeomanとはGoogleの作ったIDEで、正確に言えばGruntとBowerとyoといった3つのツールをまとめた状態をYeomanと定義されています。 前提としてnode.jsが必要です。 下記コマンドでYeoman本体をインストー... 2014年1月10日
goto_jp さんのアバター 551views

ベストなフロント開発環境構築:Bowerのインストール

Grunt + Bower + Yeoman の組み合わせがフロント開発の環境構築・共有に現状最強との話を聞き、導入についてまとめていきます。 前提としてnode.jsとWindowsならGitShellが必要です。Gruntの導入は以前... 2014年1月7日