タグ

ブックマーク / akabeko.me (5)

  • npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ

    gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは? 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ

    kyaido
    kyaido 2016/10/12
  • Atom を試す - アカベコマイリ

    Sublime Text の利用パッケージと設定 2015で予告したとおり Sublime Text に近い環境を Atom で構築してみる。対象は現時点の最新 Atom v1.2.4 とする。 パッケージ管理 Atom は標準でパッケージ管理機能が組み込まれている。追加と削除、検索、設定も GUI ベースなのでわかりやすい。 紹介しているパッケージを検索する場合はメニューから Atom > Preferences を選ぶと Settings タブが表示される。その左メニューから Install を選択して検索窓にパッケージをコピペした後 Enter キーを押す。 検索結果にはパッケージ情報と共にダウンロード数も表示されるため、評価の目安になる。パッケージ情報の Install ボタンを押すことでインストールできる。 検索結果として既にインストールしたパッケージも混在して表示される。ここか

    kyaido
    kyaido 2015/12/06
  • gulp ありの Web フロントエンド開発 - アカベコマイリ

    gulp なしの Web フロントエンド開発 の追補編として gulp を利用するケースもまとめておく。元記事と同じプロジェクトと機能を gulp で実装した。記事の構成は「gulp なしの〜」を踏襲。各項の説明は package.json の scripts に代わって gulp タスクとしている。 設計方針 はじめに設計方針を決めておく。 AltJS から JavaScript へのコンパイルに対応する AltCSS から CSS へのコンパイルに対応する ファイル監視による AltJS/AltCSS の自動コンパイルに対応する ユニット テストに対応する コードド キュメント生成に対応する Windows 環境を考慮する 単体 gulpfile.js のみで実装する 方針 1 〜 6 までは「gulp なしの〜」と一緒。方針 7 は環境に関する設定を package.json と g

    kyaido
    kyaido 2015/09/06
  • gulp なしの Web フロントエンド開発 - アカベコマイリ

    Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか?という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus

  • npm-run-all と concurrently を試す - アカベコマイリ

    gulp なしの Web フロントエンド開発 のコメント欄にて npm-scripts を Windows 環境でも並列実行させる方法として npm-run-all を勧められた。他にも CLI 周りのツールをいくつか教えていただき、その中にある concurrently も並列実行を実現するものなので、これらをまとめて試してみる。 2015/9/1 追記 npm-run-all v1.2.8 を試すにも書いたとおり最新の npm-run-all であれば watchify の終了問題は発生しない。よって現在の package.json では npm-scripts の実行を npm-run-all へ統一している。 元の npm-scripts npm-run-all と concurrently による書き換え対象となる npm-scripts は以下。 { "scripts": {

    kyaido
    kyaido 2015/09/02
  • 1