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