パッケージマネージャーBowerとGulpを組み合わせてコーディングを効率化させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、外部ライターの田路です。 春の足音がどんどん大きくなってきていますね。 春といえば卒業の季節です。 今回はパッケージマネージャーBowerとGulpを組み合わせて、ファイルのコピペを卒業する方法をご紹介いたします。 使うための準備 jQueryとBootstrapを例に進めていきます BowerとGulpを使います 「フロントエンド用パッケージマネージャーBowerの導入方法と使い方」を参考に、Bowerの基本的な使い方を理解しておいてください。 「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を参考に、Gulpへの入門を済ませておいてください。 黒い画面が苦手なあなたへ bower-browser – これは便利！Bower管理フロントエンド http://www.moongift.jp/2015/02/bower-browser-これは便利！bo
npm + gulp + bower でビルド自動化 - GeekFactory
(追記) この記事は公開から時間が経っており、内容が古くなっています。2016年時点ではWebpackが圧倒的におすすめです。 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくない。 CoffeeScriptやLESSのコンパイルを自動的に実行したい。手順書を見ながらコマンドを叩くとかやりたくない。 ダウンロードしたライブラリをリポジトリに入れたくない。 出荷対象のリソースを明確にしたい。ゴミファイルをリリースしたくない。 どうやって実現する？ bowerでライブラリの依存関係を管理する。 gulpでビルドを自動化する。
外国人「発想が冴えてると思った広告を紹介していく」海外のまとめ : 暇は無味無臭の劇薬
Comment by coram_morte 3433 ポイント 慎重に塗ろう。タトゥー店による独創的な広告 「職を希望する人はQRコードを丁寧に塗ることで技量を示し、応募フォームまでアクセスして下さい」 reddit.com/r/AdPorn/top/関連記事 外国人「奇妙な満足感を覚える画像を貼っていく」海外のまとめ 外国人「センスが抜群だと思うデザインを貼っていく」海外のまとめ Comment by moparornocar 2675 ポイント IBMによる「素敵な街にするちょっとした工夫（Smart Ideas for Smarter Cities）」 Comment by _aron_ 35 ポイント ↑車いす利用者がこのスロープを利用したら危なかったりしない？ 身体障害者が危なくならないようにスロープの傾斜を定めた規制とかってないの？ これはあくまでも興味ね。このデザインは良い
gulpfile再考 - Qiita
gulp が v3.9.0 になって Babel 対応になったのでいい機会なので gulp の構成を再考してみた 作業ツール Jade Stylus Browserify Browsersync 基本は簡易静的サイトやシングルページなJavaScriptアプリケーション用です なるべく再利用性を保ちタスクごとに分割された疎結合性を意識します ディレクトリ構成 . ├── README.md ├── gulp │ ├── conf.js │ ├── plugins.js │ └── tasks │ ├── clean.js │ ├── copy.js │ ├── imagemin.js │ ├── jade.js │ ├── minify-css.js │ ├── replace.js │ ├── scripts.js │ ├── stylus.j
静的サイト開発でよく使うgulpfileスニペット（初心者向け） - Qiita
はじめに もはやgulpのコードなんて巷にあふれているかと思いますが、 個人的によく使うものをスニペットとしてまとめてみました。 現在私は中小規模の静的サイト、いわゆる普通のコーポレートサイトや動的サイトのモックなどを制作することが多く今回はそういったシンプルな案件で、よく使っているものになります。 対象となるかもしれない方 個人的なメモではありますが、まだまだ不慣れな方にも役立つかもと思い投稿しました。 私が独学でタスクランナーの勉強を始めた時に一番困ったのが、やりたいことに対してオーバースペックな情報が多く（最低限理解して）実際に動作させるまでに、かなり時間が掛かってしまったことでした。 これらのスニペットでとりあえず動作はするかとは思いますので、色々と試すきっかけにでもなれば幸いです。 gulpのインストールや基本的な使い方は、既に良い記事がたくさんありますのでここでは割愛します。
gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
[Gulp]これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
![[Gulp]これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kazesoku.com/archives/581
Gulp.js（全俺） Advent Calendar 2014 - Adventar
