yarnでgulpの環境構築

gulpの環構築の時にサラッと出来るように自分用に投稿。
完璧に初心者なのであしからず

※ちなみにyarnもgulpもnodeもインストール済みとして書きます。

環境

・yarn
1.21.1
・gulp
CLI version: 2.2.0
Local version: 4.0.2 `
・node(楽だからnodistで管理したほうがいいかも)
v11.13.0

手順

test(任意)フォルダの中に移動します

 C:\Users\(ユーザー名) > CD test

 C:\Users\(ユーザー名)\test >

ちなみにtestフォルダの中は下記になります

 test─┬─css
      ├─scss
      │  └─main.scss
      └─index.html

package.jsonを生成しないとダメなので下記を実行

 C:\Users\(ユーザー名)\test > yarn init

実行すると色々聞かれるけどエンター連打。
そうするとtest直下にpackage.jsonが生成される。

 test─┬─css
      ├─scss
      │  └─main.scss
      ├─package.json
      └─index.html

macはこの時にgulpのローカルインストールをする

 C:\Users\(ユーザー名)\test > yarn add gulp

パッケージをインストールします。なのでとりあえず下記を実行。
(後で色々変更できるけどとりあえず)

 C:\Users\(ユーザー名)\test > yarn add --dev gulp
 C:\Users\(ユーザー名)\test > yarn add --dev gulp-sass
 C:\Users\(ユーザー名)\test > yarn add --dev gulp-autoprefixer
 C:\Users\(ユーザー名)\test > yarn add --dev gulp-plumber

次にgulpfile.jsの生成。これは自分で作らないとだめなやーつ。
作ったらtestフォルダに放り投げといて下さい。
中身はざっくりこんな感じ。

const { watch, series, task, src, dest } = require('gulp');
const sass                               = require('gulp-sass');
const autoprefixer                       = require('gulp-autoprefixer');
const plumber                            = require('gulp-plumber');

const convertToCss = () =>
    src('scss/*.scss')
      .pipe(plumber())
      .pipe(sass())
      .pipe(autoprefixer())
      .pipe(dest('css/'));

const watchscss = () =>
    watch('scss/*.scss', convertToCss);

exports.default = watchscss;

.pipe(dest('css/'));の部分を
.pipe(dest('css'));にしててそれに気づかず大変でした。

最後に下記を実行して終了

 C:\Users\(ユーザー名)\test >　yarn gulp

これでちゃんとコンパイルが出来ているはず。
何故かこれだけの作業なのに結構時間がかかった。

Windowsでgulpの環境構築。yarn編

yarnでgulpの環境構築

環境

手順