タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
We've tried to provide a high-level changelog for gulp v5 below, but it doesn't contain all changes from the 60+ dependencies that we maintain. Please see individual changelogs to drill down into all changes that were made. ⚠ BREAKING CHANGES Drop support for Node.js <10.13 Default stream encoding to UTF-8 Standardized on anymatch library for globbing paths. All globs should work the same between
作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】｜のせっち｜note ※ 当noteは発売から一週間だけ480円で公開していました。現在は値上げしましたが、値上げ後に3万字以上のコンテンツ追加を行っています。 noteをチラ見してみて「思ってた…
gulp（ガルプ、以下gulp）とはどういうものかご存じですか？ gulpとは、タスクを自動化するツールの一つで、画像の圧縮などに使われています。 この記事では、そもそもgulpとはどういったものなのか、インストールの方法、使用例などを、わかりやすく解説します。 gulpってなに？ gulpとは gulpはNode.jsをベースとしたタスクランナーの一つです。 タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。 gulpを使うことで以下のような手間や時間がかかる作業を自動化できます。 cssにベンダープレフィックスをつける cssのプロパティをアルファベット順に並べ替える ソースマップの作成 SassやLESSのコンパイル 画像(jpeg, png, gif)、css、javascriptの圧縮 PC・スマホ・タブレット
ディレクトリ構造ディレクトリ構造はこんな感じです。 srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。 gulpが走ると、distディレクトリにコンパイルされます。 ├─ index.html ├─ gulpfile.js ├─ package.json ├─ package.look.json ├─ /node_modules ├─ /dist │ ├─ /css │ │ └─ style.css │ ├─ /js │ │ └─ script.js │ └─ /img └─ /src ├─ /scss │ └─ style.scss ├─ /js │ └─ script.js └─ /img npmパッケージについての説明は割愛しますが、progateで解説されている記事があったので紹介しておきますね。 基本的なg
はじめに 「Gulpってなに？」 「便利だと聞くけれどどうやって導入したらいいのかわからない」 そう悩まれているかた多いと思います 何故なら多くの記事が、古いGulpのバージョンの記述方法で書かれていたり、Node.jsのインストール方法が違ったりして、初心者にとっては、何が正解で、どの記事をあてにしたらいいのかわからないからです ただ、それで挫折して導入をあきらめるのは本当にもったいないです なので、初学者の方や少し勉強された方、これから導入を考えている方に向けてこの記事を書きたいと思います Gulpは最新の4系を採用しています gulpfile.jsの書き方も最新のものとなっています また、Sass公式推奨のDart Sassで記述しているので安心して読み進めていただけます Gulpとは？ 簡単にGulpについて説明します Gulpを使うと以下の作業を全部自動化してくれます（本当はもっ
【2020年のタスクランナーはこれ！】npm scriptsを使ってみた【脱gulp】 | 日々アップデートBLOG
これで npm run babel を実行することでトランスパイルされるというものでした。 以前までタスクランナーにgulpを使用しているのですが、できれば脱gulp、そしてnpm scriptsに移行していきたいと考えていました。 今回はnpm scriptsについて深く知って、以下を目標に進めていきます。 sassの自動コンパイル＆圧縮処理 babelを使用してjavascriptの自動トランスパイル＆圧縮処理 browser-syncでブラウザリロード npm scriptsとは npmはpackage.jsonの「scripts」箇所に記述することで、シェルスクリプトやaliasコマンドを登録・実行することができます。 Frontend Developer Roadmap 2020版でも推奨 Frontend Developer Roadmap 2020版でもGulpよりnpm s
Node.js v12にアップデートするとgulp v4でもfs.jsで「ReferenceError: primordials is not defined」エラーが発生 - 毎日へっぽこ
Chocolateyのnodejs-ltsでNode.jsを更新したところ、v10.16.3からv12.13.0になった。 その状態でgulp v3.9.2のタスクを実行してみると、fs.jsで ReferenceError: primordials is not defined というエラーが発生。 ちょっと調べると、Node.js v12とgulp v3の組み合わせは動かないので、Node.jsのバージョンを下げるかgulpをv4に上げろとのこと。 今更感が強いが、いい機会だと思い、Node.jsをv10.16.3に戻した状態でgulpをv4.0.2にバージョンアップ。 Node.jsをv12.13.0に更新し、タスクを実行すると...同じエラーが発生。 もろもろ調べて何とか解決したのでメモ。 環境 Node.js v12.13.0、gulp v4.0.2で確認。 パッケージ管理にはY
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順についてご紹介します。 ※本記事は、gulp3をベースに進めます。（現在の最新版であるgulp4は、設定ファイルの記載が変更されているので動作しない可能性があります。） gulpのメリット gulpを使うと、ファイルを圧縮してファイルサイズを軽くしたり、サーバーにアップロードをする作業を自動化したりすることで開発を効率的に行うことができます。 gulp似ているツールは他にもありますが、gulpは処理速度が早く、併用して使えるNode.jsのパッケージが豊富なことから、多くの人に使われています。 ※
gulpjs公式ブログでもアナウンスされたように、2018年12月にGulp4が正式にリリースされました。Gulp4未満は数ヶ月後から非推奨になるようです。 「Gulp4」で検索すると、それぞれが違う書き方をしていました。この記事ではgulp.jsの公式ドキュメントを参考に、Gulp3からGulp4に移行するための情報をまとめています。 gulp.task()が非推奨になり、関数宣言とexportsが推奨になった run-sequenceを使った直列・並列処理を、公式APIのseries()とparallel()で実行できるようになった gulp.watch()の第二引数が配列から関数名になった 公式APIにsourcemapsオプションが追加された 公式APIのgulp.lastRun()で差分ビルドができるようになった gulp.task()が非推奨になり、関数宣言とexportsが推
はじめに 以前作ったこれ(文字列→塩基配列の相互変換ツールをつくってみた(アプリ版))のWeb版でせっかくなんでよく聞くgulp, webpack, babelをつかってみました。色々みながらやりましたがバージョンの違いなどでエラー出まくってなかなか苦労しました。 あんまりwebさわったことないので間違ってたら優しく指摘していただけるとありがたいです。 とりあえず動くものはできました！！ やりたいこと SassをCSSに変換 CSS圧縮 画像圧縮 js圧縮 babelでjsをES5で出力 webpackでjsをまとめる ソース 環境 macOS Catalina 10.15.2 node.js v13.7.0 npm導入 yarn ていうのもあるらしいですがとりあえず npm をインストール！ node.js で最新版をいれました。 ターミナルで下記コマンドが実行できれば導入完了。
コピペで簡単！GulpでDart Sass入門
みなさん、こんにちは。山田です。 Sass界ではDart Sassというものが注目を浴びていると小耳に挟みました。 公式でもこちらを推奨しており、Sassの新機能はこちらから実装されるとか。 記述の方法も変わってくるとなれば、フロントエンドエンジニアとして生きていく上では避けては通れなくなってしまう。 @importが@useに変わる、などの変更点についてはすでに多くの方が記事にしているようなので、今回はコピペでサクッと実行してコンパイルできるような形にしていきたいと思います。 今回はこのような構成にして、コンパイルにはGulpを使用します。 CSS設計はFLOCSSを参考にしていますが、この辺はお好みに合わせて編集してください。 / ├ htdocs (閲覧環境) │ └ css │ └ style.css ├ gulpfile.js ├ package.json └ src/ (開発環
JSer.info #687 - gulp 5.0.0がリリースされました。 Release gulp v5.0.0 · gulpjs/gulp gulpが久々にアップデートされています。 Node.js 10.13未満のサポート終了、ストリームエンコードをUTF-8に変更、非推奨のローダーの削除が行われています。 また、gulpfile.cjsとgulpfile.mjsをサポート、swc/esbuild/sucrase/mdxローダーの追加、extends構文のサポートなども追加されています。 Deno 1.42がリリースされました。 Deno 1.42: Better dependency management with JSR JSRをサポートするdeno publishとdeno addコマンドが追加されています。 deno taskで実行するスクリプトをクロスプラットフォームで実
先日、初めてGulp（ガルプ）を導入しました。 参照した手順サイトや実行したインストール方法、どんなエラーが出てどうやって解消したかなど、Gulpに関する経験を備忘録として投稿します。 【こんな悩みを持つ方へ】 ・Gulpってたまに聞くけど、そもそも何？ ・Gulpを導入したいけど初めてなのでやり方がいまいちわからない ・インストールしたいのにエラーばかり出て困っているこんな悩みを解決できる記事を書きました。 ぜひ初めてSassの開発環境を整える上で、Gulp導入にチャレンジしてほしい！という思いを込めています。 なぜなら、プログラミング初学者の私がGulpの便利さと効率の良さを今なお体感しているからです。すごい賢いこの子･･･！ 1.Gulpって何？ そもそもGulpってなあに？という方、大丈夫です。私も作業を始めるまでどんなものなのか分かりませんでした。 唯一思いついたのは、釣りで使う
【制作過程実況動画付】npm scriptとGulp4で簡単なWeb制作向けタスクランナーを作る方法 | オレインデザイン
こちらの記事では、npm script からGulpを呼び出してSass→CSSのコンパイルをさせたり、画像を最適化して別のところに出力させたり、JavaScriptをBabelを通して書き換えたりするためのタスクランナーを自分でつくることができるようになります。 最下部に、実際作っている実況動画と最終的なコードを掲載しているので、とりあえず試したいという方は、そちらを試されてから必要なところだけ読んでもらうという使い方もしていただけるかと思います。 前提 こちらの環境はMacですので、Macでの解説がメインです。Windows利用者の方は適宜読み換える必要がある部分があります。あらかじめご了承ください。 あると良い知識 JavaScriptがなんとなくわかると良いと思います。npmは見よう見まねでも今は大丈夫でしょう。使っていく上で必要であれば自ずと覚えれます。 タスクランナーとは？ W
2020.03.13 更新 以下gulpをやめて、自作のタスクランナー的なものを作った話です。結構長いです。 まず最初にリポジトリへのリンクを載せておきます。 そもそもなぜずっとgulpを使っていたかNuxtやcreate react appのようにモダンな環境がある中でそういうものが使えないプロジェクトが多々あるので、割とどんなプロジェクトにも対応できるような汎用的な環境をつくってずっと運用していました。 具体的には以下のような構成です。(一部機能省略) ・ソースディレクトリからgulpのタスクを通して公開ディレクトリに展開 ・cleanタスクで公開ディレクトリ内のファイルを消去 ・htmlは単純に公開ディレクトリにコピー ・pugはコンパイルして展開 ・cssはautoprefixer、minify (options)して展開 ・sass/scssはコンパイル → autoprefix
どうもfujiharaです。ただいまテレワーク中です。本日はgulp-directory-syncを使って ディレクトリを同期する方法をご紹介します 追記:2021/06/28）まずこちらの記事を参考にしていただき、駄目な場合はこちらのgulp-directory-syncをお試しください。 背景 WordPressを開発する際には以下のような構成で行っております。 (以下リポジトリルートです) . ├── frontend_check (コーディング用) ├── gulpfile.js ├── package.json ├── src (各種ソース) ... (その他各種設定フィル等) srcディレクトリで各種ソースを用意しgulpで運用してfrontend_checkに吐き出すイメージです frontend_check以下はこの様になっています frontend_check ├── a
[Node.js]Gulp3で「ReferenceError: primordials is not defined」が出た時の暫定対応策 | DevelopersIO
[Node.js]Gulp3で「ReferenceError: primordials is not defined」が出た時の暫定対応策 t_o_dと申します。 あるGulp3を利用しているプロジェクトでNode10からNode14に上げてみたところ、開発サーバー起動の際にタイトルのようなエラーがでました。 そこで今回はgulp3からgulp4に上げる前の暫定対応策を記録いたします。 環境 mac OS Ventura 13.1 Node 14 Yarn 1.22 修正前の状態 修正前のpackage.jsonのgulpのバージョンは以下です。 "gulp": "^3.9.1", その状態でNode10からNode14に上げてyarnコマンドを実行すると、パッケージインストール自体は終わりますが、以下のようなwarningが出ます。 warning gulp > vinyl-fs > g
![[Node.js]Gulp3で「ReferenceError: primordials is not defined」が出た時の暫定対応策 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/03a1ea44cc6ca0d02a5082d489e39167ed533931/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F05%2Ficon-gulp-400x400.png)
npm ERR! code 1 npm ERR! path /hoge/node_modules/node-sass LibSassとNodeSassが非推奨になったからです。 知っていました…わかっていてちょっと後回しにしてましたが、ついにNodeのバージョンアップでひっかかりました。 これを機にDart Sassへ移行しましたが、途中で Nodeのバージョンが16だとgulp-sassをインストールできない@importを@forwardにしたのでgulp-sass-globがきかない と、つまづきポイントがあったので、備忘録を残しておきたいと思います。 Dart Sass、gulp-sass、Node Sass node-sassは、sassをC/C++で実装したライブラリであるLibSassへ、Node.jsのバインディングを提供するライブラリです。 gulp-sassはnode-
基本的な使い方 作成編 リポジトリをクローンする npm ciで各種モジュールをインストールする npx gulpでツールを起動する src配下にhtmlファイルを設置しテーブルコーディングをする src/sass配下にscss記法でスタイルを記述 メール送信編 .env-sampleを.envにリネームして送信先、送信元の情報を記述する npx gulp mailでメールを送信する メールテンプレートとしてhtmlを複数作成している場合、npx gulp mail --file hogeとするとhoge.htmlの内容を送信できます。（デフォルトではindex.html） また、メールのタイトルを指定したい場合、npx gulp mail --subject fugaとするとfugaがタイトルのメールとして送信されます。（デフォルトではhtml mail test） 設定ファイルの記述
DartSassがなかなか辛い 以前、「【Sass】@importを@useに置き換えてみる《FLOCSS対応》」というLibSassからDartSassへの移行について記事を書きました。 無事@import記法から@use・@forward記法に移行できたのですが、この記事の内容で数ヶ月使ってみたところ、正直前より使いにくくて辛くなってきました。 ざっくり何が使いにくいかというと、 Glob使えない 名前空間めんどい コンパイル遅い などなど。ファイル数が少ない時は耐えれますが、複数のCSSファイル生成したり細かくパーシャルで分けたりって時はけっこう辛いです・・・。 いつまでもGulpでがんばってるから使いにくいのかなーとか考えましたが、「Webpackなら問題なくDartSassれてる」みたいな情報も調べてみて特にない様子。調べ方が悪いのかもしれないし、WebpackがGulpほど苦労
はじめに 「Gulpってなに？」 「便利だと聞くけれどどうやって導入したらいいのかわからない」 そう悩まれているかた多いと思います 何故なら多くの記事が、Gulpのバージョンが古い記述で書かれていたり、Node.jsのインストール方法が違ったりして、初心者にとって、何が正解でどの記事をあてにしたらいいのかわからないからだと思います ただ、それで挫折して導入をあきらめるのは本当にもったいないと思います なので、初学者の方や少し勉強された方、これから導入を考えている方に向けてこの記事を書きたいと思います Gulpは最新の4系で、gulpfile.jsの書き方も最新のものとなっています また、Sass公式推奨のDart Sassで記述しているので安心して読み進めていただけます Gulpとは？ 簡単にGulpについて説明します Gulpを使うと以下の作業を全部自動化してくれます（本当はもっとありま
Gulp実行エラー[ReferenceError: primordials is not defined]を解決した方法 - Qiita
調べてみると理由は、「node.jsとgulpのバージョンの組み合わせがよくないから実行できないよ」ということ。 改善方法は以下の2つが考えられる。 1.gulpのバージョンを上げる(gulp3=>gulp4) 2.node.jsのバージョンを下げる 1の場合、gulpファイルの書き換えが必要になるが、今後はgulp4が主流になると思うので、1の方法で対応しました。 まずは、グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。
![Gulp実行エラー[ReferenceError: primordials is not defined]を解決した方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e69ef18883da58917f5d79fd247bc2ef467589e7/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9R3VscCVFNSVBRSU5RiVFOCVBMSU4QyVFMyU4MiVBOCVFMyU4MyVBOSVFMyU4MyVCQyU1QlJlZmVyZW5jZUVycm9yJTNBJTIwcHJpbW9yZGlhbHMlMjBpcyUyMG5vdCUyMGRlZmluZWQlNUQlRTMlODIlOTIlRTglQTclQTMlRTYlQjElQkElRTMlODElOTclRTMlODElOUYlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAyMDE2Nzk1MzU1ZjY4ZGZlNWU1NDAxMGJhZTEzYjA2%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwMTEwNGNyZjE0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yNzY1NzUxMDc5NGU3MjMwMWEwMDVhNzAzZWRjYTVkYQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc3dcb41319fd9553aa74779f1b1c8e4c)
Gulp コマンド実行時にオプションと引数を使って処理を分岐させる ｜https://wp.yat-net.com/name
チーム開発で Gulp や webpack を使うと、メンバーに設定ファイル（ Gulp なら gulpfile.js ）を共有することで同じ開発環境を瞬時に用意できるのが大きなメリットの一つですよね。 しかし個々の端末の設定によっては用意した設定ファイルのままだと利用できないケースもあり、その場合随時設定箇所を変更する必要が出てきます。 僕が一番遭遇するのは WordPress の開発で Gulp を利用している場合、Local というツールの Site Domain 設定値が人によって違っていることで、これを解決するために「設定ファイルのパス情報を修正しながら使うか、みんな同じ Site Dmain に合わせるか」などを考えないといけないのですが、そもそもこれを考えること自体がちょっと面倒なんですよね。 コマンド実行時に引数が渡せるプラグイン minimist それならコマンド実行時に
npm-scriptsで脱Gulpを目指す
脱create-react-appをするとcssコンパイル導入もしやすくなります。 しかし自動コンパイルをするには自分で設定する必要があるので、 タスクランナーの設定をしていきます。 Gulpを使ってもいいのですが、せっかくなので脱Gulpもしてしまいましょう。 npm-srciptsをタスクランナーにする 早速使いたいという方はこの項目を飛ばして2から読み始めてください。 最初にnpm-scriptsについて少し説明すると、package.jsonに記述している「scripts」の部分です。 ファイルの保存がされたらそのスクリプトを実行させることでGulpのような タスクランナーとして扱う感じですね。 Reactを使わない場合はpug / postcss / es6 の変更を監視して 変更があったらそれぞれを再コンパイルしてリロードするといった形をとっていました。 今回はcreate-r
Sassの学習に便利！UnderscoresでWordPressテーマ作成（gulp4 環境構築編） 2019-11-12 2019-11-18 ホームページ制作 gulp4, Sass, Underscores, wordpress, テーマ作成 しばらく前からSassを勉強しなきゃなと思ってはいたのですが、何から始めれば・・・と思案していたところ、Sassが導入されているWordpressのスターターテーマでオリジナルテーマを作れば、作りながら学習できる！と思い、やってみました。 これからSassを勉強したいな！という方の参考になればと思います。 本来なら、Sassの環境構築を行ってから、Wordpressの環境構築を行う流れが自然だと思いますが、Sassのコンパイルを行うgulpをプロジェクトフォルダ内にローカルインストールするため、Wordpressの環境構築（プロジェクトフォルダ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release gulp v5.0.0 · gulpjs/gulp
Gulp4 + Webpackの超オススメ設定を公開【爆速コーディング環境構築】
【たった５分で完了】「gulp」の導入方法と使用例を紹介します。
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
【DartSass対応】どこよりも詳しいGulp 4環境構築【Mac編】 | TipsWeb
Node.jsのパッケージgulp（ガルプ）で開発を効率化 | パソコン工房 NEXMAG
Gulp4の変更点と新しい書き方 - Qiita
gulp + webpack + babelをつかってみた - Qiita
gulp-sassインストール時のエラー「`which` failed Error: not found: python2」の対処方法（Windows）
2024-04-02のJS: gulp 5.0.0、Deno 1.42、Bun 1.1(Windows)
初めてのGulp導入！【まとめ】 インストール手順から数々のエラー解消まで｜みずなみ
gulpやめました (やっと)。｜Takumi HASEGAWA (unshift Inc.)
gulp-directory-sync でディレクトリを同期する | バシャログ。
Dart Sassに移行（Gulp / Node 16 / glob対応）| cumak
CSSの自動インラインとメールを送れるHTMLメールの作成ツールをgulpで作った - Qiita
DartSassがなかなか辛かったのでGulpを修正してみた｜notes by SHARESL
【DartSass対応】どこよりも詳しいGulp 4環境構築【Windows編】 | TipsWeb
Sassの学習に便利！UnderscoresでWordPressテーマ作成（gulp4 環境構築編）
www.nikkei.com
ganpeki2024.hatenablog.com
togetter.com
gigazine.net
cookpad.com
monowatamesi.hatenablog.com