gulpのバージョンが4.0となってから、これまでのコードではgulpは正常に動かなくなってしまいました。 色々と調べてみると、どうやらタスクは非同期ではなくて並列で実行される仕様に変更になったようです。 さらに大きな変更点は、gulp.taskの引数、gulp.watchの引数が変更になったこと。 [blogcard url=”https://satoyan419.com/gulp-v4/”] その影響もあり、今までどおりの書き方ではgulpが正常に動作することができません。 これ、けっこうハマってしまい困ってる方多いみたいですね・・・ gulp4.0にアップデートしたけど、急に使えなくなってしまってどうしようみたいな書き込みをわりとみかけました。 自分も3.9のまま頑張ろうか4.0にアップデートしようか迷いましたが、いとも簡単に対処できたので、その方法をご紹介します！ gulp4.0を
もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。 はじめてのことで、何に仮装すれば迷いまくっています。 さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。 Nunjucks とは FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。 githubでのstar数は、4660（2017/10/26現在）です。 Nunjucks 特徴 node.js で動作 マクロ定義 オートエスケープ リッチブロックの継承 extends によるテンプレート継承 block によるエリアの継承 include による外部ファイル読み込み などです。 記述サンプル 以下が、Nunjucksのコードサンプルです
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
Gulp 4 has been in the works for far too long, but it’s practically inevitable that it’ll be released… some day. I’m here to help you out for when that fateful day arrives by showing you the differences between Gulp 3.x and Gulp 4 and how you can make the migration to the new version relatively painless. Just a note to prevent potential confusion, and to calm those who are sticklers for correct us
似たようなワードプレスのウェブサイトを沢山運用しているのですが、 どのテンプレートのフォルダにも全く同じ構成のnode_modulesが重複して存在しており 無駄にローカルのディスク・スペースを消費しています。 毎回同じgulpfileを使っているので、gulpパッケージはグローバルにインストールして 使おうと試してみたのですが、グローバルにインストールされたパッケージはなぜか notfoundとなり、gulpが認識してくれませんでした。 requireに絶対パスを指定してみたり、いろいろ試してみたのですがダメでした。 gulpパッケージはローカルにインストールしなければいけないのでしょうか？ あるいは、私の方法が間違っているのでしょうか？ とりあえず、各プロジェクトのフォルダにnode_modulesのシンボリックリンクを 作って対応しようかと思っていますが、何か他によい方法があれば、ご
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mo
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f9d35f1adf83f2da0314ac9101899df2b370e1ab/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3NzYxNCUyRjUzMjdmMjkzZDk4NTMzZTUyYTUxYzJmMGNiYzM1NjkzZWRiYWQzYjUlMkZ4X2xhcmdlLnBuZyUzRjE3NDM0NzcyMDc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NTQ5ZjIzNjA2ZGUyMjM0ZjhmNWViZTc0NjBjOTIwYmU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D10da7b75162b2098afc9710f9e535100%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZmM3NzY5ZDRiZTY2MTgyMzYzNWRmYTRmOGEzZmJlZGY%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hYWFlNWZiOGFhNjcxY2ZjZDlhYzU4NTZkOGI1ZTg0Zg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dda773c4a77e5e68eb63f34dbb64aca0a)
ぼく（たち）のかんがえた最新のJS開発環境 光野達朗, ヤフー株式会社 2015.12.15 SCRIPTY#04 http://scripty.connpass.com/event/22663/
An extension to run gulp task from chrome devtools Quick setup : ------------------- - Download the gulp devtools extension from the Chrome Web Store. - If not already installed, run `npm install -g gulp-devtools` - Export gulp from your gulpfile.js by adding `module.exports = gulp;` - Run `gulp-devtools` in a directory with a gulpfile! - Open Chrome Dev tools, find the Gulp tab. Your gulp tasks s
10/31、11/1 に開催された WordCamp Tokyo 2015 で、「WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 -インストールからデザイン、ページ作成までを10分で！-」というタイトルで登壇させていただきました。前々日入りしていろいろ参加してきたので、それらもあわせてご紹介します。 多言語・翻訳ナイト Vol.1 @Tokyo ~ 翻訳サービス・多言語サイト運営者・開発者が集まって多言語メディアの今後について語らう夜 10/29 に渋谷で開催された「多言語・翻訳ナイト Vol.1 @Tokyo ~ 翻訳サービス・多言語サイト運営者・開発者が集まって多言語メディアの今後について語らう夜」に参加しました。こちらは翻訳サービス運営者、多言語サイト運営者、翻訳・多言語化ツール開発者で集まっていろいろ話しましょうというイベントで、僕はどれにも当てはまらな
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
gulpの3.9.0からES6でタスクを記述できるようになったので使っていたけど、 Babelの6系にアップデートしたら動かなくなった。 ※ぼーっとしてたら最近いろいろアップデートされてていろいろ動かなくなっているので下の方に追記(2016/01/26) 現象 gulp: 3.9.0 babel-core: 6.0.14 以下のようにgulpコマンドでdefaultタスクを実行しようとしたところ importなんてしらない！と怒られる。。 [sawapi: ~/dev/git/sawapi/mw]$ gulp [17:11:48] Requiring external module babel-core/register /home/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3 import requireDir from 'require-di
ねんがんの VAIO Z をてにいれた kagata です。おおむね満足しているのですが、本体色をシルバーにしたらキーボードが MacBook のぱちもんみたいで、人に見せるたびつっこまれています。これから購入を検討される方には順当にブラックをおすすめしたいです。 そんな VAIO Z をひっさげて、先週末10月31日（土）に開催された WordCamp Tokyo 2015に行ってきました。今回は参加したセッションについてご報告します。 参加したセッション 今回はエンジニアリング寄りのものを中心に以下のセッションを選びました。 【基調講演】「なんとなく」の壁を越えよう！自信を持って WordPress を選択するためのヒント オープンデータとオープンソース、そしてWordPress WordPressで行う継続的インテグレーション 入門編 -プラグイン開発・保守地獄から学んだこと- レス
似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。 そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。 aircolor.hatenablog.com ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。 用意するもの gulpは入れてある前提。インストールは割愛。 fs gulp-ejs gulp-rename 下記は新しく作ります。 pages.json（各ページの設定用ファイル） template.ejs（テンプレートEJSファイル） 各ファイルの設定 pages.json それぞれのページの設定を記述。 { "pages": [ { "id": "page1", "title":
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
