Help us understand the problem. What is going on with this article?

2020年版:Gulp4でSassとPugをビルドしてBrowserSyncでライブプレビューする

以前書いた「GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする」のGulp4対応版です。

Gulp3から4にうっかりアップデートしたら従来の記述ではエラーを吐くようになったので、これを機にGulp4に対応しました。

サクッとSassを使い始めたい人はコピペしてください。

前提

以下はすでに扱えるものとし、説明を省きます。

  • Node.js
  • npm

ディレクトリ構成

dist/
 ├─css/
 └─js/
src/
 ├─js/
 ├─pug/
 └─scss/
gulpfile.js
package.json

distに生成物、srcに編集用ファイルの構成。

Gulpを初めて使うなら

npm i -g gulp

Gulpのグローバルインストールが必要です。
Gulpをすでに使っているなら飛ばしてください。

nodeモジュールのインストール

npm i -D gulp
npm i -D gulp-notify
npm i -D gulp-plumber
npm i -D gulp-sass
npm i -D gulp-autoprefixer
npm i -D gulp-uglify
npm i -D browser-sync

冒頭にも挙げた以前の記事ではPugも入れていますが、最近は使わなくなったので外しています。

最近またPug使うようになったので加えました。

gulpfile

gulpfile.js
const gulp    = require('gulp');
const notify  = require("gulp-notify");
const plumber = require("gulp-plumber");
const sass    = require('gulp-sass');
const pug     = require('gulp-pug');
const autoprefixer = require('gulp-autoprefixer');
const uglify  = require('gulp-uglify');
const browserSync = require('browser-sync');

//setting : paths
const paths = {
  'root'    : './dist/',
  'pug'     : './src/pug/**/*.pug',
  'html'    : './dist/**/*.html',
  'cssSrc'  : './src/scss/**/*.scss',
  'cssDist'   : './dist/css/',
  'jsSrc' : './src/js/**/*.js',
  'jsDist': './dist/js/'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

//Sass
task('sass', function () {
  return (
    src(paths.cssSrc)
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(sass({
        outputStyle: 'expanded'// Minifyするなら'compressed'
      }))
      .pipe(autoprefixer({
        browsers: ['ie >= 11'],
        cascade: false,
        grid: true
        }))
      .pipe(dest(paths.cssDist))
  );
});

//Pug
task('pug', function () {
  return (
    src([paths.pug, '!./src/pug/**/_*.pug'])
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(pug({
        pretty: true,
        basedir: "./src/pug"
      }))
      .pipe(dest(paths.html))
  );
});

//JS Compress
task('js', function () {
  return (
    src(paths.jsSrc)
      .pipe(plumber())
      .pipe(uglify())
      .pipe(dest(paths.jsDist))
  );
});

// browser-sync
task('browser-sync', () => {
  return browserSync.init({
      server: {
          baseDir: paths.root
      },
      port: 8080,
      reloadOnRestart: true
  });
});

// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});

//watch
task('watch', (done) => {
  watch([paths.cssSrc], series('sass', 'reload'));
  watch([paths.jsSrc], series('js', 'reload'));
  watch([paths.pug], series('pug', 'reload'));
  done();
});
task('default', parallel('watch', 'browser-sync'));

あとはコンソールで npx gulp で実行。

主な変更点

gulp.task()の中でちゃんとreturn()で返してやらないとダメになったようです。実はそこ以外はあまり変わってません。

Gulp4になってから実行コマンドに npx が必要になったのが微妙にダルいです。

KazuyoshiGoto
UI/UXエンジニア。デザイン、サービス設計、機能(UI)設計、サーバサイド、SEO、ウェブマーケティングなどWebの全般に関わり、現在はBtoBの領域中心にWebとユーザーのふれあい方(体験:UX)に関して垣根なく取り組んでいます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした