JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
2020年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2020年10月05日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有していますw そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
元々は社内向けとして書いたものですが、転載許可が出たので Qiita 向けに加筆・修正した文章です。 僕は普段ペチパーバックエンド領域を担当することが多いのですが、フロントエンド領域を含めて社内の技術アップデートを一緒に頑張っていきたい、という思いから書きました。 なんせペチパーバックエンドエンジニアの拙い知識なので一部情報が古かったり間違っているかもしれません。 フロントエンドガチ勢の皆様、間違い等ございましたら温かく指摘して頂ければと思います。 前書き JavaScript は一応書けるけど、将来心配。なんかすごく進化してるって聞くけど、調べてみても訳が分からない。 僕も勉強し始めは同じことを何度も思いました。 そこで、僕の仕事環境を想定し、導入すべきツールを役割ごとに選定してみました。 上から順に読んで、インストールして、使えるようになるとそれなりにモダンなフロントエンドの知識を手に
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました JavaScriptのプラグインシステムについて書いた小さな電子書籍であるJavaScript Plugin Architecture 2.0をリリースしました。 1.0(初版)公開時の記事は次のページから参照できます。 JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch 2.0の詳しい変更点についてはリリースノートを参照してください。 Release v2.0.0 · azu/JavaScript-Plugin-Architecture 2.0リリース時にGitBookからHonKitに移行しました。 そのため、公開するURLが次の場所に変更されています。 https://a
Nodeのバージョンを上げたらnode-sassがエラーを吐いたのでコードリーディングしてみた | DevelopersIO
Node Sass could not find a binding for your current environmentというエラーメッセージをきっかけにnode-sassのソースコードを少し追ってみました。 起きた事象 フロントエンドのビルド環境としてNode v8で動いていたプロジェクトをNode v10にアップデートしました。その結果、次のような Node Sass could not find a binding for your current environment というエラーメッセージを吐いて落ちました。 どうやら使用していたモジュールのnode-sassでエラーが起きたようです。 Error: Missing binding /path/to/project/node_modules/node-sass/vendor/darwin-x64-64/binding.no
EJS（イージェーエス）はテンプレートエンジン呼ばれるNode.jsのパッケージの１つです。JavaScriptとHTMLを混ぜた感じでHTMLサイトが作れることをイメージしてもらえたらと思います。 1番のメリットとしては、ヘッダーやフッターなど複数ページにまたがる共通パーツと呼ばれるコードを1つのファイルで管理できることですね。100ページある普通のHTMLサイトなら、ヘッダーの一部分を変更するときに100ファイル分の修正が発生しますが、EJSでヘッダーを１つのファイルで共通に管理すれば1ファイルの修正で済みます。 静的なHTMLサイトで数十ページを超えるようなサイトをコーディングする場合はぜひ使ってみてください。
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
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page. Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the
gulp（ガルプ、以下gulp）とはどういうものかご存じですか？ gulpとは、タスクを自動化するツールの一つで、画像の圧縮などに使われています。 この記事では、そもそもgulpとはどういったものなのか、インストールの方法、使用例などを、わかりやすく解説します。 gulpってなに？ gulpとは gulpはNode.jsをベースとしたタスクランナーの一つです。 タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。 gulpを使うことで以下のような手間や時間がかかる作業を自動化できます。 cssにベンダープレフィックスをつける cssのプロパティをアルファベット順に並べ替える ソースマップの作成 SassやLESSのコンパイル 画像(jpeg, png, gif)、css、javascriptの圧縮 PC・スマホ・タブレット
作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】｜のせっち｜note ※ 当noteは発売から一週間だけ480円で公開していました。現在は値上げしましたが、値上げ後に3万字以上のコンテンツ追加を行っています。 noteをチラ見してみて「思ってた…
ディレクトリ構造ディレクトリ構造はこんな感じです。 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を使うと以下の作業を全部自動化してくれます（本当はもっ
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
Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】
こちらの記事は執筆から1年以上が経過しています。 Gulpやパッケージの更新により一部のタスクが動作しない可能性があります。 最新情報はnoteにて更新中ですので、そちらをご確認ください。 こんにちは！フリーランスエンジニアのせっち@nosecchi01です。 コーダーが知っておきたいツールの一つとしてGulpがあります。 Sassを覚えたころにGulpの存在を知るという人も多いのではないでしょうか？ この記事ではGulpの詳しい設定方法を解説します。 現役コーダーさんからわかりやすいというお褒めの言葉をいただきました。 大変わかりやすい記事をありがとうございました！gulp導入の際の大きなヒントとなりました！ — 👁🗨くー（Sait） (@sait_SMPE) 2019年7月2日 自分のGulp構成を見直すためにググってたら（pc熱くなるから小規模では避けてきた）、神記事見つけまし
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。 今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順についてご紹介します。 ※本記事は、gulp3をベースに進めます。（現在の最新版であるgulp4は、設定ファイルの記載が変更されているので動作しない可能性があります。） gulpのメリット gulpを使うと、ファイルを圧縮してファイルサイズを軽くしたり、サーバーにアップロードをする作業を自動化したりすることで開発を効率的に行うことができます。 gulp似ているツールは他にもありますが、gulpは処理速度が早く、併用して使えるNode.jsのパッケージが豊富なことから、多くの人に使われています。 ※
はじめに 本当ははじめてじゃないんですが、久しぶりにいじったら忘れていたので勉強しなおしました。 gulpとは gulp.js(公式サイト) node.jsベースのビルドシステムヘルパー。 様々な作業を自動化してくれる（例えばファイルの圧縮とか、Sassのコンパイルとかとか）。 gulpfile.jsというファイルを作って操作して行きます。 この記事の目標 必要な機能をつけた環境を、gulpでスムーズに作成できるようになる。 バージョン node.js 6.10.1 npm 5.0.3 フォルダ構成
CSSのフォーマットが簡単にできるVSCodeの拡張機能、『CSS Comb』について解説してゆきます。 ▼この記事を書いたひと フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。 VSCodeでCSSをフォーマットする方法 テキストエディタ『Visual Studio Code』 CSSコードに対する『フォーマット（書式ルール）』の適用は、きれいで見やすい、品質の高いコードを書くうえでの重要な一要素になります。 ▼CSSのフォーマット例 引用符の統一（シングルorダブルクォーテーション） インデント（空白・タブ） や改行の位置 CSSプロパティの並び順 コーディングの際には、上記のルールを守る事でコードをきれいな状態を保てますが、常にルールを意識するのも大変ですし、かといって、コーディング後に全体を手
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が推
gulpをv3系からv4へ実際に移行してみた流れをまとめました。 執筆時点でのgulpバージョンはv4.0.2になります。 移行前の状態 こちらが移行する前（v3）の状態の設定ファイルです。 /*-------------------------------------------------------- modules --------------------------------------------------------*/ let gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), cached = require('gulp-cached'), notify = require('gulp-notify'), plumber = require('gulp-plumber'), sass
gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する gulpとはnode.jsベースで動くパッケージで、いままで面倒だった作業を自動化してくれる優れもの。今回gulp4で設定する内容は以下になります。 DartSassautoprefixer(grid対応も)htmlの共通部分のパーツ化（ejs）JavaScriptはBableによってトランスパイル cssとJavaScriptの圧縮処理 説明する環境は以下の通りです。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1 gulp4に必要なパッケージを確認する gulp4の設定を説明する前に、必要なパッケージがインストールできているか確認しましょう。必要なパッケージは３つ。 Homebrewnodebrewn
npm installしたのにcommand not foundになるのはnode_modulesへのパスが原因かも – webdev
なんとも初歩的な過ちですが、備忘として… $ gulp bash: gulp: command not found このように、npm installでプロジェクトへインストールしているモジュールが動作しない場合は node_modulesディレクトリへのパスが通っていない可能性があります。 応急処置として、command not foundがでたプロジェクトのディレクトリでそのまま パスを通すコマンドを入力してみると解消されました。 $ gulp bash: gulp: command not found $ export PATH=$PATH:./node_modules/.bin $ gulp [11:03:45] Using gulpfile /xxxxxxxx/gulpfile.js [11:03:45] Starting 'default'... 毎回設定しなくていいようグロー
先日、初めてGulp（ガルプ）を導入しました。 参照した手順サイトや実行したインストール方法、どんなエラーが出てどうやって解消したかなど、Gulpに関する経験を備忘録として投稿します。 【こんな悩みを持つ方へ】 ・Gulpってたまに聞くけど、そもそも何？ ・Gulpを導入したいけど初めてなのでやり方がいまいちわからない ・インストールしたいのにエラーばかり出て困っているこんな悩みを解決できる記事を書きました。 ぜひ初めてSassの開発環境を整える上で、Gulp導入にチャレンジしてほしい！という思いを込めています。 なぜなら、プログラミング初学者の私がGulpの便利さと効率の良さを今なお体感しているからです。すごい賢いこの子･･･！ 1.Gulpって何？ そもそもGulpってなあに？という方、大丈夫です。私も作業を始めるまでどんなものなのか分かりませんでした。 唯一思いついたのは、釣りで使う
EJSとは Embedded JavaScript templating. 埋め込みJSテンプレートということらしく、HTMLを構築するときに、パーツ化、変数化をJavascriptを書くことができます。 PHPとかCMSとか使えない静的なHTMLの構築のときに、Dreamweaverのテンプレートみたいなことがgulp環境化で実行できるので、とても便利です。gulp下でできるので、いつもつかっているSassとかと組み合わせると静的HTMLのコーディングがとてもラクになります。 静的なHTMLサイトを構築するときに、EJSをつかうとヘッダ・フッタの共通パーツを一つのファイルで管理できたり、それでいてタイトルやmeta要素などをページごとに変えたりとかできるので便利です。 なによりJavascriptなのでWeb（とくにフロント）の人にはいじりやすいのではないかと思います。 Webサイト構築
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
【制作過程実況動画付】npm scriptとGulp4で簡単なWeb制作向けタスクランナーを作る方法 | オレインデザイン
こちらの記事では、npm script からGulpを呼び出してSass→CSSのコンパイルをさせたり、画像を最適化して別のところに出力させたり、JavaScriptをBabelを通して書き換えたりするためのタスクランナーを自分でつくることができるようになります。 最下部に、実際作っている実況動画と最終的なコードを掲載しているので、とりあえず試したいという方は、そちらを試されてから必要なところだけ読んでもらうという使い方もしていただけるかと思います。 前提 こちらの環境はMacですので、Macでの解説がメインです。Windows利用者の方は適宜読み換える必要がある部分があります。あらかじめご了承ください。 あると良い知識 JavaScriptがなんとなくわかると良いと思います。npmは見よう見まねでも今は大丈夫でしょう。使っていく上で必要であれば自ずと覚えれます。 タスクランナーとは？ W
CLIでの環境構築記事は巷に溢れていますが、 実際に自分で環境構築した時に躓いた点を書き留めておきたいと思います。 今回はその中でも一番最初のインストール時に疑問に感じたグローバルインストールとローカルインストールについてです。 ※こちらの記事は開発環境初心者向けの記事になりますので、バリバリ開発環境構築してるぜ！という方は、記事に対するツッコミや補足をお願いいたしますm(_ _)m ※本記事は小規模〜中規模サイトの環境構築を想定しています。 ※シンプル、最低限の環境作成を目標としているため、gulp、webpack、parcelは使用しません。 npmって？？ npmとはNode Package Managerの略です。 Node.jsのライブラリや、パッッケージを管理することができます。 プロジェクトによってはFacebookが開発したJavaScriptパッケージマネージャーのYar
GulpでPugの環境を構築する方法です！ 同列に語られがちなHTMLのテンプレートエンジンであるEJSと近いかと思いきや、意外とDreamweaverのテンプレート機能と近いという感覚でした。 使えるようになれば、静的なHTMLサイトの構築が楽になるのは間違いないので、時間がある時にでも触ってみてください。
2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする 2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみました。 仕様 gulp 4系を用いる scss を css にコンパイルする autoprefixer でベンダープレフィックスを補完する minify （以下 圧縮）した .min.css も生成する 圧縮していない css に sourcemaps を付与する ディレクトリ構造 root/ ├─ dist/ # コンパイルされたファイルの出力先 │ └─ css/ # cssのディレクトリ │ ├─ main.css # 出力されるsourcemaps付きのcssファイル │ └─ main.min.css # 出力される圧縮された本番用cssファイル │ ├─ src/ # コンパイル前の
今回はフロントエンドの開発環境についてのメモ。 gulpやwebpackなどの環境設定について。 まだgulp？ gulpってもう古くない？まだ使ってんの？ ってツッコミがありそうですが、僕の開発環境ではまだまだ現役です！ gulp.jsから卒業！や、もういらない！など、検索するといろいろな記事が出てきますが、個人的にはJSとCSSさえビルドできればなんでも一緒です。 そうなるとますますgulpじゃなくてもええやん。ってなりそうですが、 昔から特にgulpで消耗したこともないですし、他に変えるコストを考えるとバージョン上げて使い続ける方が楽だったので使い続けています。 とは言え、gulpを使っていてもフロントの開発環境はすぐに新しくなって変わっていくので、古くなったサイトの環境が今と合わなくてよく開発環境の立ち上げ方や使い方を忘れたりします。 そんなときのために今の開発環境を備忘録として残
どうも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/2b6d031d882730986d5716f2d0d391cc006eee5b/height=288;version=1;width=512/https%3A%2F%2Fd1tlzifd8jdoy4.cloudfront.net%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-
Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更 - Qiita
Help us understand the problem. What are the problem?
![Gulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be specified」の原因はgulp v4にバージョンアップした事による仕様変更 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/244e5f3bddde3f98c954bff1d64206942423fd41/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9R3VscCVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSVBQiVFMyU4MSVBNiVFMyU4MCU4Q0Fzc2VydGlvbkVycm9yJTIwJTVCRVJSX0FTU0VSVElPTiU1RCUzQSUyMFRhc2slMjBmdW5jdGlvbiUyMG11c3QlMjBiZSUyMHNwZWNpZmllZCVFMyU4MCU4RCVFMyU4MSVBRSVFNSU4RSU5RiVFNSU5QiVBMCVFMyU4MSVBRmd1bHAlMjB2NCVFMyU4MSVBQiVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MyVBNyVFMyU4MyVCMyVFMiU4MCVBNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjY5MWFjYzhkZDUwNDBlNzBlMGU0YTE4ZmMyYTIwNDg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2h1bl9rb21pbmF0byZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTBkNzNkMDM2MWJiYjUwZmRmNDI4N2UxN2FmYjkzYzc%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0b23048194586d03559b8ee5e31895b6)
基本的な使い方 作成編 リポジトリをクローンする 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ほど苦労
これはユアマイスター Advent Calendar 2018の23日目の記事です。 AssertionError: Task function must be specifiedに長らくお世話になりましたので、こちらに関する内容を記載したいと思います。 引数指定の変更 4系からgulp.taskやgulp.watchの第二引数の指定方法が変わっています。 gulp.taskの場合
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この書籍について · JavaScript Plugin Architecture
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
モダン JavaScript プログラミングを始めるために知っておきたい技術セット - Qiita
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました
CAMP
EJSの使い方！静的なHTMLサイトで「共通パーツ」と「変数」を使おう | HPcode（えいちぴーこーど）
Release gulp v5.0.0 · gulpjs/gulp
Tips for rolling your own lazy loading | CSS-Tricks
【たった５分で完了】「gulp」の導入方法と使用例を紹介します。
Gulp4 + Webpackの超オススメ設定を公開【爆速コーディング環境構築】
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
【DartSass対応】どこよりも詳しいGulp 4環境構築【Mac編】 | TipsWeb
Node.jsのパッケージgulp（ガルプ）で開発を効率化 | パソコン工房 NEXMAG
はじめてのgulpでの環境づくり - Qiita
【VSCode】CSSフォーマットの拡張機能『CSSComb』の使い方
Gulp4の変更点と新しい書き方 - Qiita
gulpをv3系からv4系に移行する流れ - Qiita
gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する
初めてのGulp導入！【まとめ】 インストール手順から数々のエラー解消まで｜みずなみ｜note
gulp-sassインストール時のエラー「`which` failed Error: not found: python2」の対処方法（Windows）
EJSとSassとgulpで静的HTMLサイトを作る - Qiita
初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方
CLI 環境構築 グローバルインストールとローカルインストールの違いについて - Qiita
GulpでPugの環境を構築！静的HTMLサイトを効率的に作ろう | HPcode（えいちぴーこーど）
2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】 - Qiita
gulp4 + webpack4でつくるフロント開発環境｜notes by SHARESL
gulp-directory-sync でディレクトリを同期する | バシャログ。
Dart Sassに移行（Gulp / Node 16 / glob対応）| cumak
CSSの自動インラインとメールを送れるHTMLメールの作成ツールをgulpで作った - Qiita
DartSassがなかなか辛かったのでGulpを修正してみた｜notes by SHARESL
gulp3→4の変更点に気をつけよう - Qiita
gameseijininspirata.com
ay-style.net
news.yahoo.co.jp
news.yahoo.co.jp
mimideka.hateblo.jp
anond.hatelabo.jp