Gulp4 コピペで使えるコード #gulp

Gulp使おうかと思った時には、いつもテンプレ使うのでいつまでたっても覚えられません。
ということでテンプレ置いておきます。

仕様

生成されたURLは、セーブした瞬間自動で(少しだけ遅れて)反映されます。
当然SASSやSCSSは全部セーブした瞬間コンパイルです。(sassの場合はgulpfile.jsのscssのディレクトリを変更してください。)
またcssのディレクトリは自分で作らなくても自動で作成されます。
scssのファイルを増やしてしまうと、一度コマンドを停止してもう一度実行する必要があるかも

テンプレート

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const webserver = require('gulp-webserver');

gulp.task('scss', () => {
  return gulp.watch('./scss/*.scss', () => {
    return gulp.src('./scss/*.scss')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'compressed' })) // 通常:expanded, 圧縮:compressed
      .pipe(autoprefixer())
      .pipe(gulp.dest('./css'));
  });
});

gulp.task('webserver', () => {
  return gulp.src('./')
    .pipe(webserver({
      host: 'localhost',
      port: 8080,
      livereload: true
    }))
});

gulp.task('default',
  gulp.series(
    gulp.parallel('scss', 'webserver'),
  )
);

How To Use

bash

$ mkdir myproject && cd myproject
$ touch gulpfile.js
$ yarn add -D gulp gulp-sass gulp-plumber gulp-autoprefixer gulp-webserver
$ npx gulp

感想

興味ある人は、やってみるとどうでしょうか。
scssのファイルにindex.scssを置いてその下にmoduleやcomponentsって名前のディレクトリを用意してimportして使ってます。

必要なモジュールやコンポーネントだけをindex.scssに入れることでcommonなどのディレクトリをつくってわざわざ共有するよりいいと思います。

より便利な環境でハッピーなプログラミングライフを‪(๑˃̵ᴗ˂̵)‬♪