[Gulp]これからはじめるGulp（0）：アドベントカレンダースケジュール
はじめに 「今かよ」って話なんですが、急遽はじめた一人アドベントカレンダーでどの日に何を書くか構成がきまっていなかったので考えてみた。 12/01：bundler, rbenv, nodebrewでGulp環境を作ってみる 12/02：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる 12/03：watchで変更を監視する 12/04：gulp-plumberでエラー時のwatchを解除させない 12/05：gulp-connectでWebサーバーとライブリロード 12/06：gulp-load-pluginsでプラグインの一括読み込み 12/07：gulp-ruby-sassでSassオプションの指定（bourbon, neat, bittersのロード） 12/08：頻繁に使いそうなモジュールを試す：JS,CSS圧縮系 12/09：頻繁に使いそうなモジュールを試す：
![[Gulp]これからはじめるGulp（0）：アドベントカレンダースケジュール](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)
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
gulpタスク実行中にエラーが出たらデスクトップ通知を出す - Qiita
watchしながら作業してるときにコンパイルエラーなんかが起こってたときに、ターミナルにエラーメッセージが出てるけど気づけないときがあったので通知を導入した。 gulp-notifyを使う gulp-notify gulp-plumber エラーが出たときにgulpを終了させないgulp-plumberと、通知を出すgulp-notifyを使う。 gulp-plumberはタスク実行中にerrorイベントが発生したときに実行するerrorHandlerを指定することができる。errorHandlerにnotifyを指定すれば通知を出せる。 gulpfile CoffeeScriptのコンパイルを例に。 var gulp = require('gulp'); var plumber = require('gulp-plumber'); var notify = require('gulp-n
Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」
Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」 gulpを利用しているとSassなどのコンパイルエラーが出た際にwatchなどのタスクが強制終了されてしまいます。エラー時にタスクを強制終了させないためのプラグインが「gulp-plumber」です。 (gulpの使い方は「タスクランナーgulp入門」を参照) まず、以下のコマンドでgulp-plumberをインストール。 sudo npm install gulp-plumber --save-dev 利用時には以下のよう他の処理の前に「.pipe(plumber())」と記述します。 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer');
[Gulp]これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動でgulp-connectを使ったローカルサーバを起動できました。今回はgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせます。 gulp-connectのLiveReload LiveReloadを行うにはgulp-connectにオプションを追加してブラウザにLiveReload用のプラグインをインストールします。 LiveReloadを有効化する serveタスクのオプションでLiveReloadを有効化（livereload: true）します。 //server gulp.task('serve', function(){ connect.
[Gulp.js] タスク単位のファイル分割 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今までタスクランナーツールは Grunt を使用していたのですが、Gulp ( ガルプ ) は、Grunt よりも定義ファイルの記述が簡潔だと評判が良いらしいのでデビューを果たしました。 ざっくり触ってみたところ、かなりシンプルであることは分りました。ただそれでも、開発中に機能 ( タスク ) を追加していくたびに、どうしても設定ファイル (gulpfile.js) は肥大化していきます。そんな状況を極力減らすために、タスク単位でファイルを分割することを試してみたのでまとめてました。 解説前に 当ブログに Gulp のインストールから実行までの入門記事がありますので、何もご存じない方は併せてご覧ください。 【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 例 : 任意の JavaScript ファイルの結合お
![[Gulp.js] タスク単位のファイル分割 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/03a1ea44cc6ca0d02a5082d489e39167ed533931/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F05%2Ficon-gulp-400x400.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gulp.js（全俺） Advent Calendar 2014 - Adventar