How do I update to Gulp 4?
Gulp is a fantastic build tool for compiling your SCSS, Less and SVG sprites that we use at Liquid Light. For a while now, the gulpJS team have been working on Version 4. This version features some nice additions to the build tool but does also feature some substantial breaking changes. Upgrading is simple, but does require a few tweaks. Upgrading gulp to v4 Note: The $ shows the command is to be
Electron の開発環境を gulp + babel で整える - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリが作れるツールです。 詳しくは前回の記事「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」をご覧くだい。 これまではElectronを使ったアプリ開発方法について書いてきました。 今回はコードをガリガリ書いていく前に、開発環境を整えたいと思います。 今回はElectronの開発を ES6 + React でしたいと思いました。 そのための開発環境を gulp + babel を使って整えていきます。 この辺りは他の記事をかなり参考にしました。既に同じようなことをやっている方がたくさんいらっしゃいますが、個人的なメモも兼ねてまとめます。 参考記事 * ぼくのかんがえたさいきょうのElectron 何がしたいか まずは何がしたいか、というところから話します。 JavaScr
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の4つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
gulpプラグインの基本構造（プラグイン開発者向け） - Qiita
プラグイン開発に関する詳細な情報はgulpの公式ドキュメントを参照のこと。また、開発したプラグインを公開する場合はgulp公式によるプラグイン開発ガイドラインは必読（MUST readと書かれている）。README規約も見ておくとよい。 （2014/2/9追記：プラグイン開発ガイドラインの日本語訳を公開） なお、gulpプラグインはnode.jsパッケージの一種なので、公開する際の手順やpackage.jsonの記述方法などはnode.jsのドキュメントを参照のこと。 gulpプラグインの実態（i.e. pipeに渡すもの）はnode.jsのStream.Transformのサブクラス Stream.Transformとは、ストリームからの入力を受け取り、加工し、ストリームに出力するもの Stream.Transformのサブクラスを直接作って実装しても良いが、gulpプラグインではStr
Gulp でタスクを並列/直列処理する - Qiita
目的 Grunt と違って Gulp は登録したタスクが並列で実行されていきます。 しかし、Gulp のタスクも自在に直列/並列化したいのです！ 方法 調べたらよいものがありました。run-seqence を使うだけ。 記述例 図のように clean タスクが終わったら並列に jade、sass、coffee タスクを実行。これらのタスクが全て終わったら deploy タスクを実行と言うように、3 段階にタスクを直列、その中で複数のタスクを並列にします。 var runSequence = require('run-sequence'); gulp.task('default', function(callback) { return runSequence( 'clean', ['jade', 'sass', 'coffee'], 'deploy', callback ); });
gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
gulp-ejsでhtmlファイルを楽に管理しよう
コーディング時に便利なタスクランナー「gulp」 何かと便利なプラグインがありますがその中でも、 最近注目されている「gulp-ejs」を使ってより制作を楽にしたいと思います！ 「gulp-ejs」についてはググっても、英語サイトばかりがヒットして あまり日本語での説明がないのが現状です。 なので、まだまだ勉強中ですが少しでも役に立てればと思います。 1.はじめに gulpがインストールされていることを前提に始めます。 インストール方法が分からない場合は、 http://ics-web.jp/lab/archives/3290 http://www.unionnet.jp/develop/gulp/ 上記URLに詳しく書かれているので参考にして下さい。 2.「gulp-ejs」のインストール windows版で説明します。 こちらはコマンドプロンプトで下記を入力します。
Gulp プラグインを作る | スマホ神 – JavaScript 受託開発 –
Gulp のプラグインを自分で作ってみます。 gulp のレポジトリにドキュメントがあるのでそれを読むのがいいですが、メモとして書き残しておきます。 用意 プラグインの中で使う gulp-util と through2 をインストールしておきます。 gulp は動作確認用です。 $ npm install -g gulp $ npm install -D gulp-util through2 何もしないプラグイン 簡単な例として「何もしない」をするプラグインを書きます。 // a.js const through = require('through2'); module.exports = () => through.obj((file, encoding, callback) => { callback(null, file); }); これがプラグインの本体です。 Gulp は vi
gulpの「Writing a Plugin - Guidline」日本語版 - Qiita
gulpプラグインの開発者向けドキュメントの中で、MUST Readとなっているガイドラインを日本語に翻訳しました。オリジナルの文書はこちらGuidelinesです。 権利者の許可を得て翻訳＆公開します。オリジナルと同じライセンスCC0です。また、末尾に翻訳の更新記録を掲載してあります。誤訳などあればコメント欄で指摘してください。よろしくお願いします。 ガイドライン このガイドラインは強制ではありませんが、全てのプラグイン開発者が従うよう 強く 奨励します。質の悪いプラグインなど誰も使いたくないでしょう。またこのガイドラインは開発者がgulpと相性のいいプラグインを書く手助けになるはずです。 Writing a Plugin > ガイドライン 既存のnodeモジュールを使って容易に出来ることをプラグイン化すべきでない ラッピングできるからといって全部ラッピングしてしまうと、エコシステムに無
node.js テンプレートエンジン ECTが爆速!! らしい件（ectの使い方）
node.jsでwebAppを作成する際、Expressを用いた様々なテンプレートエンジンが存在します。 有名ところで、「EJS」や「jade」等々とあるのですが、その中でも群を抜いて爆速といわれている（うたっている）テンプレートエンジンが「ECT」となります。 公式ページ http://ectjs.com/ 確かに、Jadeを使っていた時ページ表示の「遅さ」を感じていました。 かといって「EJS」を使おうと思っても、Express2 まで使えていたlayout、partial、block等が、 Express3からは、テンプレート部分と分離しシンプルなAPIにするため、ejs-localsに移ったようで ejs-locals github ejs-locals https://github.com/RandomEtc/ejs-locals ejs-locals インストール npm in
フロント開発のテンプレートエンジンECTをGulpでビルドする際にエラー詳細を出してマシにする - Qiita
ect使ってますか? ect便利ですよね。 node.js テンプレートエンジン ECTが爆速!! らしい件 gulp-ectのエラー表示がしょぼい件 gulpでビルドするときにはgulp-ectっていうプラグインを使うと思います。ectの変更を監視して自動ビルドしてhtmlを吐き出す、みたいなことをよくやります。 ただgulp-ectでエラーが出ると [09:58:17] Error gulp-ect: must start with number, buffer, array or string って感じでエラーがおきたことは教えてくれるけど、 どこのファイルの何行目で何が起こったのかが全く分かりません。 これは問題ですね苦笑 Gulp-ect 対策① ect使う時はect()を呼び出せばいいんですけど、
edalog - テンプレートエンジンECTで静的htmlにlayout／partial導入
dreamweaverのテンプレート機能みたいなものが欲しかった かつてdreamweaverでテンプレート機能を使って、ヘッダー／フッターなどの共通部分を管理してましたが、他のエディタを使うようになってからは全ファイルに検索／置換で対応してました。 知らないだけで他に方法があるのかもしれないけど、非効率でうっかりな対応漏れページが出てしまったりといいことはなかったので、どうにかならないかなと思ってました。 （PHPでincludeとか、SSIとかあるといえばあるけど、自分の手元だけで済ませられないかなという希望がありました。） middlemanなどのstatic site generatorを少し試してみたりもしたんだけど、チームで運用するには、学習コストが高いなと感じてました。 正直自分もちゃんと使えてなかったと思う。 でもそれは全部入りのツールを使うからで、そもそもcss(sass
gulp.js その4 プラグイン一覧 - Qiita
gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn
【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ（１） ～導入 | バシャログ。
みなさま、こんにちは。時間があってもなくても、家にいるときは hulu でドラマやアニメ、映画を見て過ごしている kouraku です。最近『進撃の巨人』の配信が始まったので、この週末から見始めました。実は初めて見るので、これからどんな展開をしていくのかがすごく楽しみです。 さて、割とページ数の多いサイトを作る時は HTMLテンプレートエンジンを使うと便利ですよね。jade は使いやすいですが、使ったことがない人には敷居が高い、ECTも出た当初は使い勝手が良さそうでしたが１年以上開発が止まっている。そこで、できることは限られているけれど、初心者でも割と使いやすい（と思います）「gulp-html-extend」の使い方についてメモメモ。 ※前回までの記事を元に進めていきます。 【gulp】タスクを外に出してgulpfile内をスッキリさせる方法をメモメモ gulp-html-extend
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]これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
![[Gulp]これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知](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の基本的な使い方（gulp.jsの基礎をしっかり理解する） | mae's blog
ここのところのgulpの勢いに負けて、自分もついにGruntからgulpに移行しました。gulpはGruntと同様フロントエンド開発用のタスクランナーです。最初はGruntとそれほど変わらないだろうと思っていましたが、タスクを書いてみるとその違いがすぐにわかりました。シンプルに書けるだけでもgulpはかなり良いです。今回、自分の理解を深めるついでに基本的なタスクの書き方をまとめてみました。 gulpの特徴まずgulpの特徴を簡単に書いていきます。 ストリーム: gulpは、「the streaming build system」と言われているようにNode.jsのストリーム（ファイルのパスとファイルの中身の情報を持ったオブジェクト）を使って処理を行っていきます。そのため中間ファイルを生成することなくタスクが実行されていくため高速に処理がなされます。並列処理: さらにgulpは、処理が一つ一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
babel6での変更点 Gulp・Webpackの設定 - Qiita
独学エンジニア成長目録１６ | 独学の味方
gulp-ectで「Failed to load template」とエラーが出て怒られる時の対処 - Qiita
