npm-scriptで開発環境を作ってみよう | オレインデザイン
最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
clipboard
clipboard.js Modern copy to clipboard. No Flash. Just 3kb gzipped. Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package manageme
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
がんばらないTypeScript環境ほしい - 藻ログ
色々あってシンプルなtypescriptの開発環境をつくろうとして消耗した話です 小規模なプロジェクトをシュって書けるシンプルな環境がほしい でもナウくなっててほしい そもそもナウいとは... 最近のフロントエンドの人は何を言ってるのか全然わからないし依存パッケージが多すぎて混乱する でもちょっとはナウくなっててほしい 試行錯誤した結果 npm scripts + browserify + tsify + watchify で構成することにきめた． 本体を1行も書かないまま日付が変わっていた． もうナウくなくていいから本体が書きたい 構成 とりあえずbuildすると色々なものがdistに送られる構成にした ├── dist (static-assets) │ ├── bundle.js │ ├── bundle.css │ └── index.html ├── src │ ├── ts │
babel-preset-env を試す - アカベコマイリ
npm として配布するものは純粋な Node 機能のみで構成したいため脱 Babelしたが、Web フロントエンドや Electron では最新の ECMAScript 機能を利用したい。 というわけで、これまでは Babel + babel-preset-latest で JavaScript を変換してきた。しかし latest だと Web ブラウザーや Electron が最新規格に対応しても個別に変換を無効化するのが難しい。例えば ES2015 Classes は大半の Web ブラウザーが対応済みにも関わらず var Sample = function () { function Sample() { _classCallCheck(this, Sample); } } のように変換されてしまう。一方、機能単位で変換を無効にできるとしても Web ブラウザー毎の対応状況を調べる
いまさら聞けない！npmのこれだけは知っておきたい基礎知識
いまや Webフロントエンド開発に欠かせなくなったNode.js。併せて使うことが多いnpmの使い方を基礎から学びましょう。 Node.jsは、サーバーでJavaScriptアプリケーションが書けます。V8 JavaScriptランタイムで動作し、C++で書かれているため高速です。当初、アプリケーションにサーバー環境を提供する目的でしたが、ローカル環境のタスク自動化ツールとしても利用されています。Grunt、Gulp、WebpackなどのNode.jsをベースにしたツールによる新たなエコシステムは進化を続け、フロントエンド開発の形を変えるまでに至りました。 Node.jsのツールやパッケージインストールしたり管理したりする方法を、Node.jsのパッケージマネージャーであるnpmが担っています。npmには必要なパッケージをインストールするほか、パッケージを扱うための便利なインターフェイスが
npm-scripts で作るフロントエンド環境の構築 | mediba Creator × Engineer Blog
制作部の金森です。 フロントエンドエンジニアとして働き初めて丸7ヶ月が経過しました。 この記事は mediba Advent Calendar 2016 の 16日目です。 フロントエンド開発の現場においてタスクランナーを使わない日はないほど重要なツールになっています。 みなさんはタスクランナーに何を使っていますか？ 最新のフロントエンドツール使用調査結果からThe State of Front-End Tooling 2016 - Results に拠ると、 タスクランナーを使用しない人は 19.5% から 10.97% に減っているGrunt を好む人は 27.5% から 11.75% に減っているgulp を好む人が 43.69% と一番多いnpm-scripts を好む人は 22.8% 増え 25.95% にという結果が出ており、gulp が一番支持されているものの npm-scr
設定 babel browserify watchify babelify presets es2015
ES6 でクラス構文、及びモジュールを扱うための import 構文を書き、ブラウザで使用可能な ES6 に Babel で変換し、さらにモジュールの依存関係を Browserify で解消する。という一連の作業を npm scripts で実行する方法について書いています。 Babel, Browserify, Watchify, Babelify の関係 Babel は ES6(ES2015)→ES5 に変換するツール。(恐らく Babelify も内部では Babelを使用している。) 自分は class 構文、及び import, export 構文を書くために必要。 Browserify はモジュール機能を使うために必要。(require , export 構文を用いて読み込む JS ファイルの依存関係を解決するシステム。ES6 のimport, export 構文は ES6 に
タスクランナーとしてのnpm-scripts（パート1） | 株式会社コードグラフ
私たちの選択できるビジネスツールや開発ツール、またはサービスは数多く存在します。これらをうまく取り入れることで作業効率をアップし、より重要なことに時間を当てることができます。 コードグラフではリサーチや試用期間を経て、扱いやすさはもちろん主に相互連動性や信頼性、ワークフローなどの側面からよりベターなツールを絞り込んで選ぶようにしています。そしてなるべくワークフローをシンプルに保てるよう、使用するツールの数は抑えます。また便利であっても学習コストが極端に高いツールは採用しないようにしています。チーム内外での扱いやすさ、学習コストにどう影響するかも重要です。 この記事または今後、私たちのチームが実際にワークフローに組み込んでいるツールやサービスを随時紹介していこうと思います。 タスクランナ―としてのnpm-scriptsフロントエンド開発では、複雑なタスクをより自動化して効率よく作業を行うため
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 コ
Bootstrap 4 のビルドツールは npm-scripts で決まり - Qiita
Bootstrap 4 Alpha が最初に公開されたのは2015年の8月ですが、それから2年経ってやっと Beta が公開されました。公式ブログによると、今後は破壊的変更はでくるだけ避けるということなので、実際に使い始めることにしました。（Beta 2 が公開されたことに伴い変更 2017年10月22日、正式版が公開されたことに伴い変更 2018年2月6日） Bootstrap 4 Beta では、公式のビルドツールが Grunt を使うのを止めて npm-scripts に変更されました。その npm scripts のコードをみてみると、Grunt や Gulp で書いたコードよりかなりシンプルです。もう、複雑なことをしないのであれば、npm scripts を使った方が簡単で、複雑なことをしようと思えば webpack があります。それで、Grunt や Gulp を使うのは止めよ
『かんたんパッケージマネージャDuo』
みなさん、こんにちは。Ameba事業本部ゲーム部門の平木(Layzie) と申します。 最近はSteamで安いゲームを漁ってばかりの毎日です。このエンジニアブログでは初めて執筆になります。 さて、今回エンジニアブログで何を書こうか悩んだのですが、悩んだ結果Duoというパッケージマネージャの紹介をしようということになりました。 このDuo、GitHubのStar数は結構多いんですが、(2014/11現在2618Star)あまり紹介されてる記事とかが無いので紹介してみようと思った次第です。 Duoの特徴 昨今、フロントエンドで使えるパッケージマネージャは色々あると思います。厳密に言うとサーバ側のJavaScript実装ですがNode.jsのパッケージマネージャであるnpmにフロントのJavaScriptライブラリを登録して使うというパターンもありますし、新規プロジェクトの雛形を作ってくれるYe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タスクランナーとしてのnpm-scripts（パート2） | 株式会社コードグラフ