gulp4の旧設定について
//gulpとgulpのパッケージを読み込み const { src, dest, watch, lastRun, parallel, series } = require("gulp"); const sass = require("gulp-sass"); //Sassを使う const glob = require("gulp-sass-glob"); //sassのimportを楽にする const postcss = require("gulp-postcss"); //Autoprefixと一緒に使うもの const autoprefixer = require("autoprefixer"); //Autoprefix const plumber = require("gulp-plumber"); //エラーでも強制終了させない const notify = require
Dart Sassに移行（Gulp / Node 16 / glob対応）| cumak
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-
Gulpを使ってWebP画像を生成する方法【Gulp4】｜notes by SHARESL
WebP（ウェッピー）とは？ Googleが開発している画像フォーマットのことです。ファイルの拡張子は「.webp」になります。 一般的にWebで広く扱われているJPEGやPNGよりも容量を小さくできます。具体的にはJPEG・PNGと比較して25 〜 35%小さくできます。小さくなるからといって画質が悪くなることはありません。また、PNGと同じく透明部分も画像として反映されます。 PageSpeed InsightsやChrome DevToolsなんかで「Lighthouse」による診断をしてみると、「Serve images in next-gen formats（次世代フォーマットで画像を提供してください）」といった診断が出ることがありますが、WebPがその次世代フォーマットに当たります。 少し前までは「サイトの表示高速化」については今ほど注目されていませんでしたが、最近は「サイトの
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
gulp generator
We have been analyzing user actions by Mixpanel. If you mind tracking, please click here to opt out.
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで ～前編～ - 無駄と文化
この記事は前後編です。後編はこちらに、 普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで ～後編～ - 無駄と文化 弊社ではサイト制作も行っていますが、サイトの制作時にいわゆるデザインとコーディングでの分業(役割分担)をしていません。 肩書きとしては「Webデザイナー」のみしかないので、Webデザイナーであればデザインとコーディングの両方ができて初めて一人前です。 とはいえ、人によってデザインが得意/コーディングが得意といった得意分野の差は出てきます。 コーディング畑の人が唐突に「Sass使ってWeb書こう！」と提案したとしても、デザイン畑の人から見ればどうしてもとっつきにくいのが現実のようです。 さて、そんな普通のWebデザイナーにSassを使ってもらいたくて、Sassの導入するのに一番いい感じの環境は何なのか一人で考え続けてきました。 結論と
【Gulp】gulp-renameで出力ファイルを簡単操作 | バシャログ。
どうもfujiharaです。本日はgulpの便利プラグイン gulp-rename をご紹介します。 背景 gulpを使う場合src, dist でソース、出力先を指定するとかと思います。 gulpfile.js import gulp from 'gulp'; const { src, dest } = gulp; export default () => { return src('src/js/*.js') .pipe(processA()) // 処理A .pipe(processB()) // 処理B .pipe(dest('dist/js')); } tree (ディレクトリ抜粋) ├── dist │ └── js │ └── index.js ├── gulpfile.js └── src └── js └── index.js gulp-rename gulp-r
【Node.js7.5対応】gulp.js/Gruntを卒業すべき3つの理由とgulp非依存の本格タスクランナーの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
突然ですが、皆さんのgulp.js(gulp)タスク、依存関係が複雑になりすぎて、こんな風になってませんか？ “a gulpfile” #jsart pic.twitter.com/Uj3dXoDXQm — Victor Savkin (@victorsavkin) 2016年8月12日 gulpやGruntを使って開発していると、 やれ「Node.js(Node)のバージョンが違っていて動かない」、やれ「エラーログがぐちゃぐちゃで追えない」など、様々なトラブルに遭遇しますよね。 もちろん、Node や依存モジュールのバージョンを固定したり、ドキュメントをしっかり作るなどすればこれらのエラーに遭遇する可能性は下がりますが、できれば異常系の処理をするより、新機能の開発をしていたいのが人情ってものです。 今回はそんな方が gulp.js やGrunt に頼らずに、Sassのビルドを監視して自動
gulpfileを粛々とデバッグする方法 - Qiita
gulp.jsを使っていて、デバッグが必要になるケースは次の2つですが、やることはあまり変わりありません。粛々と、方法1〜3を試して行きましょう。 gulpfileが動かない 自作/他作のプラグインの挙動がおかしい 基本的にはNode.jsのデバッグそのものですが、(gulp.jsのユーザには) Node.js自体に不慣れな場合もあるかと思いますので、参考まで。 方法0: npm install デバッグの前に、何はともあれ。 方法1: gulp-debug まずは気楽にデバッグする方法から。gulp-debugを使えば、プラグインをパイプして行く途中で、ファイル(正しくはvinyl)がどういう状態か見ることができます。 方法2: console.log 邪道感が溢れてますが、どこがおかしいか当たりが付いている場合は、ログを吐かせるのが早いです。gulpfile内に問題がある場合は、ほぼこ
webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
昨今のweb開発で必要なwebpackやGulpといった技術は、Node.jsのパッケージ管理ツール「npm」を通して使われます。npmの機能は豊富で、覚えておくと便利な使い方がいくつもあります。とくにオススメのものをピックアップしました。 npm initには-yをつけると質問が表示されない npmのモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドはnpm initです。実行すると、プロジェクト名や著作権の設定の質問が表示され、必要な項目を入力したり、Yes([Enter]キー）を入力する必要があります。 とくに設定が不要な場合、-yオプションを指定することで、質問を表示することなく初期化できます。 次に示すのは、npm initとnpm init -y実行後のコマンドラインの差です。npm initはnameやversionといった設定を対話形式で尋ねられますが、np
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法｜今村だけがよくわかるブログ
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法 「1つの開発環境で複数のプロジェクトを管理」することって私はよくあります。 これまでは「プロジェクトが増えるたびにGulpをインストールする」運用をしていました。 ですが、この運用を続けていくと、プロジェクトが増えるごとにGulpのインストールが必要だし、npmパッケージやgulpプラグインも更新しないといけないし、タスクもプロジェクトごとに作る必要があるし、何よりディスク容量が増えてしまいますね。 図で表すと、以下のような状態です。 プロジェクトが増えるたびにGulpをインストールの図 これはあまり効率的とは言えない・・・ というわけで、この状態を解消するため「Gulpのインストールは1つにして、複数のプロジェクトを分割して管理する」方法を書き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
