はじめに

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

対象者

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

目指す形（基本楽がしたい）

Scssを更新した際に自動でCSSに変換
変換したCSSを自動で任意の場所に置きたい
CSSを最終的に圧縮してmin形式にも対応

フォルダ構成

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

1.node.js 導入

噂の「node.js」を下記からDLしてきて導入します。
https://nodejs.org/ja/

「node.js」って何ですか？？？

そんなあなたに…これ

2.Yarn導入

なんかnpmとかいう奴よりいいらしい、知らんけど
https://classic.yarnpkg.com/ja/

3.パッケージ導入

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

初期化（おまじない）

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

gulpfile.js

constgulp=require('gulp');constautoprefixer=require('gulp-autoprefixer');constcleanCSS=require('gulp-clean-css');constrename=require('gulp-rename');constsass=require('gulp-sass');constsourcemaps=require('gulp-sourcemaps');constpostcss=require('gulp-postcss');constmqpacker=require('css-mqpacker');constdel=require('del');constpaths={'src':{'scss':'./assets/scss/**/*.scss','css':'./assets/css/**/*.css',},'dist':{'css':'./assets/css/',}};// 各タスク関数functionstyle(){returngulp.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))}functionminify(){returngulp.src(paths.src.css).pipe(cleanCSS()).pipe(rename({suffix:'.min',})).pipe(gulp.dest(paths.dist.css));}functionclean(){returndel(['assets/css/*.min.css']);}functionwatchscss(){gulp.watch('assets/scss/*.scss',gulp.series(clean,style));}// 各タスクの宣言exports.style=style;exports.minify=minify;exports.clean=clean;exports.watchscss=watchscss;// タスク設定exports.develop=gulp.series(clean,style);exports.release=gulp.series(clean,style,minify);

package.json

{"name":"toketa","version":"1.0.0","main":"index.js","license":"MIT","devDependencies":{"css-mqpacker":"^7.0.0","del":"^6.0.0","gulp":"^4.0.2","gulp-autoprefixer":"^7.0.1","gulp-clean-css":"^4.3.0","gulp-postcss":"^8.0.0","gulp-rename":"^2.0.0","gulp-sass":"^4.1.0","gulp-sourcemaps":"^2.6.5"},"scripts":{"watch":"watchscss","dev":"gulp develop","rel":"gulp release"},"browserslist":["last 2 versions","ie >= 11","Android >= 4"]}

使えるコマンド

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

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

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

勉強させてもらったサイト集

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