GulpとかGruntとか「タスクランナー」って聞くとだいぶ敷居がたけえなって感じていた私。 「色々何でもタスクにしてGulpとか使うとめっちゃはかどるよ！！」 って言われても色々何でもって・・・覚えること多そう・・・ ってなってずっと敬遠してたんですがこのたび重い腰をあげて、 ようやっと手をだしてみたのでまとめます。 同じように感じていた人が使ってみてうおーってなってくれるとうれしい。 なるべく分かりやすくgulpがどんな感じのものか手順をまとめたつもりなので、 上から順番に手元で動かしながら試してみてもらえばと。 とりあえずやってみたこと(gulpにどんなタスクを実行させたか) CSSとかJSとかを更新するとブラウザが自動的に更新される。 CSS・JSを編集して、ブラウザに切り替えて、F5押して・・・っていう作業をしなくてよくなります。 CSS・JSファイルを圧縮する。 ファイル容量が
var gulp = require('gulp'); var browserSync =require('browser-sync'); gulp.task('default', ['browser-sync']); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./htdocs/" //対象ディレクトリ ,index : "index.html" //インデックスファイル } }); }); // //ブラウザリロード // gulp.task('bs-reload', function () { browserSync.reload(); }); // //監視ファイル // gulp.task('default', ['browser-sync'], function () { gu
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
黄金比はご存じでしょうか。彫刻や絵画、さらにAppleの製品などでも使われている最も美しいと言われる比率のことです。縦横のバランスだけでなく、配置なども黄金比に沿っておくことで美しく仕上がると言われています。 そんな黄金比に沿ったサイトを簡単に作れるのがGOLD Bootstrapです。そう、Bootstrapで作ったサイトを黄金比にしてくれます。 GOLD Bootstrapの使い方 GOLD Bootstrapのデモです。なんとなく黄金っぽいテーマなのが面白いですね。 グリッドの指定法です。 ナビゲーションバーとボタン。 タイポグラフィ。 テーブル。 フォーム。 タブなど。 アラート、プログレスバー。 リスト、パネルなど。 GOLD Bootstrapは基本的にグリッドに関して独自の変更を施しているようで、コンポーネント系は標準のBootstrapと変わりません。すでにBootstra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
