[gulp] 効率的にプラグインを読み込む - Qiita
gulp で利用するプラグインをひとつひとつ読み込むと大量の require が並ぶことになる。gulp-load-plugins を利用すると package.json から自動で読み込み利用できるようになり、require する必要がなくなる。 gulp-load-plugins var gulp = require('gulp'); // ひとつひとつ読み込む必要がある var jshint = require('gulp-jshint'); gulp.task('lint', function() { return gulp.src('./lib/*.js') .pipe(jshint()) .pipe(jshint.reporter()); }); var gulp = require("gulp"); // $ のメソッドとして自動的に読み込まれる var $ = requir
![[gulp] 効率的にプラグインを読み込む - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e7022f9fc2d5d75c0e13c06fb5ad60fd04b0c29/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCZ3VscCU1RCUyMCVFNSU4QSVCOSVFNyU4RSU4NyVFNyU5QSU4NCVFMyU4MSVBQiVFMyU4MyU5NyVFMyU4MyVBOSVFMyU4MiVCMCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiU5MiVFOCVBQSVBRCVFMyU4MSVCRiVFOCVCRSVCQyVFMyU4MiU4MCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODJlYzgzZTljNGY2Mzk4NjFhZGFiMWQxOTY0NzQ3NGY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc3VwZXJicm90aGVycyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWE5MDI2OTZhZmEzNWEyNTBlNTQ5NjYyYzJlOGI5Mzk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Db516a3af89287bec459bbf681988d128)
gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
webpackを使ってJavaScriptのビルド／minify（＋Bower） - CLOVER🍀
最近のフロントエンド事情には全然詳しくないのですが、ちょっと以下のようなことをやろうかなと思いまして。 複数のJavaScriptをまとめたい まとめたJavaScriptはminifyしたい SourceMapも作成したい Bowerを使って依存関係も解決したい Bowerで解決しようとしているのは、他に手段をよく知らないのとクライアントサイドのJavaScriptの依存関係を書くのは、Bowerが一般的なのかなと思いまして。 で、こういうことをやろうとした時、webpackとBrowserifyが目につくのですが、今回はwebpackでやってみました。 webpack module bundler 以降に、やったことを書いていきます。なお、Bowerで引き込むライブラリは、jQueryとします。 あとで、Browseriry版も書きました。 Broserifyを使ってJavaScrip
[意訳]私が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](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae8f8ab7cd67a26513b4503b0d94b3db4db505f5/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNjI2MWY3MjcyMGRmNTM1MWI5OTA5MmFhZmU4NTNlNQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2h1Y2swNTIzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmU4Nzk0Mzg4MjBiNjRhMWVlMGFkNmI1NTI5MTg5ZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dfc4d1943ce3ae8d893c0ade097547a30)
gulp でディレクトリ構造を維持したコピー - アカベコマイリ
失敗談 & そこから得られた知見の記録。いままで gulp で複数ディレクトリの構造を維持してコピーするとき以下のようにしていた。 var gulp = require( 'gulp' ); gulp.task( 'copy', function() { gulp.src( 'src/*.html' ).pipe( gulp.dest( 'dest' ) ); gulp.src( 'src/css/**' ).pipe( gulp.dest( 'dest/css' ) ); gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js' ) ); } ); この処理だと gulp.dest が冗長なうえ同期実行のためにコールバック関数を呼び出す場合も個別に end/error イベントをハンドリングする必要があり面倒だ。それにもかかわらずこうしてい
gulpのsrcでのファイル指定 - tanaka's Programming Memo
コピーやFTPのアップロード時に複数ファイルを選択する方法を調べていました。gulpのsrcはglob形式で指定できます。 Globの書式 globの公式の情報は以下。 isaacs/node-glob · GitHub 上記を斜め訳。 Globの概要 Globは ls *.js をコマンドラインで指定したり、 .gitignore ファイル内でbuild/* を指定するようにファイルをフィルタリングできます。 パスのパターンを解釈する前に、{}で囲まれたBraced Sectionをパターン内に展開します。コンマ区切りで複数のキーワードを指定します。{}内にスラッシュ(/)を含めることもでき、a{/b/c,bcd}と指定すると、a/b/cとabcdに展開します。 以下の文字は特殊な機能を持ちます。 * 1つのパスの0以上の文字列に一致 ? 1文字分の任意の文字に一致 [...] 文字の範
Gulp: Creating multiple bundles with Browserify
Published on March 25, 2015 Stefan on Mastodon Reading time: 8 minutes More on Gulp, Browserify, Tools With the ever-changing eco system of Node.js tools, a short version disclaimer. This article has been created using Gulp v3.8 Browserify Glob 5.0 Event Stream 3.3 Vinyl Source Stream 1.1 If something does not work when you’re using the same tutorial, please check if there’s been a major update ca
globが失敗するケースを書く - Qiita
はじめに Nodeでファイルのglobを行う場合、ほとんどの場合node-globまたはそれに依存するモジュールを使うことになります。特に意識はしなくとも、Gruntやgulp.jsなどでファイルを指定する際には、globパターンを頻繁に使用することになるかと思います。それらNode製ツールのglob操作は、元を辿れば全てnode-globによって行われています。 node-globの使い方には、大きく分けてglob.GlobクラスのインスタンスをEventEmitterとして使う方法と、コールバック形式の関数として使う方法があります。（加えて、非同期ではなく同期的にglobする使い方も用意されています。） 以下は、コールバック形式の関数として用いた場合のシンプルな例です。 var glob = require('glob'); var g = new glob.Glob('path/to
Browserify を使ってみる 2 - Source Maps - アカベコマイリ
この間の記事では Browserify による JavaScript の結合を試したが、この状態だとデバッグ対象が巨大な単一ファイルとなり扱いにくい。この問題の対策として今回は SourceMap の生成を試してみる。前回の gulpfile.js にはいくつかバグがあったので、ついでにそれらも修正しておく。 AltJS から JavaScript をコンパイルしたり Minify しても、デバッグ時には変換前の状態で扱いたい。そんな欲求に応えてくれる仕組みとして Source Maps がある。 Source Map Revision 3 Proposal Introduction to JavaScript Source Maps 変換前の情報を既定の書式で JavaScript ないしは別ファイルに記録しておくことで、対応しているツールが変換前後のスクリプトに関連づけてくれる。例えば
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire
先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。 Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす これを真似したくて、昨日日曜日に試したのでその記録です。 ぼくうぇぶさんのページでは、JavaScript のビルドツール（タスクランナー）として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
[Gulp][Sketch 3]これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作るでgulp-consolidateを使ったアイコン一覧を確認できるHTMLを作りました。今回は前回のデザインデータをもとにgulp-spritesmithを使って矢印のアイコンのSpriteイメージを作ります。 gulp.spritesmithについて gulp.spritesmithはSprite画像とCSSを生成できるプラグインです。Sprite画像の生成にはspritesmithを利用しています。 デザインデータ 前回も使った4つの矢印アイコンを含んだデザインデータを流用します。 プラグインとモジュールのインストール 必要なプラグインとモジュー
![[Gulp][Sketch 3]これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
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
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編） | SONICMOOV LAB
もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulpを使ったKSSの作成 - Qiita