タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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
ディレクトリ構造ディレクトリ構造はこんな感じです。 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を使うと以下の作業を全部自動化してくれます（本当はもっ
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順についてご紹介します。 ※本記事は、gulp3をベースに進めます。（現在の最新版であるgulp4は、設定ファイルの記載が変更されているので動作しない可能性があります。） gulpのメリット gulpを使うと、ファイルを圧縮してファイルサイズを軽くしたり、サーバーにアップロードをする作業を自動化したりすることで開発を効率的に行うことができます。 gulp似ているツールは他にもありますが、gulpは処理速度が早く、併用して使えるNode.jsのパッケージが豊富なことから、多くの人に使われています。 ※
みなさん、こんにちは。山田です。 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で実行するスクリプトをクロスプラットフォームで実
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-
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を使うと以下の作業を全部自動化してくれます（本当はもっとありま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
チーム開発で Gulp や webpack を使うと、メンバーに設定ファイル（ Gulp なら gulpfile.js ）を共有することで同じ開発環境を瞬時に用意できるのが大きなメリットの一つですよね。 しかし個々の端末の設定によっては用意した設定ファイルのままだと利用できないケースもあり、その場合随時設定箇所を変更する必要が出てきます。 僕が一番遭遇するのは WordPress の開発で Gulp を利用している場合、Local というツールの Site Domain 設定値が人によって違っていることで、これを解決するために「設定ファイルのパス情報を修正しながら使うか、みんな同じ Site Dmain に合わせるか」などを考えないといけないのですが、そもそもこれを考えること自体がちょっと面倒なんですよね。 コマンド実行時に引数が渡せるプラグイン minimist それならコマンド実行時に
脱create-react-appをするとcssコンパイル導入もしやすくなります。 しかし自動コンパイルをするには自分で設定する必要があるので、 タスクランナーの設定をしていきます。 Gulpを使ってもいいのですが、せっかくなので脱Gulpもしてしまいましょう。 npm-srciptsをタスクランナーにする 早速使いたいという方はこの項目を飛ばして2から読み始めてください。 最初にnpm-scriptsについて少し説明すると、package.jsonに記述している「scripts」の部分です。 ファイルの保存がされたらそのスクリプトを実行させることでGulpのような タスクランナーとして扱う感じですね。 Reactを使わない場合はpug / postcss / es6 の変更を監視して 変更があったらそれぞれを再コンパイルしてリロードするといった形をとっていました。 今回はcreate-r
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く