gulp を使って style.scss を style.css に変換

6026 ワード
CSS gulp scss CSS テキストリンク

次のページで行っていることを Arch Linux で確認しました。
絶対つまずかないGulp 4入門（2019年版）

Node.js と npm は既にインストールされているものとします。

$ node --version
v11.12.0
$ npm --version
6.9.0

1) 作業フォルダーの作成

mkdir gulp-test
cd gulp-test

2) package.json の作成

npm init -y

3) ライブラリーのインストール

npm install -D gulp
npm install -D gulp gulp-sass

4) gulpfile.js の用意

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(
{
          outputStyle: "expanded"
        }
))
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  )
})

5) css/style.scss の用意

css/style.scss
$split-grid: 3;

@for $i from 1 through $split-grid {
  .col-$i {
    flex: 0 0 100% / $split-grid * $i;
    max-width: 100% / $split-grid * $i;
  }
}

6) css/style.css への変換

npx gulp

css/style.css が作成されます。

css/style.css
.col-$i {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-$i {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-$i {
  flex: 0 0 100%;
  max-width: 100%;
}
Javaはforループを使用してすべての水仙数を出力します