Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
細かすぎて伝わらない package.json 小ネタ三選 - t-wadaのブログ
こんにちは、和田 (@t_wada) です。本日は Node.js Advent Calendar の 7 日目として、 Node.js で開発する際の設定ファイル package.json にまつわる Tips について書きたいと思います。 はじめに 私はこれまで power-assert を筆頭に、いくつか npm モジュールをリリースしてきました。 Node.js を使った開発には、設定ファイル package.json の記述が必要です。特に npm モジュールを公開する場合には、設定すべき事、考えるべき事もいろいろ増えてきます。今回は、 npm モジュールを作ってきた過程で学んだ package.json に関する Tips の中で、あまり知られていないマイナー気味なものを挙げていきたいと思います。 Tips1: package.json の files フィールドでホワイトリス
npm とフロントエンドのパッケージ管理の未来
JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも
AngularJSのベストプラクティスに従っていますか？ -- angular-hintの使い方 - Qiita
最近、AngularJSリファレンスという書籍を書いていたのですが、紙面や時間の都合上書けなかったこともたくさんありました。 というわけで、書籍に書ききれなかった内容を落ち穂拾い的に紹介していきたいと思います。 今回はangular-hintというツールを紹介します。 https://github.com/angular/angular-hint これは、Angularチームの1人が開発しているツールで、AngularJSを使って開発したアプリケーションに組み込んで実行すると、エラーを検出してくれたり、ベストプラクティスに従っているかどうかをチェックしてくれたりします。 ただし、説明文にWIP(Work In Progressの略)と書いてあるので、まだ開発中のようです。 angular-hintを組み込むとアプリケーションが動かなくなることもあるのでご注意ください。 angular-hi
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)
■ [ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css をかなり良い感じに organize するという仕組みを production の rails に投入した。 準備としてはまず nodejs を使えるようにするところから開始。これは cli さえ満足に動けばいいので xbuild を使ってビルドしたものを /opt/node-x.y.z とか /usr/local/node-x.y.z に置いて /usr/loca
![[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cab6183abe73ade0ce0a24c302ac36ee5c17b43/height=288;version=1;width=512/https%3A%2F%2Fwww.hsbt.org%2Fdiary%2Ftheme%2Fogimage.png)
Front End Ops Tooling
This talk covers build tooling, processes, and your development workflow. You’ll get a glimpse as to why you should be building, and why you should put together a build process from the get-go. Then we’ll move on to tooling. Here I’ll discuss some of the most popular JavaScript build tools, namely Grunt, Gulp, and npm. We’ll investigate how each one performs for certain tasks, and I’ll help you fo
Pretty Diff - Gitの差分表示をGitHub調にして見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
IntelliJ IDEAでTypeScriptの開発環境を作ってみる - oinume journal
最近趣味プログラムのサーバサイドをNode.jsで書いてるんだけど、JavaScriptはどうも好きになれないので逃避先としてTypeScriptを選んでみた。CoffeeScriptでもいいんだけど、文法が似てるほうがソースコピペできたりして楽かなと思ってTypeScriptを選択。 今回使うツールはMac版のIntelliJ IDEAのv13。 必要なプラグインをインストール 以下のプラグインをインストールしておく。 NodeJS File Watchers IntelliJの設定 npm install -g typescriptしておく 適当にプロジェクトを作る File -> Settingsで Node.js and NPMの設定を開き、Node interpreterの設定をしておく。自分はnodebrewを使っていて、/usr/local/nodebrew/current/
Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita
最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法がありました。 何に時間がかかっているか taskを走らせた際、何で時間がかかっているのかをtime-gruntで確認してみると、実行しているtask自体ではなくnpmタスク(適切な表現かは分かりませんがGruntプラグインの事です。)の読み込みの方に時間がかかっている事が分かります。 loadNpmTasks()で2秒はかかっている状態 npmタスクの読み込みに何故時間がかかるかというと、Gru
あんなこともこんなことも。そう、Node.jsならね。
$ pulldown jquery -> Success: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js was downloaded to ./jquery.min.js $ ls jquery.min.js
grunt bower yeoman入門記事 - lxyuma BLOG
※これは、社内の勉強会の資料の下書きです。 ここ数年で、js環境が整理されてきた。 js開発するなら、これらの知識は必須。無いとめっちゃ不便。 という事で、今日は、gruntとbowerとyeomanの話。 各ツール概説 Yeoman applicationのひな形を作る アプリ構築に必要な様々な作業を任せられる Grunt build / preview / testに使う Bower 依存性の管理を行う 手動でDLやscript管理する必要無 rails開発者のために ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。 grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか) bower => ruby gem管理をjsのclient側で実現した物。 y
QuipperでHTML5アプリを作ってる話 - Fujimura
9月からQuipperという会社で働いています。 今日はリリース前というのに同僚がすごい勢いでブログエントリを書いている。 Quipper のスピード感自分の強みを生かすこと on QuipperGithub Issues を利用したリリースマネージャのお仕事Quipperでのおじさんエンジニアの立ち位置同調圧力に負け、僕も書くことにした。 最近、いわゆるHTML5アプリ(HTML+CSS+JavaScriptのクライアント)を作った。もうすぐリリース。 そこで色々新しいテクノロジーを使ったので、私見を交えつつ簡単にご報告します。 Chaplin.js素のBackboneだと、ブートやインスタンス管理の仕組みを作るのが面倒。ここ一年でそれっぽいものを2度作ったので、もうやりたくなかった。 Chaplin.jsはレールがひいてあり、インスタンス管理も行き届いてる。 Brunchで雛形つくれる
[Git]ungitでGitリポジトリ状態をグラフィカル表示[Node] | DevelopersIO
ungitとは 私はGitを操作するとき、基本的にはコンソールからコマンドを入力していますが、 ブランチ数/マージ回数が多くなってくると、リポジトリがどういう状況なのかを把握するのがちょっと大変になります。 そんなときに便利ではないかと思えるモジュールが、このungitです。 ungitはnode.js上で動作するモジュールで、gitリポジトリ上で実行するとnodeサーバが起動し、 そのリポジトリの状況をブランチで表示することができます。 また、表示だけでなくamendやブランチ/タグの作成も可能になっています。 nodeとgitが使える状態ならば使用できるので、シンプルなリポジトリを作って試してみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.8 npm : 1.2.23 Git : 1.7.12
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mixi-inc/JavaScriptTraining: Training course repository for JavaScript