Gulpインストールでお世話になったサイト
2ページ目には、動画でインストールの様子が見れるのでめちゃくちゃわかりやすい・・・!コマンドライン(コマンドプロンプト・ターミナル)初心者でもストレスなく進められるはず。また、sassファイルを更新するたびに自動でCSSファイルにコンパイルできるwatch()機能を採用。
Sassファイルの更新頻度は少なくないため、Sassファイルを更新する度にタスクを手動で実行するのは面倒です。ファイルの更新があったらそのタイミングでタスクを自動で実行できる
watch
機能を使うと便利です。
![](https://ics.media/entry/3290/images/eyecatch.png)
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。導入は簡単で、本記事の手順では5分程度でセットアップできます...
その他パッケージインストール
![](https://haniwaman.com/cms/wp-content/uploads/2018/07/gulp0.jpg)
静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】 | HPcode(えいちぴーこーど)
Gulpは、いろんな作業を自動化してくれるツールです。 CSSやHTMLを保存したらブラウザ側も自動的にリロード Sassが保存されたタイミングで自動コンパイル CSSにベンダープレフィックスを自動で付与 CSS、JavaScriptのソー
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R3VscCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNnNhc3MlRTMlODIlOTIlRTglODclQUElRTUlOEIlOTUlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOTElRTMlODIlQTQlRTMlODMlQUIlMjYlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODMlQUElRTMlODMlQUQlRTMlODMlQkMlRTMlODMlODklMjZKUyUyQ0NTUyVFNSU5QyVBNyVFNyVCOCVBRSUyOCVFNSU4MiU5OSVFNSVCRiU5OCVFOSU4QyVCMiUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTY3OWE5NDczYWMxNDgyY2VhODU3MDRkZmZlZTczMmE&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUYWt1eWFfS291eWFtYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzlhMTIyMDMyNmVhNWE2MTRlZTM4OWM2ZmM4MTMwZjg&blend-x=142&blend-y=486&blend-mode=normal&s=cb134ee1de9aabc007d2c30025262547)
Gulpを使ってsassを自動コンパイル&ブラウザリロード&JS,CSS圧縮(備忘録) - Qiita
※Node.jsとGulpがインストールされている前提ディレクトリ構成は下記の通り├── css├── js ├── jquery ├── **.js├── sass ├── header …
具体的に追加した機能(パッケージ)
- 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
the2g
varとconst どっちを使うべき?
constが良さそう
![](https://sbfl.net/blog/static/assets/ogp.png)
JavaScriptにおけるvar/let/constの使い分け
JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。…
Source mapとは
コンパイルされたコードを元に戻すイメージ
SourceMapとは何なのか - コンパイラかく語りき
JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。 ってことで調べました。 SourceMapとは SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。...
http://dresscording.com/blog/sass/sass_sourcemaps.html
sassのoutputStyle設定
私は、compressedを採用。
- expanded:馴染みあるCSSのスタイルに整形してCSSを出力
- compressed:圧縮してCSSを出力(改行がない状態)
![](https://utano.jp/images/NoImage.jpg)
[Sy] はじめての Sass (output-styleによる違い)
前回 node-sass をインストールして Sass を使ってみました。コンパイル後の CSS の形式がデフォルトだとちょっと見づらいので、オプションを指定して出力される CSS の形式を変えてみます。
コメント