gulp で uglify-es を利用する - アカベコマイリ
タスク ランナーは npm-scripts 派なのだけど akabekobeko/examples-web-app に公開している front-end-starter には gulp 版も用意してある。かつて gulp を利用していたこと、世間では現在もそれなりに Web フロントエンド開発で gulp が採用されていることから動向チェック用にメンテナンスしている。 front-end-starter は Electron も含む Web フロントエンド開発環境の変更を気が向いたときに反映しているのだが、そういえば uglify-es を gulp で利用したくなったらどうするのだろう？というのが気になったので試してみた。 gulp-uglify gulp で uglify-js を利用する場合は gulp wrapper となる gulp-uglify を採用するのが一般的だろう。では
【gulp】我、破壊神となりてdelをもってファイルを削除すべし - クモのようにコツコツと
メタ言語の続きです。前回はgulp.tusk()をgulp4が推奨する関数の形に書き換えました。今回はファイルの削除！コンパイル後にファイルの削除やリネイムが反映されなかったため。delを使います。それではいきましょう！ 【目次】 前回のおさらい ファイルのリネイムや削除がコンパイルに反映されない！ delにて破壊神になる！ delをインストール、インポート 削除する関数を作成 全ファイル削除 HTMLファイルを削除 画像ファイルを削除 タスク化 watchタスクにhtmlCleanとimgCleanを追加 デフォルトのタスクにcleanを追加 動作確認 gulp起動 HTMLファイルの変更 画像ファイルの変更 最後に ※参考：前回記事 【gulpfile.js】gulp.task()を関数化（←gulp4推奨）他、リファクタリング - クモのようにコツコツと ※参考：【メタ言語】HTML
Gulp4がリリースされたのでgulpfile.jsをアップデートした | iret.media
昨年12月11日にめでたくGulp v4.0が正式リリースされたので、webサイト制作用gulpfile.jsの設定を見直してみました。 公式ドキュメント 迷ったらこちらを見直します。英語です。 入門ガイド APIドキュメント Gulp4新機能おさらい では新機能を確認します。 1. タスクを直列処理するseries()と並列処理するparallel()メソッドが追加。run-sequenceプラグインはもう必要ない 2. watch()タスクはchokidarを使用したものに変更。gulp-watchプラグインはもう必要ない 3. lastRun()を使用して差分ビルドが簡単に。gulp-changedプラグインはもう必要ない 4. symlink()でシンボリックリンクを作成しpackage.jsonとnode_modulesを使いまわすことが可能に 5. ソースマップ組み込みサポート
【gulp4入門】インストールから使い方まで徹底解説！
プロジェクトの初期化（npm init） まず、プロジェクトの初期化をしていきます。 WindowsであればPowerShell、Macであればターミナルを開き、作業したいディレクトリへ移動します。 ディレクトリへの移動は、cdコマンドを使います。 たとえば、デスクトップにあるgulp-projectというディレクトリに移動したい場合は、以下のようにします。 （Windowsのコマンドプロンプトでは、ホームディレクトリを表す「~」を使うことができないのでご注意ください） $ cd ~/Desktop/gulp-project/ cdコマンドの詳しい使い方については、以下の記事を参考にしてください。 Windowsの場合 作業用ディレクトリに移動したら、「package.json」というファイルを作成します。 「package.json」というのは、プロジェクト名やライセンスなどの情報をまと
最近使って便利だったgulpのプラグイン - 第1回 | toMemo - メモ的に色々書いていく個人ブログ
SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。 そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。 merge-stream このプラグインは1つのタスクで複数のソースを処理するときに使用します。 Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。 しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。 追記 - ディレクトリ例がなかったので追記しました 下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い src ┗sass ┠_reset.css ┠_layout.
Gulp gulp-uglify でmin化しようとしたらエラーになった件 - かもメモ
Gulpでjsをminfy化しようとしたら、次のようなエラーが表示されるようになってしまいました。 [21:34:54] Starting 'uglify'... events.js:160 throw er; // Unhandled 'error' event ^ GulpUglifyError: unable to minify JavaScript ... uglify のタスクは昔作ってたものの使い回しでこんな感じ var uglify = require("gulp-uglify"); var rename = require('gulp-rename'); gulp.task('uglify', function(cb) { return gulp.src( src ) .pipr( uglify({ // ! から始まるコメントを残すオプションを追加 preserveCom
Gulpでアイコンフォントを自動生成する方法 | hirakublog ヒラクブログ
アイコンフォントを作成するにはIcoMoonが有名ですが、外部サービスなのでgitでの管理が面倒だったりします。 gulpではほぼ同じ処理が実現できます。つまりローカルで完結するのでファイル管理が楽になります。 gulpでアイコンフォントを自動生成する方法 ディレクトリ構成 . ├── assets │ ├── css │ └── fonts ├── gulpfile.js └── src ├── iconfont │ ├── svg │ └── templates │ ├── myfont.css │ ├── myfont.html │ └── myfont.scss └── sass ├── foundation │ └── base └── style.scss 必要ライブラリをインストール npm i gulp-iconfont gulp-conso
【タスクランナー】もうキャッシュのせいなんて言わせない。CSS・JavaScript・画像・PDFなど全ての読み込みファイルにパラメータをつけてファイル出力する方法 - チェ・ゲバムラの日記
前回の記事でタスクランナーのススメを書いたが、少しアップデートしたので紹介する。 前回のタスクランナーの記事 hiromode.hatenablog.com 内容としては ・PUG削除 ・HTMLのパラメータ付与の上出力 を追加した。 理由はPUGの書き方を習得するのが面倒だし、 HTMLキャッシュを防ぐためにパラメータを付与するためということに尽きる。 コピペでできるように順番にコードを記載する。 今回の環境 MacOS内にvirtualbox,CentOS7をインストール済み。 またnode.jsはインストールされているものとする。 前提条件 キャッシュさせたくないところ（パラメータにするところ）に__NOCACHE__と記載する。 別に他の文字列でもいいが、変える場合はindex.html内と併せて必ず後述するgulpfile.js内の文字列も変更すること。 一例としてindex.h
EJSとJSONファイルを使ってパンくずリストをパーツ化する - Qiita
尚、gulpの導入、ejsの構文、パンくずリスト等について説明を入れると話が広がりすぎるので、ここでは必要なファイルの書き方までに留めます。あとは案件に合わせてgulpfile.js、jsonファイル、index.ejsのinclude()関数を調整すれば、_breadcrumb.ejs、_structured-data.ejsはおそらくそのまま使用できると思います。スタイルの調整は適宜行ってください。 パンくずリストについて 細かな説明は省きますが、以下のようなものを作ります。 HTMLパンくずリスト ウェブサイト内に階層順にリストアップされた、一般的なパンくずリストです。 Googleのパンくずリストの制作例に習い、<ol>を用いて作成します。 JSON-LD を使用したパンくずリスト マークアップできる構造化データの形式は、基本的にJSON-LD、microdata、RDFaの3つが
XMLサイトマップの作り方 | URLやサイトマップ、リダイレクト | テクニカルSEO BLOG
こんにちは、SEO分析ツール「アナトミー」開発チームの江頭です。 XMLサイトマップ（sitemap.xml）は、検索エンジンのクローラーが参照するファイルです。sitemap.xmlを作るには、サイトマップ作成ツールを使用する方法が一般的です。 また、サイトマップのSEO上の効果を得るには、サイトマップを更新したことを検索エンジンへ通知する必要があります。 今回は、XMLサイトマップの書き方やサイトマップ作成ツール、サイトマップをGoogleへ通知する方法について説明します。 XMLサイトマップとは XMLサイトマップ（sitemap.xml）とは、サイトの住所録のような役割を持つファイルで、検索エンジンのクローラーが読み取って利用します。サイトマップを作成すると、クローラーの巡回速度をUPし、検索結果への反映を早める効果があります。 サイトマップには、サイト内に存在するページの URL
ejsでjsonを読み込みmeta情報を一括管理 - Qiita
編集ファイル gulpfile.js _head.ejs（パーシャル化） meta.json 各個別ページのejsファイル 先ず、gulpfile.jsに設定を記述する。 jsonファイルを読み込むのに必要な「fs（File System）」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。 タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。 // gulp core var gulp = require('gulp'); //fsファイルの読み込み var fs = require( 'fs' ); var ejs = require("gulp-ejs"); var rename = require("gulp-rename"); gulp.task('ejs', function()
gulp-sassでエラー (caniuse-liteが期限切れ) | サイトスパイラル(Sitespiral) - 沖縄で ホームページ制作 / WordPressのことなら
gulp-sassでエラー (caniuse-liteが期限切れ) Browserslist: caniuse-lite is outdated. Please run next command `npm update` 先日よりcssの生成でお世話になっておりますgulp-sassのタスクより下記のようなwarningエラーが出るようになってしまいました。 $ gulp hogehoge-task [13:53:44] Using gulpfile ~\***\gulpfile.js [13:53:44] Starting 'hogehoge-task'... Browserslist: caniuse-lite is outdated. Please run next command `npm update` [13:53:44] Finished 'hogehoge-task' af
gulp-connect-phpをwindowsで使う | half and half
gulp-connect-phpをwindowsで使う html | css 2017/06/20 gulp-connect-php Macだと最初からphpが入ってるからすんなり動きますが windowsだと手動でインストールする必要があります。 公式サイトからダウンロード windowsと書いてある部分から、windows用のパッケージをダウンロードします。 インストール Cドライブ直下にphpというディレクトリを作成します。 そこにダウンロードしたパッケージの中身をすべて移動します。 次にPHPの設定ファイル（php.ini）を配置します。 phpフォルダの直下にある「php.ini-production」ファイルをコピーし、「php.ini」というファイル名で同じフォルダ（phpフォルダ）に配置します。php.iniの設定は必要に応じて設定していきます。 パスを通す 環境変数を設定
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
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ファイ
Bootstrap4 + gulp 環境でモックアップを作成する。 - Qiita
はじめに Bootstrap4 + gulp 環境の構築手順を紹介します。 その後、gulpでコンパイルしたBootstrap4のcssを どのようにモックアップに組み込むのか説明します。 ※ マシンのOSのバージョンは、macOS High Sierra 10.13.4です。 1. Node.jsのインストール npmを使って、Bootstrap4、gulp本体及びgulp関連のプラグインを インストールする為、最初にNode.jsをインストールします。 ※ Node.jsのインストール方法を詳しく知りたい方は、 参考情報（Node.jsのインストール）をご参考ください。 2. 作業ディレクトリの準備 モックアップを作成する作業ディレクトリを準備します。 このディレクトリにBootstrap4、gulpをインストールします。 2-1. 任意のディレクトリを作成する。
Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】
こちらの記事は執筆から1年以上が経過しています。 Gulpやパッケージの更新により一部のタスクが動作しない可能性があります。 最新情報はnoteにて更新中ですので、そちらをご確認ください。 こんにちは！フリーランスエンジニアのせっち@nosecchi01です。 コーダーが知っておきたいツールの一つとしてGulpがあります。 Sassを覚えたころにGulpの存在を知るという人も多いのではないでしょうか？ この記事ではGulpの詳しい設定方法を解説します。 現役コーダーさんからわかりやすいというお褒めの言葉をいただきました。 大変わかりやすい記事をありがとうございました！gulp導入の際の大きなヒントとなりました！ — 👁🗨くー（Sait） (@sait_SMPE) 2019年7月2日 自分のGulp構成を見直すためにググってたら（pc熱くなるから小規模では避けてきた）、神記事見つけまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gulpでキャッシュパラメータを付与(Windows)｜高橋悠太 / Yuta Takahashi｜note
ネットショップ語り
GulpでPugの環境を構築！静的HTMLサイトを効率的に作ろう | HPcode（えいちぴーこーど）
Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】 | HPcode
