gulpでsassをコンパイルまでの流れをやってみたメモ

徒然草2.0

2020.06.01

# ダウンロード
×curl -o https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar.xz
×curl -output https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar.xz
〇curl -o node-v12.17.0-linux-x64.tar.xz https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar
.xz
# 解凍（参考：https://qiita.com/ymaru/items/87fbc4e68f5995d3964c）
tar Jxvf node-v12.17.0-linux-x64.tar.xz
# シンボリックリンクを張る（参考：https://qiita.com/suzuki-sapporo/items/1748dcaacfe244010980）
ln -s node-v12.17.0-linux-x64 node
# pathを通す
export NODE_HOME=$HOME/node
export NODE_PATH=$NODE_HOME/lib/node_modules
export PATH=$NODE_HOME/bin:$PATH
# .profileを適用
source .profile
# バージョン確認
$ node –version
v12.17.0
$ npm -version
6.14.4
# gulpとbowerをインストール
npm install -g gulp bower
# gulp…ビルドツール(make的なもの)
# bower…クライアントサイドの管理ツール?
# gulpのバージョン確認
$ gulp –version
CLI version: 2.2.1
Local version: 4.0.2
# bowerのバージョン確認
$ bower –version
1.8.8
# (Webサイトの)プロジェクト生成
mkdir gulp_test
cd gulp_test
npm install -D gulp
# これでpackeage.jsonが作成される（参考：https://ics.media/entry/3290/）
# ※「npm install -g gulp-cli」で説明する記事はグローバルに導入する手段なので非推奨
# SassにはSass記法とSCSS記法があるが今回はSass記法を使用する。
# 本体のgulpとSassコンパイルのためのgulp-sassプラグインをインスコ
npm install -D gulp gulp-sass
#gulpを使う上で必要なgulpファイルを作成(中身↓)
#style.scssをコンパイルする処理になっている。
// 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”))
);
});
#タスクの実行は…
npx gulp
# にて行う。
# css/style.scssを作成して↓(ファイルの中身)
// ネストのテスト
div {
p {
font-weight: bold;
}
}