gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
僕なりのフロントエンド開発環境2016年版 - Qiita
ちょっとバージョンアップ http://qiita.com/koh110/items/f6ecbdc03093675a9527 自分なりに使いやすいフロントエンドの開発環境を整えて使っていたけれど、だんだん時代の流れにそぐわない箇所が出てきたのでその部分を書き換えてアップデートしてみた。 http://qiita.com/koh110/items/9c750fb67e40481e52cd 昔のバージョンはv1.0.0というブランチに切り出し https://github.com/koh110/minjsapp やめたもの gulp-load-plugins run-sequence bower モジュールやライブラリへの依存度を下げたかった 変更したもの gulp-babel -> webpack + babel-loader requireしたかった 追加したもの sassコンパル 生c
特定のディレクトリだけをGitHub Pagesにデプロイするためにgulpを使う - Qiita
var gulp = require('gulp'); var ghPages = require('gulp-gh-pages'); gulp.task('deploy', function() { return gulp.src('./app/**/*') .pipe(ghPages()); }); [20:58:45] Using gulpfile C:\projects\qqiq-fan-site\gulpfile.js [20:58:45] Starting 'deploy'... [20:58:47] [gh-pages] Cloning repo [20:58:47] [gh-pages] Checkout branch `gh-pages` [20:58:48] [gh-pages] Updating repository [20:58:55] [gh-pages] Cop
npm-scripts で使える便利モジュールたち - Qiita
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
[混沌すぎ] Middlemanはこれから sprocket を辞めて CommonJS するようです [グロた] - Qiita
はじめに こんにちは、monpy です。 今日は何を話そうかというと、 Facebook で この記事が回ってきたんですね。 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～ この記事は、タイトル通り Gulp 入門の記事な訳です。 僕も フロントエンドの端くれなので Gulp は頻繁に利用します。 Gulp が出て一体どんだけ経ったんだろうなぁ、と思いをはせたので調べてみると first commit が 4 Jul 2013。 まだ 2年と5ヶ月くらいしかたってないんだなぁ。と。 でも2年も経てば、技術が変わってしまうのが フロントエンドの常。gulp は辞めようぜ！なーんて記事もちらほら(ひえー)。 今日はそんな技術の移り変わりが激しくて嘔吐感に見舞われた感想です。 ちなみにタイトル通り mi
![[混沌すぎ] Middlemanはこれから sprocket を辞めて CommonJS するようです [グロた] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/70f20f84d5b7a552cc059faeaac3e3c473fe7e4c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JUI3JUI3JUU2JUIyJThDJUUzJTgxJTk5JUUzJTgxJThFJTVEJTIwTWlkZGxlbWFuJUUzJTgxJUFGJUUzJTgxJTkzJUUzJTgyJThDJUUzJTgxJThCJUUzJTgyJTg5JTIwc3Byb2NrZXQlMjAlRTMlODIlOTIlRTglQkUlOUUlRTMlODIlODElRTMlODElQTYlMjBDb21tb25KUyUyMCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBNyVFMyU4MSU5OSUyMCU1QiVFMyU4MiVCMCVFMyU4MyVBRCVFMyU4MSU5RiU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzY4ZWYzZWI4MmIzZTVmZmQ2ZDkzOWI5N2RlYmY5MTc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb25weSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWM0YWRjMjI4YmNlNTdlYWU2NzRkMTlkM2VkNDU0NDE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Om44OL44OQ5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9685c3a4fe40c24589a7fed19061260b)
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python hoge.js を minify したファイルを hoge.min.js として 出力する方法です. gulp-rename ってやつを使います. 拡張子を .js から .min.js に変換する gulp-rename というタスクを使います. 下記コマンドでインストールできます. $npm install --save-dev gulp-rename ついでに uglify も $npm install --save-dev gulp-uglify あとは gulpfile.js に下記のようなタス
babelify v7.2 を試す - アカベコマイリ
2015/10/29 に JavaScript の Transpiler である Babel の 6.0.0 がリリースされた。 6.0.0 Released これまでの Babel はデフォルトで ES6 と React JSX 変換に対応していたが、これからはプラグイン化されたものを指定する形式になるのだという。Browserify 用 Babel の babelify も同様で、これを最新に更新してコンパイルを実行すると ES6 部分が SyntaxError になる。 $ npm run build:js-main > electron-starter@1.0.4 build:js-main .../examples-electron/electron-starter > browserify -t babelify ./src/js/main/Main.js --im --no-
npm-check-updates
npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions. maintains existing semantic versioning policies, i.e. "react": "^16.0.4" to "react": "^18.2.0". only modifies package.json file. Run npm install to update your installed packages and package-lock.json. sensible defaults, but highly customizable CLI and module usage compatible with: npm, y
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
Bowerまとめ（概要・導入・コマンド一覧） - Qiita
★★ bower list --paths でソースマッピングが確認できる。変更するにはどうすればいい？ 本家サイト：Bower - A package manager for the web BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製 各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず（Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある）。 環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ（依存パッケージ含む）を1コマ
gulp.js その4 プラグイン一覧 - Qiita
gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/watilde/items/340b57ef289142b27899
GitHub - watilde/npm: a package manager for javascript
console.log to stdout on gulp events
browserify - jqueryと依存するプラグインをどうにかしたい - Qiita
ディレクトリごとに環境変数を定義 - direnv - Qiita
gulp-sass-bulk-import