Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What is going on with this article?
@KazuyoshiGoto

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-pug 
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 が必要になったのが微妙にダルいです。

42
Help us understand the problem. What is going on with this article?
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
42
Help us understand the problem. What is going on with this article?