タグ

javascriptとgulpに関するtakaesuのブックマーク (6)

  • [意訳]私が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
  • 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 のためのアセット環境構築 - 破いて捨てたノート
  • 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 を個別に吐き出す。
  • 最近の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