[B! gulp] takaesuのブックマーク

takaesu id:takaesu

gulpに関するtakaesuのブックマーク (10)

gulp: The Good Parts
Good practices for gulp 関西フロントエンドUG主催「FRONTEND CONFERENCE 2016」での発表資料です。 http://kfug.jp/frontconf2016/ https://github.com/jmblog/gulp-the-good-parts
takaesu 2016/07/22
gulp
リンク
[意訳]私がGulpとGruntを手放した理由 - Qiita
このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。︵以下、訳︶私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。例を挙げましょう私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。これらを解決しようと思えばできました。しかしなんとそれらのツールを直接使用すると不具合が
takaesu 2016/01/30
gulp

grunt

npm

javascript

フロントエンド
リンク
Gulpに頼らない！CLIで作るフロントエンド開発環境 - Qiita
はじめに今日はクライアントサイドWebアプリケーションの開発環境構築について書きたいと思います。昨今、HTML, JS, CSSを駆使したWebアプリ開発の場においても、タスクランナーの導入は当たり前となってきました。僕も日頃の業務ではフロントエンド用のタスクランナーとしてgulpを使っています。 gulpについては好きなところも嫌いなところもありますが、チームで仕事をする上では何らかのタスクランナーとビルドスクリプトの存在が欠かせないのは否定しません。しかし、個人的に新しいフレームワークをちょっと勉強したいときにGruntやgulpのスクリプトをゼロから作成するのは、正直言って心が折れます。 YeomanやSlushJSでジェネレータを探すのも手ですが、自分の好みのフレームワーク、トランスパイラがセットで提供されないケースもしばしばです。そうなると、結局自分でgulpfile.
takaesu 2016/01/30
gulp

JavaScript

フロントエンド

grunt
リンク
Why I Left Gulp and Grunt for npm Scripts
I know what you’re thinking. WAT?! Didn’t Gulp just kill Grunt? Why can’t we just be content for a few minutes here in JavaScript land? I hear ya, but… I’ve found Gulp and Grunt to be unnecessary abstractions. npm scripts are plenty powerful and often easier to live with. Let’s Begin With An Example…I was a big fan of Gulp. But on my last project, I ended up with 100’s of lines in my gulpfile and
takaesu 2016/01/27
npm の scripts を使って処理をまとめる

gulp

npm
リンク
tacamy--blog
JavaScriptでAlgoliaのAPIを叩くときに、APP IDとAPIのKEYを引数に渡す必要があるんだけど、それらを外部ファイルにして、Gitにコミットしないようにしたかったけど、webpackの設定をどう書けばいいのかよくわかんなくてつらかったのでメモ。 Vue.jsをwebpack v4でビルドしてる環境です。 dotenvのインストール $ npm install dotenv --save ほかにもdotenv-webpackとかいろいろあって、どれをつかえば…！ってなってた。 .envの作成ルート直下に.envという名前のファイルを作成して、以下のような感じで保存する。 APP_ID=***** API_KEY=***** .envをignore .envをGit管理化から除外するために、.gitignoreに.envを追記する。 webpackの設定 webpack
takaesu 2015/11/04
gulp

javascript
リンク
Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい既存のCoffeeScriptのコードも共存させたい（後ほど書き換える予定） npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したいそもそもSprocketsは何をしているか周知のことでしょうが念のためおさらい。ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイルアセットのminify アセットの連結アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
takaesu 2015/05/22
gulp

react

sprockets

asset pipeline

es6

rails

ruby

javascript
リンク
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
takaesu 2015/03/07
rin

web

html

css

gulp

フレームワーク

design
リンク
bower-buildでbowerで入れたファイルを一つにconcatする - Qiita
bower、普通に入れるだけだとbower_components/...に入るんだけど、index.htmlから相対パスで一個一個引いたりするのが面倒なので、だいたいconcatして一つにまとめたりする。で、gulpやgruntのタスクを書くんだけど、毎回やるの面倒になったので、それだけのタスクをやるライブラリをさっくり作った。 mizchi/bower-build いれる。 $ bower init # なんか色々訊かれる $ bower install --save jquery codemirror # ライブラリいれる $ bower-build -o public --debug write: /Users/mizchi/proj/bower-build/public/vendor.js # include codemirror.js and jquery.js write:
takaesu 2014/08/18
外部ライブラリ系を一つにつないで、vendor.js, vendor.css を個別に吐き出す。

javascript

js

grunt

gulp

bower
リンク
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと﹁数ヶ月前の記事は鵜呑みにしてはいけない︵というか、そのままだと動かないこともありうる︶﹂かな〜、なんて。あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は﹁v3.8.6﹂になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
takaesu 2014/07/30
npmでコマンドを使うためにグローバルに入れたり、ローカルに入れたりややこしいことについてのまとめ。--save-dev

npm

gulp

node
リンク
最近のjsテスト/ビルド環境 - lxyuma BLOG
最近のテスト環境最近、ブログ書かないうちに、また、自分のjs周りのテストやビルド環境が変わってきた。具体的には、karmaとかgulpとかに変わった。今日は、その環境にしてどうだったか？とか、設定ファイル(gulpfile)とか書いてみる。去年と今年と去年、勉強会等でyeomanとかgruntの話をしていて、このblogでもどこかに書いてた。テストはmocha chaiが良いのかなーと思ってた。これもblog書いた。所が、世の中どんどん変わっていく。最近の環境今はこんな感じ。 build tool gulp test jasmine2 sinon karma gulp vs Grunt gulpどうなんだろう？と思いながら色々試していくうちに、かなりしっくりきた。 stream baseで書き易いので、カスタマイズし易い。 gruntは、設定ファイルが何画面にも渡っ
takaesu 2014/06/18
javascript

test

gulp

jasmine

grunt

karma
リンク
1