Gulp4作成まとめ

2021年10月17日 11:55

pugとsassのコンパイルとブラウザシンクが使えるgulpを作ろうと思い立った今日この頃。

仕事上ではgulp3が多かったりもはや魔界化しているので記述は参考にできず...Gulp4を一から学んでみようと思ったので参考サイトを見ながら作ってみました！
※大元ソースは備忘録さんの記事を流用し、所々じぶん用に改変しております...!

環境

■windows
・Windows 10
・node：14.18.6
・nvm：

■Mac
・Big Sur 11.5.2
・node：12.18.3
・npm：6.14.6

ディレクトリ構成

root/
┣━src/
┃　┣━js/
┃　┣━scss/
┃　┗━pug/
┣━dist/
┃　┣━js/
┃　┣━css/
┃　┗━html
┣━node_modules
┣━package.json
┗━gulpfile.js

最初だけの手順

①パッケージロックジェイソンを入れます

npm init -y

②次にgulpをインストールします

npm install -D gulp

プラグインの追加

必要なプラグインを追加していきます

npm i -D gulp-notify 
npm i -D gulp-plumber
npm i -D gulp-pug
npm i -D gulp-autoprefixer
npm i -D gulp-uglify
npm i -D browser-sync
npm i -D gulp-sass
npm install gulp-sass —save-dev

入れたものは上から
・エラー通知
・デスクトップ通知
・Pug
・ベンダープレフィックスの自動付与
・JSをひとつにまとめる
・ブラウザシンク
・Sass　※二つ入れないといけない

Gulpfile.jsの記述

 'pug': 'src/pug/',// gulpコマンドの省略
const {src, dest, watch} = require(‘gulp‘);
// ここにプラグイン
const notify = require(‘gulp-notify’);
const plumber = require(‘gulp-plumber’);
const autoprefixer = require(‘gulp-autoprefixer’);
const uglify = require(‘gulp-uglify’);
const sass = require(‘gulp-sass‘)(require(‘sass’));
const pug = require("gulp-pug");
const browserSync = require("browser-sync");

// 各ディレクトリのパス
var paths = {
 'root': './dist/',
 'scss': 'src/scss/',
 'css': 'dist/css/',
 'pug': 'src/pug/',
 'Js': 'src/js/',
 'JsDist': 'dist/js/'
}

// Sass
const compileSass = () =>
 // ファイルの取得
 src(paths.scss + '**/*.scss')
   .pipe(
     sass({
       outputStyle: "expanded"
     })
   )
   // コンパイル先
   .pipe(dest(paths.css));
   
// Pug
const compilePug = () =>
 src(paths.pug + "**/*.pug")
     .pipe(
       pug({
         pretty: true
       })
     )
     .pipe(dest(paths.html));

// JS
const compressJs = () =>
 src(paths.js + "**/*.js")
     .pipe(plumber());
     .pipe(uglify()); 
     .pipe(dest(paths.jsDist));

     
// Sass,Pugファイルの監視
const watchSrcFiles = () => {
 watch(paths.pug + '**/*.pug', compilePug);
 watch(paths.scss + '**/*.scss', compileSass);
 watch(paths.js + '**/*.js', compressJs);
}

// Browser Sync
const taskServer = () =>
 browserSync.init({
   server: {
     //ルートディレクトリの指定
     baseDir: paths.root,
     startPath: paths.root + ‘index.html’,
   }
   
 });

// 再読み込みさせる
const reload = (done) =>  {
 browserSync.reload();
 done();
}

 watch(paths.html + "**/*.html", reload);
 watch(paths.css + "**/*.css", reload);
 watch(paths.jsDist + "**/*.js", reload);

exports.default = () =>
 watchSrcFiles ();
 taskServer();

参考サイト

備忘録
 絶対つまづかないGulp4入門
 GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする

エラーまとめ

😫Gulp起動してSassを保存したらエラーが出て保存できなかった①

Error:Cannot find module ’gulp-sass’

😎解決策

npm install gulp-sass —save-dev

を実行して足りないSassプラグインを追加する
moduleがないって言われたら追加する

😫Gulp起動してSassを保存したらエラーが出て保存できなかった②

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the ‘sass’ and ‘node-sass’ packages are permitted.
For example,in yourgulpfile:

😎解決策
①Nodeを12以上になってるか確認
②sassのプラグインが2つ入ってるかpackage.jsonを確認
→入ってなかったら追加

最初作り始めてたときnodeのバージョンが10.17.0で作っていたのでここで引っかかった。
Sass2つ入れるのも落とし穴

😫Gulp起動時にエラーが出てコンパイルできない

ReferenceError: （ここに該当のテキスト） is not defined

😎解決策
該当のテキストを探してしてみること
これを言われたときは綴ミスなど気をつけよう
私は綴ミスだった