タグ

gulpに関するcpp_0302のブックマーク (6)

  • gulp+node+expressでlivereload使いたい - ぶるーすくりーん

    動機 ソースコード修正したら、サーバ再起動→ブラウザリロードとかいろいろ捗らないので、ソース修正があったら自動でサーバ再起動〜ブラウザリロードまでしたい。 さらに、gruntじゃなくてgulp使いたい。 ちなみに、expressとか使わずにクライアントサイドのみの開発の場合はBrowsersynとか使ったほうがさらに便利です。 BrowserSyncでうきうきレスポンシブ対応アプリ開発 2015/08/19 BrowserSyncを利用した版の記事書きました。 gulp + node + express で BrowserSync 使おう 方法 nodemon + livereload を使用して実現してみました。 もしかしたらもっとスマートなやり方があるかもです。 2015/03/04 サーバ側のリロードの同期がとれない場合があったので、少し修正しました。 gulpfile.js作成 v

  • TypeScript + React + WebPack + Gulpの作り方(SourceMapからminifyまで) - かずきのBlog@hatena

    自分用メモ。 まず、tsconfig.jsonから。 tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "removeComments": true, "sourceMap": true, "jsx": "react" }, "exclude": [ "node_modules" ] } とりあえず、node_modulesを除いたファイルを対象にしておけばだいたいOK。 次に、webpack.config.jsです。 webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { entry: { app: './react/app.tsx' }, out

    TypeScript + React + WebPack + Gulpの作り方(SourceMapからminifyまで) - かずきのBlog@hatena
  • gulp + node + express で BrowserSync 使おう - ぶるーすくりーん

    以前、 gulp+node+expressでlivereload使いたい って記事を書いたのですが、その BrowserSync 版です。 gulp + node + express で BrowserSync 使おう。 サーバサイドを node + express で実装しつつ、クライアントも同じプロジェクトで扱うようなプロジェクト向けのライブリローディング設定方法です。 意外と日語で説明してくれる記事が少なかったのと、検索の結果↑の記事見てくれてる方が多かったので。 当時は、BrowserSync からどうやって express につないだらいいんだか、無理なんだかと思ってたのですが、BrowserSync に Proxy の設定をしてあげれば可能です。 方法 まず、express 側の再起動が必要になるようなリソースは、nodemon の機能を利用して監視します。 そして、Brow

    gulp + node + express で BrowserSync 使おう - ぶるーすくりーん
  • gulpでtsconfig.jsonを生成する - ブログ

    Sublime TextやAtom, Visual Studio CodeはTypeScriptの入力補完の機能があり、 正しく動作させるには tsconfig.json でコンパイラオプション等を指定する必要がある。 コンパイル対象のファイルを指定するにはデフォルト設定 (ルート以下のすべての *.ts) または files プロパティを指定する必要があるのだが、 node.js環境では node_modules 以下に不要な *.ts が入っているため前者が使用できず、 後者はglobが効かないため tsconfig.json のメンテナンスが大変面倒くさい。 そのうちglobとかexcludeとかが実装されるんじゃないかと思うが、 当面はgulpから tsconfig.json を生成することにした。 以下 Gulpfile.js: var gulp = require('gulp'

  • 2015年はgulpで決まり!開発環境をgruntから乗り換えよう!(コーダー編) | SONICMOOV LAB

    もーいーくつねーるーと~、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・!早いですね! 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を!!終えない限りはクリスマスを迎えられませんよね( 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、題に入りたいと思います! こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります! 目次 なぜ gulp なのか 目標 ディレクトリ構成 基設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・

    2015年はgulpで決まり!開発環境をgruntから乗り換えよう!(コーダー編) | SONICMOOV LAB
  • 便利なGruntの弱点を補うgulp.jsのインストールと使い方

    詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル(Gruntfile.js)は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能(プラグイン)を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」(以下、gulp)です。 gulpはGruntを継承しつつ、

    便利なGruntの弱点を補うgulp.jsのインストールと使い方
  • 1