JavaScript: Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応)

Web アプリの HTML フロントモック開発プロジェクトを Gulp4.0 対応にし、gulpfile.js を書き換えました。
EJS(HTML)/SCSS でのアプリ UI 作成等にご利用ください。

目次

  • Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応)
  • まとめ

Gulp, EJS, SASS, browser-sync の gulpfile サンプル(Gulp4.0対応)

プロジェクトフォルダ構成

project
├ src
│ ├ ejs
│ │ ├ _includes
│ │ └ index.ejs
│ ├ fonts
│ ├ images
│ │ └ logo.png
│ ├ js
│ │ └ main.js
│ └ scss
│   └ style.scss
├ public
├ gulpfile.js
├ node_modules
└ package.json

public フォルダに静的ファイルが出力されます。

package リスト

  • autoprefixer -> CSS ベンタープリフィックス自動付与
  • browser-sync -> ファイル更新時にホットリロード
  • cssnano -> CSS を Minify する
  • del -> ファイル削除に使用
  • gulp -> タスクランナー
  • gulp-ejs -> EJS コンパイル
  • gulp-notify -> 通知
  • gulp-plumber -> エラー時の処理停止を回避する
  • gulp-postcss -> CSSパーサー(autoprefixer,cssnano)
  • gulp-rename -> 出力ファイル名変更
  • gulp-replace -> HTML head の CSS にタイムスタンプを追加し書き換える
  • gulp-sass -> SASS コンパイル

npm install

npm install --save-dev autoprefixer browser-sync cssnano del gulp gulp-ejs gulp-notify gulp-plumber gulp-postcss gulp-rename gulp-replace gulp-sass

package.json scripts 追加

"scripts": {
    "build": "gulp build",
    "clean": "gulp clean",
    "server": "gulp"
  },

gulpfile.js

const autoprefixer = require("autoprefixer");
const browserSync = require('browser-sync');
const cssnano = require('cssnano');
const gulp = require('gulp');
const ejs = require('gulp-ejs');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const del = require('del');

// paths
const paths = {
    src: 'src',
    dest: 'public'
}

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

// reload
gulp.task("reload", (done) => {
    browserSync.reload();
    done();
});

// EJS
gulp.task('ejs', () => {
    var ts = Date.now();
    return gulp.src([paths.src + "/ejs/**/*.ejs", '!' + paths.src + "/ejs/**/_*.ejs"])
        .pipe(ejs({}, {}, {
            ext: '.html'
        }))
        .pipe(replace(/__NOCACHE__/g, ts)) //replace __NOCACHE__
        .pipe(gulp.dest(paths.dest));
});

// SASS
gulp.task("sass", () => {
    return gulp.src(paths.src + '/scss/**/*.scss', {
            sourcemaps: true
        })
        .pipe(plumber({
            errorHandler: notify.onError('<%= error.message %>'),
        }))
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        .pipe(gulp.dest(paths.dest + '/css/'), {
            sourcemaps: './maps'
        })
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(postcss([
            autoprefixer({
                browsers: ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            }),
            cssnano({
                autoprefixer: false
            })
        ]))
        .pipe(gulp.dest(paths.dest + '/css/'), {
            sourcemaps: './maps'
        })
        .pipe(browserSync.stream());
});

// clean
gulp.task('clean', (done) => {
    del(paths.dest + '/**/*');
    done();
});

// copy fonts
gulp.task("copy-fonts", (done) => {
    gulp.src(paths.src + "/fonts/**/*")
        .pipe(gulp.dest(paths.dest + "/fonts"));
    done();
});

// copy images
gulp.task("copy-images", (done) => {
    gulp.src(paths.src + "/images/**/*")
        .pipe(gulp.dest(paths.dest + "/images"));
    done();
});

// copy js
gulp.task("copy-js", (done) => {
    gulp.src(paths.src + "/js/**/*.js")
        .pipe(gulp.dest(paths.dest + "/js"));
    done();
});

// watch
gulp.task("watch", (done) => {
    gulp.watch(paths.src + "/scss/**/*.scss", gulp.series('sass', 'ejs', 'reload'));
    gulp.watch(paths.src + "/ejs/**/*.ejs", gulp.series('ejs', 'reload'));
    done();
});

// scripts tasks
gulp.task('default',
    gulp.parallel('watch', 'browser-sync')
);

gulp.task('build',
    gulp.series('clean',
        gulp.series('sass',
            gulp.series('ejs',
                gulp.parallel('copy-fonts', 'copy-images', 'copy-js'))))
);

実行

public フォルダのクリーン&ファイルコピー

npm run build

EJS SASS ウォッチ

npm run server

まとめ

Gulp4.0 アップデートにより gulpfile の更新が必要となりましたが、3.9 と比べ直列・並列処理が実装され、コード全体の見通しもよくなりました。
ちょっとしたフロント開発なら、このプロジェクトでサクサクと進められるので、必要なモジュールを追加しご利用いただければと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents