タグ

gulpに関するbigwestのブックマーク (6)

  • gulp:タスクをファイル分割する方法 - NxWorld

    gulpは実行したいタスクをgulpfile.jsに記述していくというのをよく見かけると思いますが、タスクが増えれば増えるほど記述内容は増えていきます。 もちろん特に気にならないという人もいるとは思いますが、できれば各タスクがどのような処理を行っているのか把握しやすくしたり管理しやすくしたいという場合は、以下で紹介する方法で各タスクをファイル分割することができます。 今回はサンプルとして下記のようなよく見るファイル構成のものがあり、gulpfile.jsには既に幾つかのタスクが記述されているものをファイル分割していく想定で分割化の手順を紹介していきます。 構成の中身はそれぞれgulpfile.jsとpackage.jsonがファイル、srcはいわゆる開発環境のディレクトリとなります。 var gulp = require( 'gulp' ), sass = require( 'gulp-s

    gulp:タスクをファイル分割する方法 - NxWorld
    bigwest
    bigwest 2016/08/01
  • なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog

    http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの

    なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
    bigwest
    bigwest 2015/05/22
  • テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは! LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか? EJSっていうのはですね、なんかもう、こう、すんごいツールでして! とにかく、使うとコーディングがめっちゃ早くなるんですよ!! 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは? EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます

    テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Gulp入門 - コーディングを10倍速くする

    2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900

    Gulp入門 - コーディングを10倍速くする
  • 【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 | DevelopersIO

    こんにちは、清田です。 最近、フロントエンド開発においてGruntにお世話になっている方も多いかと思います。 私も日ごろ大変お世話になっています。私としては、Gruntにあまり不満はないのですが、多少体感としてちょっと遅いかなぁくらいの印象を持つくらいでした。 そんな中、タスクランナーツールとして後発ながらGulp.jsという名前を聞くようになってきたので、実際に試してみました。 Gulp.jsとは? Gulp.js公式サイト 皆さんご存知のフロントエンド開発でタスクランナー&ビルドツールとして有名なGrunt.jsですね、弊社ブログでも何度かご紹介させていただいたかと思います。 Gulp.jsも同じく、タスクランナー&ビルドツールとしての立ち位置とのこと。 Gruntと何がちがうの? いろいろなエントリーを拝見し以下の意見がありました。 ビルドファイルが書きやすい 並列処理のため、実行速

    【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 | DevelopersIO
    bigwest
    bigwest 2014/05/13
  • タスクランナーgulp入門

    タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト

    タスクランナーgulp入門
    bigwest
    bigwest 2014/05/13
  • 1