【gulp】Sass(SCSS)以外のメタ言語をコンパイルするためフォルダ構成（src→dest）

gulpの続きです。前回はbrowser-syncでSass(SCSS)環境の自動リロードをしました。かなり楽になったので、Sass(SCSS)だけでなくAltJS（TypeScriptなど）やHTMLテンプレート（EJSなど）も一緒にコンパイルできるようフォルダ構成をsrc→destという形に変更します。それではいきましょう！

【目次】

destフォルダ（コンパイル前）とsrcフォルダ（コンパイル後）に分ける
gulpfile.js全体（修正前）
gulpfile.jsのパスを修正
gulpタスク実行を確認
Sass(SCSS)コンパイル確認
gulpfile.js全体（修正後）
最後に

前回記事
※参考：【gulp】browser-syncによる自動リロード（watch()の分離、defaultでSassと同時に実行） - クモのようにコツコツと

※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ
qiita.com

destフォルダ（コンパイル前）とsrcフォルダ（コンパイル後）に分ける

前回はCSSフォルダの中にscssファイルとコンパイルしたファイルが両方あった。これから他のメタ言語（HTML、JS）のコンパイルも一緒に行いたいので、ファイル一式をコンパイル前と後の2つに分けたい。

コンパイル前は「src」、コンパイル後は「dest」とか「dist」というフォルダ名にするのが一般的なようだ。

※参考：ディレクトリ名でよく見る dist と dest の違い - 見習いエンジニア覚書

dist = distribution

dest = destination

どちらも src などの元のコードの送り先に設定されることが多いですが、dist が公共に配布するための出力コードの意味が強いのに対し、dest が単なる出力コードとして使われることが多いのではないかと思いました。

一文字違いで意味も近くて迷うところだがより広い意味で「dest」にしておく。

修正前

gulp_sass
├node_modules（中身は省略）
├css
│├common.scss
│├orher.css
│├common.scss
│└other.css
├js
│└common.js
├index.html
├other.html
├gulpfile.js
├package.json
└package-lock.json

フォルダを複製して「glup_frontend」という名前にする。

修正後

glup_frontend
├node_modules（中身は省略）
├src
│└scss
│ ├common.scss
│ └other.scss
├dest
│├css
││├common.css
││└other.css
│├js
││└common.js
│├index.html
│└other.html
├gulpfile.js
├package.json
└package-lock.json

「src」フォルダと「dest」フォルダを作る
「src」フォルダの中に「scss」フォルダを作る
「scss」フォルダにscssファイルを入れる
「dest」フォルダにそれ以外のhtml、css、jsファイルを入れる

AltJSやHTMLテンプレートエンジンはまだ作っていないが、とりあえずコンパイルが必要なscssファイルのみを「src」フォルダに入れる。それ以外は「dest」フォルダに入れる

gulpfile.js全体（修正前）

フォルダ構成を変更したことによってgulpfile.jsのパス設定が変わったはずなので、変更する。

変更前

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync'); 

