Gulp

Gulpインストールでお世話になったサイト

2ページ目には、動画でインストールの様子が見れるのでめちゃくちゃわかりやすい・・・!コマンドライン(コマンドプロンプト・ターミナル)初心者でもストレスなく進められるはず。また、sassファイルを更新するたびに自動でCSSファイルにコンパイルできるwatch()機能を採用。

Sassファイルの更新頻度は少なくないため、Sassファイルを更新する度にタスクを手動で実行するのは面倒です。ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能を使うと便利です。

絶対つまずかないGulp 4入門(2021年版) - インストールとSassを使うまでの手順
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう...

 

 

 

その他パッケージインストール

静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】
Gulpは、いろんな作業を自動化してくれるツールです。 CSSやHTMLを保存したらブラウザ側も自動的にリロー…
Gulpを使ってsassを自動コンパイル&ブラウザリロード&JS,CSS圧縮(備忘録) - Qiita
※Node.jsとGulpがインストールされている前提 ディレクトリ構成は下記の通り ├── css ├── js ├── jquery ├── **.js ├── sass ├── header ...

 

具体的に追加した機能(パッケージ)

  1. Sourcemap
  2. Autoprefixer
  3. ブラウザの自動更新
  4. JSの圧縮
  5. Sass(cssの圧縮も同時に)
  6. 画像の圧縮

 

 

エラーがでた

パッケージインストール時

No repository field

package.jsonに追記が必要

私の場合、repositoryがなかったので追記

"repository": "自分のプロジェクトの名前",

No description

package.jsonに追記が必要

“description”: “”, になっていたので追記

"description": "プロジェクトの説明",

 

その他

npm

ショートハンドの説明

  • -D : –save-dev
npm installの--saveと--save-devの違いと-g
npmのパッケージインストールの初歩。

varとconst どっちを使うべき?

constが良さそう

JavaScriptにおけるvar/let/constの使い分け
JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。…

Source mapとは

コンパイルされたコードを元に戻すイメージ

SourceMapとは何なのか - コンパイラかく語りき
JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。 Json形式で記述されています。 なぜSourceMapが必要なのか では、な...
http://dresscording.com/blog/sass/sass_sourcemaps.html

sassのoutputStyle設定

私は、compressedを採用。

  • expanded:馴染みあるCSSのスタイルに整形してCSSを出力
  • compressed:圧縮してCSSを出力(改行がない状態)
[Sy] はじめての Sass (output-styleによる違い)
前回 node-sass をインストールして Sass を使ってみました。コンパイル後の CSS の形式がデフォルトだとちょっと見づらいので、オプションを指定して出力される CSS の形式を変えてみます。

コメント