タグ

npmに関するm_m3zonoのブックマーク (8)

  • npmで公開されているjQueryプラグインを使う with Browserify & parcelify | maesblog

    2月18日にnpmのブログに「The npm Blog — Welcome, jQuery developers!」という記事が投稿されました。 The jQuery Plugin Registryはすでに読み取り専用と化しているので、npmはjQueryコミュニティのサポートを開始するという内容でした。つまりnpmはjQueryプラグインの公開にも力を入れていくということです。 この記事に続いてjQueryプラグインの公開方法、使用方法、開発方法などの記事も続々と投稿されました。jQueryプラグインもまだまだ見捨てられていないということを信じて、今回はnpmで公開されているjQueryプラグインの使い方について紹介します。 さらにnpmのブログで2月25日に投稿された「The npm Blog — Using jQuery plugins with npm」という記事では、「npmでj

  • npm管理のライブラリが提供する css をインポートする - Qiita

    概要 クライアントサイドのパッケージ管理は,bower から npm に移した方が良いらしい.npm 管理の JavaScript パッケージは,Browserify を使えばインポートできる.では,CSS はどうやってインポートすれば良いのか?例えば,bootstrap を npm でインストールして bundle.css に取り込むにはどうすれば良いのか?調べた結果をまとめる. 前提 タスクランナーとして Gulp を使う.また,各パッケージのフォルダ構成に依存しない方法を探す.また,下記の例では bootstrap を使用しているが, npm i --save bootstrap にてインストール済みとする. Parcelify を使う JavaScript のインポートに Browserify を使う場合,プラグインの一つである Parcelify の利用はメジャーな方法だろう.逆

    npm管理のライブラリが提供する css をインポートする - Qiita
    m_m3zono
    m_m3zono 2016/09/15
    gulp で組み込む例
  • Normalize.css を npm で管理して Stylus に組み込む - アカベコマイリ

    これまで Stylus から Normalize.css を利用する場合、以下のように管理していた。 bymathias/normalize.styl から normalize.styl をダウンロード プロジェクトの src/stylus/lib フォルダ内に normalize.styl を配置 Stylus のエントリー ポイントで @import "lib/normalize.styl" つまり静的リソースとして扱い、バージョン更新があれば手動で置き換えていた。面倒な作業だが、CSS では JavaScript における npm と Browserify/webpack のようなリンカー的な仕組みが確立していないと考えており、また、更新も滅多にないことから放置していた。 しかしふと、Normalize.css のサイトをチェックしたら 公式 npm が用意されていた。また Styl

    m_m3zono
    m_m3zono 2016/09/15
    npm で配布されている CSS の利用例
  • npm-scripts で使える便利モジュールたち - Qiita

    npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。

    npm-scripts で使える便利モジュールたち - Qiita
  • 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

    Grunt/Gulpで憔悴したおっさんの話 | MOL
  • npm-scriptsについて - Qiita

    npmは"scripts"というフィールドにshell scriptとエイリアスコマンドを指定できる。 { "name": "myapp" "scripts": { "start": "node app.js", "production": "NODE_ENV=production node app.js" } } キーはnpm startのようにエイリアスとして利用できる名前となり、値にはshell scriptをワンラインで指定する。 キーは自由に指定できるが、中には既に予約されている名前があり、それらを含めて以下の4種類に分類できる。 意味付けだけがされたnpm-scripts start appを起動するようなshell scriptのエイリアスとして用いる。 restart appを再起動させるためのshell scriptのエイリアスとして用いる。 stop appを停止させる

    npm-scriptsについて - Qiita
    m_m3zono
    m_m3zono 2016/09/07
    予約されたキー/pre,postのプリフィックスで前後に実行
  • Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA

    ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か? npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"

    Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
  • npm package.json 日本語版 取扱説明書

    ページは npm.org 提供文書を翻訳したものです。 原文は 家参照 、誤謬・誤記の指摘は こちら からお願いします。 × npm package.json 取扱説明書 記述方法 このドキュメントを通じて、あなたの package.json に必要な全てを 学ぶことが出来ます。記述は JavaScript のオブジェクトリテラルではなく、 正しい JSON でなければなりません。 このドキュメントの多くの振る舞いは npm-config(7) に書かれている設定に影響を受けています。 name package.json の中で最も大事な項目は "name"(名前) と "version"(バージョン) です。必須であり、パッケージはこれらなしで インストール出来ません。name と version をもってして、パッケージが 完全に一意となることが想定されています。よってパッケージ内

  • 1