// sassコンパイル
gulp.task('sass', (done) => {
    gulp.src('./css/*.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .on("error", sass.logError)
        .pipe(gulp.dest('./css'));
    done();
});

// リロードするhtml
gulp.task('browser-sync', (done) => {
    browserSync.init({
        server : {
            baseDir : './',
            index : 'index.html',
        },
    });
    done();
});

// リロード設定
gulp.task('browser-reload', (done) => {
    browserSync.reload();
    done();
});

// 監視ファイル
gulp.task('watch-files', (done) =>  {
    gulp.watch("./*.html", gulp.task('browser-reload'));
    gulp.watch("./css/*.css", gulp.task('browser-reload'));
    gulp.watch("./css/*.scss", gulp.task('sass'));
    gulp.watch("./js/*.js", gulp.task('browser-reload'));
    done();
});

// タスク実行
gulp.task('default', gulp.series( gulp.parallel('watch-files', 'browser-sync', 'sass'), (done) => {
    done();
}));

詳細は前回の記事を参照
※参考：【gulp】browser-syncによる自動リロード（watch()の分離、defaultでSassと同時に実行） - クモのようにコツコツと

gulpfile.jsのパスを修正

まずSass(SCSS)コンパイル部分

// sassコンパイル
gulp.task('sass', (done) => {
    gulp.src('./src/scss/*.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .on("error", sass.logError)
        .pipe(gulp.dest('./dest/css'));
    done();
});

gulp.src()のパスを/src/scss/*.scssに
2つ目の. gulp.dest()のパスを./dest/cssに

次にリロード設定

// リロードするhtml
gulp.task('browser-sync', (done) => {
    browserSync.init({
        server : {
            baseDir : './dest/',
            index : 'index.html',
        },
    });
    done();
});

baseDirキーの値を./dest/に

最後に監視ファイルの設定

// 監視ファイル
gulp.task('watch-files', (done) =>  {
    gulp.watch("./dest/*.html", gulp.task('browser-reload'));
    gulp.watch("./dest/css/*.css", gulp.task('browser-reload'));
    gulp.watch("./src/scss/*.scss", gulp.task('sass'));
    gulp.watch("./dest/js/*.js", gulp.task('browser-reload'));
    done();
});

1つ目のgulp.watch()の第一引数のパスを./dest/*.htmlに
2つ目のgulp.watch()の第一引数のパスを./dest/css/*.cssに
3つ目のgulp.watch()の第一引数のパスを/src/scss/*.scssに
4つ目のgulp.watch()の第一引数のパスを./dest/js/*.jsに

全体的にはscssファイルには「/src」を、html、css、jsファイルには「/dest」を追加している。

gulpタスク実行を確認

ちゃんと動くか確認する。

ターミナルを開いてcdコマンドで「glup_frontend」フォルダに移動。

cd /（フォルダ）/glup_frontend

gulpタスクを実行！

npx gulp

おお！ブラウザが立ち上がった！

http://localhost:3000

ちゃんと表示されている！ f:id:idr_zz:20200415195149j:plain

Sass(SCSS)コンパイル確認

この状態でSass(SCSS)ファイルを修正して、反映されるかを確認する。

h2タグの色が青（blue）だったのを

  h2 {
    color: blue; 
    font-size: 1.5em;
    line-height: 1.2;
    }

茶色（brown）にしてみる。

  h2 {
    color: brown; 
    font-size: 1.5em;
    line-height: 1.2;
    }

ファイルを保存すると…

おお！自動リロードで茶色になった！ f:id:idr_zz:20200415195820j:plain

想定どおりに動いた！パスを変えるだけなので慎重にやれば問題ない。

gulpfile.js全体（修正後）

最後に修正後のgulpfile.js全体。

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync'); 

// sassコンパイル
gulp.task('sass', (done) => {
    gulp.src('./src/scss/*.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .on("error", sass.logError)
        .pipe(gulp.dest('./dest/css'));
    done();
});

// リロードするhtml
gulp.task('browser-sync', (done) => {
    browserSync.init({
        server : {
            baseDir : './dest/',
            index : 'index.html',
        },
    });
    done();
});

// リロード設定
gulp.task('browser-reload', (done) => {
    browserSync.reload();
    done();
});

// 監視ファイル
gulp.task('watch-files', (done) =>  {
    gulp.watch("./dest/*.html", gulp.task('browser-reload'));
    gulp.watch("./dest/css/*.css", gulp.task('browser-reload'));
    gulp.watch("./src/scss/*.scss", gulp.task('sass'));
    gulp.watch("./dest/js/*.js", gulp.task('browser-reload'));
    done();
});

// タスク実行
gulp.task('default', gulp.series( gulp.parallel('watch-files', 'browser-sync', 'sass'), (done) => {
    done();
}));