npm-scripts でクロスプラットフォームに環境変数を参照するための npm を作成してみた - アカベコマイリ
以下の記事で npm-scripts から環境変数を参照する方法と問題点について書いた。 Electron を試す 7 – Electron v1.0 対応 npm-scripts で自前の環境変数を利用する方法と問題 課題として npm run するプラットフォームによって変数の参照記法が異なるため、それらを統一できない問題がある。npm-scripts でタスク管理したい派としては、どうしても解決したい。そこで対策用 npm を作成してみた。 cross-conf-env akabekobeko/npm-cross-conf-env 以下に npm の設計などをまとめる。 npm-scripts における環境変数の参照記法 冒頭のリンク先でも解説してあるが、改めて。package.json に定義された値を npm-scripts から環境変数として参照する場合の記法は以下となる。 P
npm-scripts で自前の環境変数を利用する方法と問題点 - アカベコマイリ
Electron を試す 7 - Electron v1.0 対応で npm-scripts に環境変数を定義してそれを scripts 内から参照する方法を書いたのだが、この方法は Windows 環境だと利用できない。 と、これだけで話を終えるのはもったいないので、私がおこなった調査や見解についてまとめる。 2016/5/19 追記 本記事の問題を解決するための npm を作成した。詳しくは npm-scripts でクロスプラットフォームに環境変数を参照するための npm を作成してみたを参照のこと。 package.json の config package.json に config の説明がある。 A "config" object can be used to set configuration parameters used in package scripts that
【2018年】Webpack4でVue.js単一ファイルコンポーネントの作り方 - Qiita
2019/05/12 現在の所、以下の内容はすでに時代遅れの可能性があるので、実際にコンパイル可能か保証出ません。 tl;dr vue単一ファイルコンポーネント用の環境を用意しました。 サンプルをgithubにアップしていますので、git cloneなどして中身などを御覧ください。 (個人的には)最低限の構成をしています。 devinoue/webpack-vue-sample やりたかったこと Vue.jsでアプリケーションを作っていたところ、あまりにmethodsプロパティに多くを詰め込みすぎたため、そろそろ1ファイルに書き出すのは無理だと判断。フロントエンド界隈では標準ツールと言われるWebpackに手を出してみました。 自分は普段はPHPを中心に仕事をしているため、Webpackのようなファイルバンドラの経験がなく、せいぜいLaravel経由でMixを利用するぐらい。 Larave
npm-scriptsで簡単・高速・シンプルに Sass / Scss コンパイル！
2018年現在 Sass / Scss はCSSプリプロセッサの中で最も人気があります。 Sassが登場して以来、何年にもわたりシンプルで再利用可能なCSSを書くのに役立っている方は多いでしょう。 SassからCSSにコンパイルする方法は多数存在しますが、 この記事ではタスクランナーに頼らない2018年現在で流行りの 簡単かつシンプルかつ高速のコンパイルが行える npm-scriptsでのコマンドラインを使ったコンパイル方法を説明します。 Node.jsのインストール コマンドラインでSassをコンパイルするには、 まずnode.jsをインストールする必要があります。 公式ウェブサイトnodejs.orgからダウンロードし、パッケージを開いてウィザードに従います。 NPMを初期化する NPMはJavaScriptのノードパッケージマネージャです。 NPMを使用すると、サードパーティのパッケ
npmでミニマムに始めるSass - Qiita
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 CSSの常識が変わる！「Compass」の基礎から応用まで！ またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 gulp インストール～基本設定の備忘録（windows） ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと
npm-scriptsで静的ページを量産するための最強タスクランナー - Qiita
ちょっと大規模なwebサイトを作るときに便利なタスクランナーをnpm-scriptsで作成しました。 導入コスト低くて、タスクランナーのバージョンがあがって使えなくなるリスクなどが低くて、必要な機能を取捨選択できるカスタマイズ豊富な機能です。 ##自動化する機能について 1.ejsでヘッダーやフッターなどの共通部分のテンプレート化 （ejsを使うとヘッダーやフッターなどの共通部分をテンプレート化できる） 2.scssをcssにコンパイル 3.cssを圧縮（１行になる） 4.scssでの修正場所がわかりやすいようにsource-map作成 5.オートプレフィクサー付与 6.コードを修正して保存すると画面が自動で更新される 7.開いた複数ブラウザ間でのスクロールやクリックなどの動きを同期でテストを容易に！ 8.フォルダ分けでページごとに管理（folder_1、folder_2の配下にindex
1分でできるnode-sassとautoprefixerを使用したSCSSコンパイル方法
node-sassとautoprefixerでコンパイル 昔はSASSのコンパイルにはCompassを使用することが多かったが、現在では新しいプロジェクトであればnode-sassとautoprefixerを使用するのが一般的だ。 node-sassはRubyを使用したCompassよりも処理速度が速く、さらにautoprefixerを使用すればCSSのベンダープレフィックスが自動で付与されるためコーディングの手間が激減する。 Yarnを使用すればすぐに環境構築可能 node-sassとautoprefixerの環境構築は難しそうに思えるが、Yarnを使用すれば1分でできる。 Yarnがインストールされていない場合はあらかじめインストールしておく。 $ yarn -vでバージョンが出なければインストールされていない。 インストール | Yarn node-sassとautoprefixer
超絶・超速のnode-sassでsassコンパイルのすすめ
さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他にいろいろ調べたらlibsassというライブラリがありsassをC・C++で実装したものということです。 Node、Ruby、Go、Python等の言語からも使えるようでしてnodeなら必ず入れるのでnodeで提供しているnode-sassを入れることにしました。nodeとnpmはセットなのでpackage.jsonのscriptsに記載して運営する方法をご紹介いたします。 gulpとかもありますがいろいろ入れたりするのが面倒なのでpackage.jsonだけで使う方法です。とてもシンプルで使いやすいですのでおすすめな方法です。 node-sass導入方法 node,npmは入っている状態での方法に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npm-scripts 変数の使用方法 - Qiita
npm-scriptsの練習メモ sassのコンパイルと圧縮をやってみる - Qiita
node-sass/package.json at master · sass/node-sass
Foundation Open Source Community
node-sassでSassファイルをコンパイルする