LoginSignup
4
2

More than 1 year has passed since last update.

gulp sass の設定

Last updated at Posted at 2020-02-18

自身のメモとして、gulp での sass(scss)コンパイルの環境導入の手順をまとめます。
windowsでの対応です。

■流れ

  • 1、Node.jsのインストール(npmを使う準備、ver管理として Nodist で インストール)

  • 2、package.json ファイルの作成(npm init で初期化生成)

  • 3、gulp のインストール(npm install -D gulp)

  • 4、sacc のインストール(npm install -D gulp gulp-sass)

  • 5、gulpfile.js を記載

  • 6、gulpfile.js のある階層で、gulp 起動コマンド。

■1、Node.jsのインストール

複数人で制作したり今後ページを運用していくにあたり、Node の ver を合わせることは大切になってきます。
Node の ver を切り替えることができるように windows では Nodist を使って、Node をインストールします。

▼Nodist は以下よりダウンロード
https://github.com/nullivex/nodist

■2、package.json ファイルの作成(npm init で初期化生成)

下記コマンドで package.json ファイルを生成します。
以降の手順でインストールしていくプラグインを管理するファイルになり、インストールと一緒に随時記載されていきます。

npm init -y

-y は質問をすべてスキップするオプション。

■3、gulp のインストール(npm install -D gulp)

フォルダ毎の制作環境を持てるように、ローカルインストール(指定したフォルダ以下で使えるようにインストール)します。

––save-dev、または省略系の –D をオプションとして指定します。

npm install -D gulp

■4、sacc のインストール(npm install -D gulp gulp-sass)

npm install -D gulp gulp-sass

■5、gulpfile.js を記載

コンパイル時のソースと、掃き出し先は下記通り。
[src]フォルダを基ソースに、[dis]の中に 吐き出します。

[dist]
 ┗[css]
  ┗[test.css]

[src]
┗[scss]
  ┗[test.scss]

下記は gulpfile.js の中身です。

gulpfile.js
// プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

// 掃き出し階層の指定を定義
const path = {
  src: './src/scss/**/*.scss',
  dist: './dist/css/'
}

// default のタスクを作成する
gulp.task("default", function () {
  return gulp.watch(path.src, function () {

    // ●●.scssファイルを取得
    return (
      gulp.src(path.src)

        // Sassのコンパイルを実行、error以降Sassのコンパイルエラーを表示(これがないと自動的に止まってしまう)
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

        // cssフォルダー以下に掃き出し
        .pipe(gulp.dest(path.dist))
    );
  });
});

■6、gulpfile.js のある階層で、gulp 起動コマンド。

gulp

タスク名'default'は、gulp コマンドのみで実行することができます。

また、Node.js(npm v5.2以上)であれば
npx コマンドを使うことができ、npx gulp で、'default'タスクを実行できます。
npx コマンドを使うと、Gulp を少ない手順で使えるようになるようです。

■参考

▼「gulp-sass 5」でコンパイルエラー!
https://notes-de-design.com/website/gulp/error-gulp-sass-v5/

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2