Gulpインストールでお世話になったサイト
２ページ目には、動画でインストールの様子が見れるのでめちゃくちゃわかりやすい・・・！コマンドライン（コマンドプロンプト・ターミナル）初心者でもストレスなく進められるはず。また、sassファイルを更新するたびに自動でCSSファイルにコンパイルできるwatch()機能を採用。
Sassファイルの更新頻度は少なくないため、Sassファイルを更新する度にタスクを手動で実行するのは面倒です。ファイルの更新があったらそのタイミングでタスクを自動で実行できる
watch機能を使うと便利です。
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。導入は簡単で、本記事の手順では5分程度でセットアップできます...
ics.media
その他パッケージインストール
静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】 | HPcode（えいちぴーこーど）
Gulpは、いろんな作業を自動化してくれるツールです。 CSSやHTMLを保存したらブラウザ側も自動的にリロード Sassが保存されたタイミングで自動コンパイル CSSにベンダープレフィックスを自動で付与 CSS、JavaScriptのソー
haniwaman.com
Gulpを使ってsassを自動コンパイル&ブラウザリロード&JS,CSS圧縮(備忘録) - Qiita
※Node.jsとGulpがインストールされている前提ディレクトリ構成は下記の通り├── css├── js ├── jquery ├── **.js├── sass ├── header …
qiita.com
具体的に追加した機能（パッケージ）
- Sourcemap
- Autoprefixer
- ブラウザの自動更新
- JSの圧縮
- Sass(cssの圧縮も同時に)
- 画像の圧縮
エラーがでた
パッケージインストール時
No repository field
package.jsonに追記が必要
私の場合、repositoryがなかったので追記
"repository": "自分のプロジェクトの名前",
No description
package.jsonに追記が必要
“description”: “”, になっていたので追記
"description": "プロジェクトの説明",
その他
npm
ショートハンドの説明
- -D : –save-dev
https://docs.npmjs.com/misc/config
docs.npmjs.com
the2g
the2g.com
varとconst どっちを使うべき？
constが良さそう
JavaScriptにおけるvar/let/constの使い分け
JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。…
sbfl.net
Source mapとは
コンパイルされたコードを元に戻すイメージ
SourceMapとは何なのか - コンパイラかく語りき
JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。...
chuckwebtips.hatenablog.com
http://dresscording.com/blog/sass/sass_sourcemaps.html
dresscording.com
sassのoutputStyle設定
私は、compressedを採用。
- expanded：馴染みあるCSSのスタイルに整形してCSSを出力
- compressed：圧縮してCSSを出力（改行がない状態）
[Sy] はじめての Sass (output-styleによる違い)
前回 node-sass をインストールして Sass を使ってみました。コンパイル後の CSS の形式がデフォルトだとちょっと見づらいので、オプションを指定して出力される CSS の形式を変えてみます。
utano.jp
コメント