カテゴリー
gulp js 開発関連

全然投稿してないね。そういやgulp-imageminやめたよ

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる – Ewig Leere(Lab2)
https://labor.ewigleere.net/2021/08/17/gulp-imagemin-become-pure-esm-package/

gulpfile.esm.js で gulp-imagemin v8.0.0 を利用するとエラーになる – dskd
https://dskd.jp/archives/116.html

他の方が保守するのでパッケージ類を最新にしたら↑のサイトさんに書いてあるようなことが起こったので、いろいろ調べたけど最終的に今後を鑑みてimageminの処理をgulp経由の処理から外したよ。っていう話。 理由はバージョン落としてまで使う気になれなかったのと、gulpの記述を全部ESModuleに変更して検証してまで使い続けるのは手間だったので。 gulp使わないプロジェクトではnpm scriptsでimagemin実行してたのでそれをgulp利用のプロジェクトでも使うようにしました。さよならgulp imagemin…

imagemin – npm
https://www.npmjs.com/package/imagemin
imageminをrequireして怒られる – Qiita
https://qiita.com/yukiji/items/fc4a2f17de5548d27fc6
カテゴリー
git gulp 開発関連

2017年?のサイトを更新したいと言われて・・・2020冬

プロジェクトファイル動くんかな?って

nodebrewありがとう。readmeにnodeのバージョン情報書いた私ありがとう。gulp3も動いた。

最悪作り直しかと(工数的に)ヒヤヒヤした。

なんかconsoleで見たこと無いエラー吐いてるから確認してみた

新しい共通ヘッダ読み込ませてくださいっていうことで、その際にコンソールで見てたら スクロールとともにエラーが発生する。どうやらマウスホイールイベントが怒られてるみたいだ。 Chromeが怒ってる。  
仕様変更が2018とかにあったらしい。。。  

プロジェクトファイル動くんかな?って

nodebrewありがとう。readmeにnodeのバージョン情報書いた私ありがとう。gulp3も動いた。

最悪作り直しかと(工数的に)ヒヤヒヤした。

なんかconsoleで見たこと無いエラー吐いてるから確認してみた

新しい共通ヘッダ読み込ませてくださいっていうことで、その際にコンソールで見てたら スクロールとともにエラーが発生する。どうやらマウスホイールイベントが怒られてるみたいだ。 Chromeが怒ってる。  
仕様変更が2018とかにあったらしい。。。  
カテゴリー
gulp

ブラウザーシンクってPHPでも使えるのね・・・

フロントエンドの人でも楽して、PHPが使える環境をサクッと用意したいのだ! | バシャログ。
http://bashalog.c-brains.jp/16/10/12-191300.php

PHPだけでローカルホスト立てるのも初めて知りました。Mampいらんやん

$ cd htdocs
$ php -S localhost:8000

めっちゃ便利やん

より便利になった gulp 4.0 への移行方法と変更点をまとめました – 株式会社クイックのWebサービス開発blog

カテゴリー
gulp

browserSyncでIPアドレスでアクセスするやつ

ひとのプロジェクトで記述がなくてアレれとなったのでメモ

browserSync.init({
    server: "./public/",
    open:"external",
    online: true
});

online: trueもいる。

カテゴリー
gulp webpack

production buildに変更→ScrollToPluginがエラー吐く→呼び方変える

神かな?

production build時にScrollToPluginがうまく読み込まれなかった話 | MixDesign
https://nanaki.design/javascript/production-build-scrolltoplugin-error/

カテゴリー
git gulp webpack

webpackにしてgulpがエラーで都度止まってつらすぎて泣いて

esモジュールを追加するたびにバンバン処理止まって気が狂いそうになったのでええかげん直した。
pipeのいちがおかしかっただけやった。

gulpとbabelとwebpackというフロント開発3銃士 – Qiita
https://qiita.com/bakira/items/3c4e2d10aae085767817

この記事。。。また出会ったね。ありがとう。ありがとう。
あ、いいねしとかなきゃ。

カテゴリー
gulp webpack 開発関連

vue関連メモ

そもそも(隣のあの子と何が違うの)

オープンソースのjQueryとVue.jsを比較
https://www.ossnews.jp/compare/jQuery/Vue_js
↑使い方でどっち使うか決めよーねーってはなし

脱jQueryのためにしたこと – ICS MEDIA
https://ics.media/entry/17451

カテゴリー
git gulp Mac 開発関連

母艦移管中・Gulpの実行する方式大分変わってたのでメモ

絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順 – ICS MEDIA
https://ics.media/entry/3290/2

カテゴリー
git gulp ソフト全般(開発用) 開発関連

【Sass】もうなれたよね【macOS更新時】【再インストール】

[追記]
これまとめた後でインストール時にメッセージでてたの気づいたので更にSass自体のバージョンチェックと更新作業した。

【Ruby Sass】Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.【更新されなくなるってよ】


[/追記]

自分で過去記事↓読んでて時系列で要点が分かりづらかったのでメモ

【Sass】何度でも何度でも何度でも立ち上がり呼ぶよ【インストール】 | hirokona

【Sass】何度でも何度でも何度でも立ち上がり呼ぶよ【インストール】

要点だけここに抜粋

ruby→sassの順にインスコ(homebrew使用)

$ brew install rbenv ruby-build
$ sudo gem install -n /usr/local/bin sass
カテゴリー
gulp js

gulpでちょっとバベって見ようと思ったらコケた

世界は回り続けるのです

そろそろesで書くかとbabel入れたら、変換がうまく行かなかった。

gulp + Babelの環境をつくる

ES6 で書く環境を作る(gulp + Babel 編) – Qiita
https://qiita.com/hkusu/items/9b312274b3ff2913e15b
↑記を参考に

$ npm install --save-dev gulp-babel

してgulpfile.jsで処理を通しても変換されず・・・なぜ、とおもっていたら

javascript – babelでトランスパイルをしても元ファイルとほぼ同じファイルが出力されてしまう – スタック・オーバーフロー
https://ja.stackoverflow.com/questions/31664/babel%E3%81%A7%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%AB%E3%82%92%E3%81%97%E3%81%A6%E3%82%82%E5%85%83%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%81%BB%E3%81%BC%E5%90%8C%E3%81%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86

readmeをよんでねって。
https://www.npmjs.com/package/gulp-babel

インストールもいっこ必要やった。

$ npm install --save-dev gulp-babel babel-preset-env

そしてgulpfile.jsで指定するpresetsの値が変わっていた

presets: ['env']

結局こうなった

/**
 * babel:test
 */
$.gulp.task('babel', function() {
        console.log('babelchange watched');
  $.gulp.src(PATH.develop + 'assets/es6/**/*.js')
    .pipe($.babel({
      presets: ['env']
    }))
    .pipe($.gulp.dest(PATH.develop + 'assets/js/'));
        console.log('babel');
});

とりあえずとおった。