Gulpの構築（Sassコンパイル、CSS圧縮、ベンダープレフィックス）

Gulpを使用したSassコンパイル、CSS圧縮ファイルの生成、ベンダープレフィックスの付与をするための環境構築したので覚書です。

1 Node.jsのインストール

公式サイトからダウンロード、インストールを行う。

2 package.jsonファイルの作成

作業するディレクトリに移動しコマンドプロンプトで次のコードを実行

npm init -y

3 Gulpのインストール、gulpfile.jsの作成

作業するディレクトリで次のコードを実行

npm install gulp --save-dev

作業するディレクトリにgulpfile.jsを作成（ファイルの処理はJavaScriptで記述）

4 Sassのコンパイル、ベンダープレフィックスの付与

必要なプラグインのインストール

• Sassコンパイル

npm install gulp-sass --save-dev

• ベンダープレフィックスの付与

npm install autoprefixer --save-dev
npm install gulp-postcss --save-dev

※gridレイアウトに対応させるためにpostcssが必要

gulpfile.jsへの記述

gulp.task("sass", function() {
  return (
    gulp
        //SCSSファイルの取得
      .src("css/style.scss")
        //Sassのコンパイル
      .pipe(sass({outputStyle: "expanded"}))
        //ベンダープレフィックスの付与
      .pipe(
        postcss([
        autoprefixer({
        cascade:false,
        grid:true
        })
        ])
      )
        //cssファイルの書き出し
      .pipe(gulp.dest("css"))
  );
});

5 CSSの圧縮

必要なプラグインのインストール

• CSSの圧縮プラグイン

npm install gulp-clean-css --save-dev

※gulp-minify-cssは非推奨

• ファイル名のリネーム

npm install gulp-rename --save-dev

gulpfile.jsへの記述

gulp.task("cleancss", function(){
  return(
    gulp
        //CSSファイルの参照
      .src("css/style.css")
        //CSS圧縮の実行
      .pipe(cleancss())
        //ファイル名変換
      .pipe(rename({
        extname:'.min.css'
      }))
        //書き出し
      .pipe(gulp.dest("css"))
  );
});

6 watch（自動更新）

gulp.task("watch",function(){
  return(
    gulp
    .watch("css/style.scss",gulp.series("sass","cleancss"))
  );
});

Sassのコンパイル→CSS圧縮の順に実行する。

7 タスクの実行処理

gulpfile.jsへの記述

gulp.task("default",gulp.task("watch"));

コマンドプロンプトでの実行

npx gulp

8 別のディレクトリで使う場合

package.jsonとgulpfile.jsをコピペ

コマンドプロンプトで次のコマンド実行

npm install

package.jsonに記述されたプラグインが作業ディレクトリにダウンロードされる。