【Sass】Node.js、Gulp導入手順メモ

Sassの導入手順の自分用のメモです。

後述の参照ページの要約。

毎回手順を忘れているのでメモメモ……(- -)

手順

Node.jsを公式サイトからインストールする

コマンドプロンプトを起動する（Windowsキー＋R）

[node -v]と入力しインストールされているか確認（コマンドはNode.jsのバージョン確認）

プロジェクトフォルダーを作成し、そこに移動する。移動するにはコマンドを打つか、[cd ]入力後、コマンドプロンプトにフォルダをドラッグアンドドロップする

[npm init -y]を実行し、package.jsonを作成

[npm install -D gulp]を実行し、gulpをインストール

[npm install -D gulp gulp-sass]を実行し、gulp本体とgulp-sassをインストールする

gulpfile.jsを作成し、以下のコードをコピペする

// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);
// style.scssをタスクを作成する
gulp.task(“default”, function() {
// style.scssファイルを取得
return (
gulp
.src(“css/style.scss”)
// Sassのコンパイルを実行
.pipe(sass())
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});

cssフォルダを作成style.scssを作成し以下のコードをコピペする

// ネストのテスト
div {
p {
font-weight: bold;
}
}
// 変数のテスト
$fontColor: #525252;
h1 {
color: $fontColor;
}

[npx gulp]を実行するとscssからcssが作成される

gulpfile.jsを以下のコードに置き換えるとwatchが使える

// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);
// style.scssの監視タスクを作成する
gulp.task(“default”, function() {
// ★ style.scssファイルを監視
return gulp.watch(“css/style.scss”, function() {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
return(
gulp
.src(“css/style.scss”)
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: “expanded”
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(“error”, sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});
});

以下を参照、この記事が無かったら無理だった。

絶対つまずかないGulp4入門(2019年版)
インストールとSassを使うまでの手順

nodistのエラー解決法

C:¥Users¥(ユーザー名)¥.npmrcを削除する