はじめに
底辺コーダーが自分のために記録している、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導入
公式の指示に従いましょう
https://classic.yarnpkg.com/ja/
「npm」ってのじゃだめなの？？？
別にいいけど、こっちのほうが色々いいみたいです
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
4.gulpfile.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);
使えるコマンド
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を出力