タグ

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

    gulp: The Good Parts
    takaesu
    takaesu 2016/07/22
  • [意訳]私が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の一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が

    [意訳]私がGulpとGruntを手放した理由 - Qiita
  • Gulpに頼らない!CLIで作るフロントエンド開発環境 - Qiita

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

    Gulpに頼らない!CLIで作るフロントエンド開発環境 - Qiita
  • 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

    Why I Left Gulp and Grunt for npm Scripts
    takaesu
    takaesu 2016/01/27
    npm の scripts を使って処理をまとめる
  • 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

    tacamy--blog
  • Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート

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

    Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
  • ペライチの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は、だいたい下記のようなことがすば

    ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
  • 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:

    bower-buildでbowerで入れたファイルを一つにconcatする - Qiita
    takaesu
    takaesu 2014/08/18
    外部ライブラリ系を一つにつないで、vendor.js, vendor.css を個別に吐き出す。
  • gulpとかnpmのこととか – A Memorandum

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

    takaesu
    takaesu 2014/07/30
    npmでコマンドを使うためにグローバルに入れたり、ローカルに入れたりややこしいことについてのまとめ。--save-dev
  • 最近の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は、設定ファイルが何画面にも渡っ

    最近のjsテスト/ビルド環境 - lxyuma BLOG
  • 1