VS Codeでサイト制作環境構築

<h2>はじめに</h2>

底辺コーダーが自分のために記録している、node.jsを使った際のサイト制作環境構築メモです。
そのため、もっと効率がいい方法や記述方法があると思いますが、あくまで一例として見てください。

<h2>対象者</h2>

* Windows所有者（🍎は知らん）
* HTMLとかCSSは大体理解してる
* Scssを触ってみたけど、変換が一々めんどくさい
* node.jsって何をどうしたらいいのか意味不明

<h2>目指す形（基本楽がしたい）</h2>
<ul>
<li>Scssを更新した際に自動でCSSに変換</li>
<li>変換したCSSを自動で任意の場所に置きたい</li>
<li>CSSを最終的に圧縮してmin形式にも対応</li>
</ul>

<h2>フォルダ構成</h2>

root/
　├ assets/
　│　├ css/
　│　├ img/
　│　├ js/
　│　└ scss/
　├ gulpfile.js
　├ index.html
　└ package.json

<h2>1.node.js 導入</h2>

噂の「node.js」を下記からDLしてきて導入します。
https://nodejs.org/ja/
###「node.js」って何ですか？？？
そんなあなたに…[これ](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

<h2>2.Yarn導入</h2>

公式の指示に従いましょう
https://classic.yarnpkg.com/ja/

### 「npm」ってのじゃだめなの？？？
別にいいけど、こっちのほうが色々いいみたいです

* [参考記事 ①](https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b)
* [参考記事 ②](https://blog.minimalcorp.com/users/jigen/posts/3c08ecb4391ae4836cd84d27378440ae)

<h2>3.パッケージ導入</h2>
コマンドプロンプトを起動し、作業用フォルダまで移動してからコマンドを打ち込む。
上記が基本的なやり方なんですが、面倒なので VS code　についている PowerShell で打ち込みます。
ただ、初期設定だとなんか打てないので…参考記事を読んで自分の好き方法で解決してください。

* [参考記事 ①](https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750)
* [参考記事 ②](http://www.curict.com/item/d1/d1c4a3e.html)

### 初期化（おまじない）
```
yarn init
```
### Gulp導入
```
yarn add gulp --dev
```

### SCSSプラグイン導入
```
yarn add gulp-sass --dev
```

### gulp-autoprefixer のインストール
```
yarn add gulp-autoprefixer --dev
```

### gulp-clean-css のインストール
```
yarn add gulp-clean-css --dev
```

### gulp-rename のインストール
```
yarn add gulp-rename --dev
```

### gulp-postcss のインストール
```
yarn add gulp-postcss --dev
```

### css-mqpacker のインストール
```
yarn add css-mqpacker --dev
```

<h2>4.gulpfile.js 作成</h2>
最初これ自動でできるんだろうな～って思ってましたが…

** できません！！自分でファイルを作成して処理を書き込みます！！ **

```js
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");
const sass = require("gulp-sass")(require("sass"));
const sourcemaps = require("gulp-sourcemaps");
const postcss = require("gulp-postcss");
const mqpacker = require("css-mqpacker");
const del = require("del");

const paths = {
  src: {
    scss: "./src/assets/scss/**/*.scss",
    css: "./src/assets/css/**/*.css",
  },
  dist: {
    css: "./dist/assets/css/",
  },
};

// 各タスク関数
function style() {
  return gulp
    .src(paths.src.scss)
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: "expanded",
      }).on("error", sass.logError)
    )
    .pipe(postcss([mqpacker()]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(paths.dist.css));
}

function minify() {
  return gulp
    .src("./dist/assets/css/*.css")
    .pipe(cleanCSS())
    .pipe(
      rename({
        suffix: ".min",
      })
    )
    .pipe(gulp.dest(paths.dist.css));
}

function clean() {
  return del([
    // フォルダ内部の全てにマッチさせるために、globbingパターンを使用
    './dist/assets/css/*.css',
    './dist/assets/css/*.map',
    // このファイルは削除したくないため、パターンを打ち消し
    '!dist/assets/css/*.min.css'
  ]);
}

function allclean() {
  return del([
    // フォルダ内部の全てにマッチさせるために、globbingパターンを使用
    './dist/**/*',
  ]);
}

function watchscss() {
  gulp.watch("./src/assets/scss/*.scss", gulp.series(style));
}

function allcopy() {
  return gulp
    .src("./src/**/*.{html,php,js,png,jpg,svg,gif}")
    .pipe(gulp.dest("./dist/"));
}

// 各タスクの宣言
exports.style = style;
exports.minify = minify;
exports.clean = clean;
exports.allclean = allclean;
exports.watchscss = watchscss;
exports.allcopy = allcopy;

// タスク設定
exports.develop = gulp.series(allclean, allcopy, style);
exports.release = gulp.series(allclean, allcopy, style, minify, clean);
```

<h2>使えるコマンド</h2>

**yarn run -s watch**
Scssファイルを弄った瞬間にcssとmapに変換処理発動、CSSフォルダに変換後の物を出力

**yarn run -s dev**
CSSフォルダ内から[.min.css]と名のつくファイルをすべて削除して、cssとmapに変換処理発動、CSSフォルダに変換後の物を出力

**yarn run -s rel**
developの処理にミニファイ(圧縮処理)を追加し、CSSフォルダに各.min.cssを出力

<h2>勉強させてもらったサイト集</h2>
<ul>
<li><a href="https://qiita.com/7110/items/a9ea618f9b9c2687c949#packagejson-%E3%81%AE%E8%A8%98%E8%BF%B0" target="_blank">タスク処理順番の下地(これ手本にしても上手くいかなかった)</a></li>
<li><a href="https://bsj-k.com/postcss-mqpacker/" target="_blank">メディアクエリをまとめるパッケージの参考</a></li>
<li><a href="https://ocws.jp/blog/post2095/" target="_blank">gulp 4系のgulpfile.jsの書き方</a>
</li>
<li><a href="https://ics.media/entry/13838/" target="_blank">yarn入門</a>
</li>
<li><a href="https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8" target="_blank">yarn早見表</a> </li>
</ul>